Onlook
Open-source visual code editor for React apps that lets you design in the browser and writes changes directly to your codebase.
Onlook is an open-source visual editing tool for React and Next.js applications that bridges the gap between design tools like Figma and production code. Developers and designers can click on any element in the browser, adjust styles, and have those changes written directly back into source code in real time. Launched in 2024 by Kiet Ho and the Onlook team, the project gained thousands of GitHub stars within months of its public release. Unlike design tools that export to code, Onlook works directly with existing React codebases and supports Tailwind CSS natively. An AI mode enables natural language layout and style changes, making it accessible to non-engineers working on React frontends.
Key Features
- Live DOM editing - click any React element in the browser and modify styles without writing CSS
- Real-time code sync - changes made visually are written directly back to source files instantly
- Tailwind CSS support with class-based editing and visual spacing, typography, and color controls
- AI natural language commands for layout changes - describe what you want to adjust in plain English
- Component tree inspector with props editor and event handler visibility
- Works with any existing React or Next.js project with no configuration or migration required
Use Cases
- Frontend developers making rapid UI iterations without leaving the browser or opening CSS files
- Design teams adjusting spacing, colors, and typography in React apps without writing code
- Product teams reviewing and tweaking UI in staging environments interactively before release
- Indie developers building React projects who want Figma-like controls without a separate design tool
Pros
- Fully open-source with self-hosting option - no vendor lock-in for the core editing functionality
- Writes directly to source code rather than exporting static files, keeping the codebase clean and maintainable
- Works with any existing React codebase with no setup, migration, or special file formats needed
Cons
- Limited to React and Next.js projects - no support for Vue, Svelte, or other frameworks yet
- Advanced AI capabilities and cloud sync features require the paid Pro plan currently in development
- Visual editing can create merge conflicts if multiple developers edit the same component files simultaneously
Onlook Alternatives
Explore similar tools and alternatives
Looking for alternatives to Onlook? Here are some similar tools you might like:
Builder.io
Visual development platform with AI that converts Figma designs to production-ready React, Vue, and Angular code in one click.
Galileo AI
Text-to-UI design tool that generates complete, high-fidelity Figma screen designs from a natural language prompt - skipping the blank canvas entirely.
Locofy.ai
AI plugin that converts Figma and Adobe XD designs into production-ready React, Next.js, Vue, and React Native code automatically.
Ready to try Onlook?
Visit the official website to explore all features and get started with Onlook today.
Reviews
0 reviews for Onlook
Based on 0 reviews
Share your experience
Log in to write a review for Onlook
Ito
Only code review that runs your code. Provides runtime analysis with evidence (logs, video, screenshot) to show how code changes application actually work. Back-end, front-end, api, integration.
Cursor
AI-native code editor built on VS Code with built-in AI chat, autocomplete, and codebase understanding.
GitHub Copilot
AI pair programmer by GitHub/OpenAI that suggests code completions, functions, and entire files in your IDE.
Have an AI Tool?
List your AI tool for free, or go featured for top placement in your category - and reach thousands of potential users.
Submit Your Tool