Onlook

Onlook is an open-source visual editor for React codebases that lets designers edit websites directly in their real code, writing changes back to source code in real-time.

What is Onlook?

Onlook is a visual editor for React websites and webapps. It takes a React codebase as input and provides a live, editable preview where changes are instantly written back to the underlying code. The tool runs as a web application optimized for larger screens and is developed by the Onlook team. It is free to self-host via GitHub (26.1k stars) and also available as a hosted cloud version by booking a demo.

Key Features

• Visual editing — Drag-and-drop, rearrange, and scale elements directly in the editor, with changes reflected in the code immediately.
• Real-time code synchronization — Every visual edit writes back to the React source code, keeping the codebase as the single source of truth.
• Reusable components — Create and customize components that can be swapped across pages and projects.
• Revision history — Track every change with versioned history and revert to any previous state.
• AI Chat — Get instant design help and feedback from an AI assistant integrated into the workflow.
• Brand compliance — Define and enforce brand colors, fonts, and styles across the project.
• Layers panel — Select and manage elements with a familiar layers interface for precision control.
• Import existing codebase — Bring your own React project and start editing visually without losing any work.

Who is it for?

• Designers who want to edit React apps visually without needing to write code themselves.
• Developers who need to maintain design-system consistency and collaborate with designers on the same codebase.
• Teams seeking a single tool that bridges design and development, reducing handoff friction.
• Open-source contributors interested in a design tool built with community-driven development.

What can you do with Onlook?

• Design a new React website from scratch — Use the visual editor and AI chat to create a full site without touching the code directly.
• Edit an existing React project — Import your codebase, make visual changes, and have them automatically reflected in your source files.
• Collaborate with your team — Share a live project link, work together in real-time, and track versions for accountability.

How does it work?

1. Connect your React codebase (or start from a blank project).
2. Edit visually using drag-and-drop, direct manipulation, and AI assistance.
3. Changes are written back to your source code automatically in real time.
4. Publish your site with a custom domain or export the code.

Pricing

Onlook is free to self-host as an open-source project on GitHub. A hosted cloud version is available; requests can be made through booking a demo.

Alternatives

• Figma — Primarily a design tool that exports designs to code but does not edit existing codebases directly.
• v0 by Vercel — AI-powered UI generation with React code output, but lacks direct visual editing of existing projects.
• Webflow — Visual web design tool that produces HTML/CSS and limited React export, but not native React code.

FAQ

Is Onlook free?

Yes, Onlook is open-source and free to self-host. The cloud-hosted version requires contacting the team.

What frameworks does Onlook support?

Onlook is built for React codebases. It allows you to visually edit React websites and webapps.

Can I use Onlook with my existing React project?

Yes, you can import your existing React codebase and start editing visually without losing any previous work.

Do I need coding knowledge to use Onlook?

No, Onlook is designed for designers to edit visually. However, it produces real React code that developers can further refine.

Can I export or publish my work?

Yes, you can publish your site with a custom domain or export the code to your local machine.