React Visual Builder

Build and Edit Apps Visually

Onlook's visual builder lets you drag, drop, and edit webapps directly in your browser while maintaining full code access. Perfect for builders who want visual speed without no-code limitations.

26.7k+ GitHub stars
YC W25
Open Source

Villainterest - Product Notes

• Implement evil pin creation (mwahaha)
• Add 'light mode' (begrudgingly)
• Build villain-to-villain messaging (evil DMs)
• Create villain collaboration boards
• Add villain lair location sharing (evil meetups)
• Create devious recommendation page

Design with AI on an infinite canvas

Craft, preview, and iterate with AI to ship better websites and prototypes faster than ever.

Native design tool features that work 1:1 with code.

A true developer tool for designers, helping you code without knowing anything about code.

Visual React Editing for Developers

Edit React Apps Visually with Code Sync

Manipulate your React codebase visually while seeing real-time code changes. No more switching between editor and browser. Build, style, and refactor your react app with pixel-perfect control and automatic code generation.

No-Code React Builder with Developer Tools

Create Complex React UIs Without Writing Every Line

Use drag-and-drop for layouts, components, and state management while Onlook generates production-ready React code.

AI-Assisted React Development

Generate and Refine React Code with AI

Combine visual building with AI prompts to create custom React components, hooks, and patterns that match your project's architecture, ensuring everything is typed, optimized, and ready for production.

Complete React Visual Builder

All the Tools to Build and Scale Your Apps

Get the best of visual design with developer-grade features. Build complex React applications visually while maintaining full control over your code, components, and architecture.

Live Code Editing

Real-time code synchronization

Make visual changes that instantly update your React files with proper TSX, props, and state management.

Layer Management

Precise control over every element

Navigate and organize your app's structure through an intuitive layers panel for precise element selection and editing.

Component Library Integration

Unified components for design and code

Use your existing React component library or import any Next.js/Tailwind kit to start building immediately.

TailwindCSS Visual Editor

Style without writing CSS

Visually edit and apply Tailwind classes with auto-completion and real-time styling previews.

Responsive Design Tools

Build for every screen size

Build mobile-first React apps with breakpoint previews and automatic media query generation.

Import Templates

Bring your own projects or start fresh

Start with any React codebase and let AI understand your patterns to generate matching components.

Frequently Asked Questions

What is Onlook?
Onlook is a visual editor for designers working in a real React codebase. Designers get an infinite canvas of the components their team already maintains and shape the product with AI as the editor. The code is the source of truth, so what you build on the canvas is the real product, not a mockup.

What can I use Onlook to do?
Onlook is great for creating websites, prototypes, user interfaces, and designs. Whether you need a quick mockup or a full-fledged website, ask Onlook to craft it for you.

How do I get started?
Getting started with Onlook is easy. Simply sign up for an account, create a new project, and follow our step-by-step guide to deploy your first application.

Is Onlook free to use?
Onlook is free for your first prompt, but you're limited by the number of messages you can send. Please see our Pricing page for more details.

What is the difference between Onlook and other design tools?
Onlook is a visual editor for code. It allows you to create and style your own creations with code as the source of truth. While it is best suited for creating websites, it can be used for anything visual – presentations, mockups, and more. Because Onlook uses code as the source of truth, the types of designs you can create are unconstrained by Onlook's interface.

Why is Onlook open-source?
Developers have historically been second-rate citizens in the design process. Onlook was founded to bridge the divide between design and development, and we wanted to make developers first-class citizens alongside designers. We chose to be open-source to give developers transparency into how we are building Onlook and how the work created through Onlook will complement the work of developers.