Impulse: Impossible Dev Tools for React and Tailwind

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.

• Built into your app: no need to install any extensions or desktop apps
• No external services, works directly with the code
• Made exclusively for developers, not designers
• Addon, not a replacement: gives you a new tool while not adding any boundaries

🍿 See demos at impulse.dev

Compared to writing code manually:

• Faster
• More fun
• Same code produced

Requirements

Languages:

• ✅ Javascript
• ✅ Typescript (typings built in)

Rendering libraries:

• ✅ React 17+
• ⬜️ Vue (possibly in the future)
• 🚫 Svelte (no plans for support)
• 🚫 Angular (no plans for support)

React frameworks and bundlers:

• ✅ Next.js
• ✅ Create React App
• ✅ Vite
• ✅ esbuild
• ⬜️ Remix
• ⬜️ Parcel
• ✅ any custom system built on top of Babel/Webpack/Rollup

CSS frameworks:

• ✅ Tailwind
• 🚫 no plans to support other CSS frameworks for now

Browsers:

• ✅ Chromium-based
• 🚫 Firefox
• 🚫 Safari

(Impulse relies on File System Access API which only works well in Chromium-based browsers)

Editor integration:

• ✅ VS Code
• ⬜️ more coming

Install

There are three ways to try Impulse.

Option 1: Try now

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.

Option 2: npm (recommended)

Setup once and for all for the entire team.

npm i -D @impulse.dev/runtime@latest

Paste 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())
}

Option 3: a