Build modern websites right in your browser on top of your code
Impossible Dev Tools for React and TailwindWeb development has gone a long way!
But writing HTML manually still sucks.
React and Tailwind made it an infinitely better experience for me, but something was still missing. Switching between the code and the browser all the time felt wrong. At the same time, I felt lost with no-code editors because they are made for designers not developers.
Read more: Writing HTML sucks and No-code doesn't help
Impulse is my experiment to bridge that gap and make a "design" tool that works directly with my code. It's a dev tool that lives entirely in your browser and allows you to inspect and edit (!) your code visually and intuitively.
With Impulse, I've come to love fiddling with web UIs again.
Jump to code
Don't manually search which code creates which UI ever again! You are always one keystroke away from jumping into your code editor to the exact <div>.
Press C to jump to the selected HTML element. Press Shift+C to jump the where the current React component is called.
Preview and add Tailwind classes
Why guess? See how different classes change how the elements look as you type. Once you select a class, Impulse adds it directly to your code.
Magical autocompletion
Why memorize class names? Along with them, Impulse uses pure CSS props (and values!) to help you find the right one.
Similar classes are grouped together which makes for easy previewing.
Write new tags without leaving your browser
Why stop at classes? Add, move, or delete entire elements with Impulse! All saved to your code.
This demo avoids using key bindings for the purpose of demonstration. Adding a new node is as easy as hitting I twice. Remove it by hitting D twice.
Key bindings
Don't waste time doing repetitive work. Every command has a key binding.
Navigation tree
Never get lost.
Impulse shows you a simple document tree that combines HTML elements and React components.
