Onlook: The Visual Vibecoding Editor for React Devs
Ever wished you could tweak your React components visually—without digging through endless lines of CSS or props? Meet Onlook, an open-source editor that blends design intuition with code. It’s like giving your cursor superpowers for styling and layout, with AI nudges to keep things moving fast.
What It Does
Onlook is a visual editor for React apps that lets you:
- Build and style components directly in a live canvas.
- Edit props and CSS with a UI instead of manual tweaks.
- Use AI suggestions to speed up repetitive tasks (think: spacing, color adjustments).
- Export clean React code—no lock-in, no magic strings.
It’s built for developers who want to iterate visually but still own their codebase.
Why It’s Cool
- Designer-Dev Handshake: The "Cursor for Designers" tagline isn’t just fluff—it bridges the gap between design tools and code.
- Open-Source Flexibility: Self-host it or tweak the engine (Apache 2.0 license).
- React-Native Friendly: Works with web and mobile React projects.
- Community-Backed: With 20K+ GitHub stars, it’s clearly scratching an itch.
How to Try It
- Clone the repo:
git clone https://github.com/onlook-dev/onlook.git - Follow the setup docs to spin up the editor locally.
- Or skip the setup and play with the live demo.
Final Thoughts
Onlook isn’t a replacement for your IDE—it’s a turbo button for prototyping and styling. If you’ve ever lost an hour adjusting padding values manually, this might save your sanity. Worth a spin for React devs who miss the immediacy of tools like Figma but need code-first control.
P.S. Found this via @githubprojects. Let us know if you build something cool with it!