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.
Villainterest - Product Notes
Save
Save
Save
Save
Save
Save
Save
Save
Save
Save
Save
Save
Savesyndicate
Unlimited lairs, private boards, and first look at every new scheme.
Sign up.jpg&w=828&q=75)
Save
.jpg&w=640&q=75)
The masonry layout is breaking on mobile - can you fix the responsive columns?
I see the issue! The CSS columns aren't adapting properly to smaller screens. Let me update the responsive breakpoints and add proper mobile optimization.
Villainterest - Product Notes
SaveSaveSaveSaveSaveSaveSaveSaveSaveSaveSaveSaveSavesyndicate
Unlimited lairs, private boards, and first look at every new scheme.
Sign upSaveThe masonry layout is breaking on mobile - can you fix the responsive columns?
I see the issue! The CSS columns aren't adapting properly to smaller screens. Let me update the responsive breakpoints and add proper mobile optimization.
Design with AI on an infinite canvas
Craft, preview, and iterate with AI to ship better websites and prototypes faster than ever.
Villainterest - Product Notes
SaveSaveSaveSaveSaveSaveSaveSaveSaveSaveSaveSaveSavesyndicate
Unlimited lairs, private boards, and first look at every new scheme.
Sign upSaveThe masonry layout is breaking on mobile - can you fix the responsive columns?
I see the issue! The CSS columns aren't adapting properly to smaller screens. Let me update the responsive breakpoints and add proper mobile optimization.
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.
Components
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.
Bring your team
to Onlook today
Frequently
asked questions
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.
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.
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.
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.
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.
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.