impulse
1.0.0
Build modern websites right in your browser without giving up on code.
impulse.dev | Discord
Made by @krogovoy and @IVolchenskov
Impulse was created to work with React websites in dev mode (meaning, running on your localhost).
It allows you to edit your UI right in the browser while automatically changing your code precisely the way you would do it manually. It's like a code editor extension that goes beyond the code editor.
? See demos at impulse.dev
Compared to writing code manually:
Languages:
Rendering libraries:
React frameworks and bundlers:
CSS frameworks:
Browsers:
(Impulse relies on File System Access API which only works well in Chromium-based browsers)
Editor integration:
There are three ways to try Impulse.
Copy and paste the code below into your browser's console.
d=document;s=d.createElement('script');s.src=`https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js`;d.body.appendChild(s)Easy way to play with the tool without installing anything, but it will go away once you refresh the page.
Setup once and for all for the entire team.
npm i -D @impulse.dev/runtime@latestPaste into any file that always gets imported. Usually it'll be the "main" React file, such as _app.jsx in Next.js.
if (process.env.NODE_ENV === 'development') {
import('@impulse.dev/runtime').then((impulse) => impulse.run())
}Paste this script tag at the end of <body>
{
process.env.NODE_ENV === 'development' && (
<script src="https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js"></script>
)
}IMPORTANT: make sure you are not shipping Impulse in your production build! It will bloat your bundle size!
Most bundlers cut out all the code inside an if (process.env.NODE_ENV === 'development') { ... }, but it's recommended to make a production build and compare the bundle size to what it was before.
Once installed, Impulse is ready for work. Below are some things you might want to set up for Impulse to work best for you.
If you are using Brave, enable File System Access API:
file system access apiImpulse only works if you run your development environment on the same computer that you use the browser. Impulse doesn't work with remote environments because it can't edit files on other computers.
For security reasons, File System Access API only works for localhost when http:// is used. If you are using a different hostname even though the environment is local, you should:
Insecure origins treated as secureImpulse edits your code. By default, it tries its best to make those changes as minimal as possible.
However, it doesn't really know how to format your code.
If you want it to use Prettier after each code change (recommended), pass your config to run():
if (process.env.NODE_ENV === 'development') {
- import('@impulse.dev/runtime').then((impulse) => impulse.run())
+ import('@impulse.dev/runtime').then((impulse) => impulse.run({
+ prettierConfig: require('./path_to/.prettierrc.js')
+ }))
}If you have extended the standard theme in Tailwind, pass your tailwind.config.js to run():
if (process.env.NODE_ENV === 'development') {
- import('@impulse.dev/runtime').then((impulse) => impulse.run())
+ import('@impulse.dev/runtime').then((impulse) => impulse.run({
+ tailwindConfig: require('./path_to/tailwind.config.js'),
+ }))
}
What you can do:
<div></div>Requirements:
Clone the repo:
git clone [email protected]:impulse-oss/impulse.git && cd impulseInstall dependencies:
npm installRun the dev server:
npm run devOpen http://localhost:3005/. This is a playground for developing and testing the app.
