Onlook
Onlook is an open-source visual editor that lets teams design directly in their real codebase — combining AI-assisted prototyping, a visual builder, and live editing for React-based projects to close the gap between designers and developers.
Onlook is design software teams evaluate for developer tools. Use this page to review pricing, integration signals, and the best alternatives before you commit.
Used in These Packs
Quick Overview
Best for: Developer Tools
What it does
Design software for decision-makers comparing workflow fit and alternatives.
Best fit
Developer Tools
Pricing snapshot
Freemium from Free
Next step
Compare Onlook with similar tools before you shortlist it.
Compare this tool before you shortlist it
Review alternatives, pricing posture, and workflow fit side by side.
Onlook
Onlook is an open-source visual editor and design tool that lets teams design directly in their real codebase. It is built to work 1:1 with code so designers and developers operate on a single source of truth, enabling visual editing, direct code editing, and publishing from the same environment. Onlook targets teams working on web experiences (React ecosystems) and includes AI-assisted prototyping, a visual canvas, and collaboration features for design and development workflows.
Onlook is an open-source visual builder that helps product teams ship faster by enabling designers and developers to work directly with production-ready code, eliminating design-dev handoff issues.
Own this listing?
Claim this page to add pricing, features, screenshots, and verified owner details.
Claim this listingKey Features
Design with AI
AI-assisted prototyping and an AI chat provide instant design help, preview, and iteration inside the editor ('Design with AI on an infinite canvas', 'AI Chat').
Direct editing in code
Edit elements directly in the editor with drag-and-drop, rearrange, scale, and trace divs/text to create real code in real-time ('Direct editing', 'Draw-in Layers', 'Trace divs and text directly in your designs and create code in real-time').
Import existing codebase
Bring your existing React codebase into Onlook to build visually on top of actual project code ('Bring your existing React codebase and start building').
Components & reusable elements
Create and customize reusable components that can be swapped across websites to keep designs consistent ('Customize reusable components that you can swap-out across websites').
Version history & revisions
Automatic revision history allows teams to see changes and revert when needed ('Revision history - Never lose your progress – revert when you need to').
Collaboration & sharing
Share projects with your team and collaborate on designs in real-time with built-in team workflows ('Collaborate with your team', 'Share your project with your team and collaborate on designs in real-time').
Publish & export code
Export code locally, publish to GitHub, or attach a custom domain to share live projects ('You can export it on your local machine, publish it to GitHub, or host it at a link', 'Attach a custom domain and share your work with the world').
Assets & media management
Manage graphics and images centrally within the tool ('Manage your graphics and images all from one place').
Hotkeys and familiar UX
Supports common shortcut workflows to speed up design work ('All your favorite hotkeys CMD/CTRL+Z and design lightning fast with all your favorite shortcuts').
Pricing
Yes — Onlook can be self-hosted for free via the project's GitHub repository.
Self-hosted (open-source)
Free- Self-host from GitHub
- Full access to the open-source codebase
Hosted / Cloud
Contact sales / book a demo- Managed hosting and team onboarding (contact required)
- Collaborative hosted environment
Use Cases
Web prototyping and production sites
Prototype, ideate, and create web experiences directly in code and move designs straight into production-ready output ('You can prototype, ideate, and create websites from scratch with Onlook').
Designer–developer collaboration
Bridge the design/development gap by enabling designers to edit the real product while developers retain source-of-truth code ('When you design in Onlook you design in the real product — the source of truth').
Component-driven design systems
Create, reuse, and swap components across projects to maintain brand and design system consistency ('Customize reusable components that you can swap-out across websites').
Internal prototypes and mockups
Use Onlook to build presentations, mockups, and prototypes that are backed by code rather than static designs ('While it is best suited for creating web experiences, it can be used for anything visual – presentations, mockups, and more').
Integrations
React / Next.js / Vite
Works with existing React-based projects and common frameworks to import and edit live code ('Bring your existing React codebase and start building', 'Works with Next.js, React, Vite').
Storybook
Integrates with Storybook workflows for component-driven development ('Works with... Storybook').
shadcn/ui
List of supported UI libraries includes shadcn/ui ('Works with... shadcn/ui').
GitHub
Export or publish code to GitHub and self-host from the GitHub repo ('You can export it on your local machine, publish it to GitHub').
Benefits
Limitations
Frequently Asked Questions
Is there a free version of Onlook?
What kinds of things can I design with Onlook?
Why would I use Onlook?
Who owns the code that I write with Onlook?
What is the difference between Onlook and other design tools?
Why is Onlook open-source?
Getting Started
- 1 Sign up for the hosted experience or book a demo with the Onlook team.
- 2 Self-host from the project's GitHub repository to run Onlook locally or on your infrastructure ('Onlook can be self-hosted for free on GitHub').
- 3 Import your existing React codebase into Onlook and start editing visually and in-code ('Bring your existing React codebase and start building').
- 4 Invite teammates and begin collaborating; publish or export your project when ready ('Share your project with your team and collaborate on designs in real-time', 'You can export it on your local machine, publish it to GitHub, or host it at a link').
Support
Docs
Product documentation and FAQs available on the Onlook website (FAQ and product pages).
Sales / Demo
Book a demo or contact the Onlook team for hosted/cloud onboarding ('Book a Demo', 'please contact our team or book a demo').
Open-source community
Contribute via the project's GitHub repository and join other builders in the open source movement ('Join the open source movement to bring design and code together', 'Contribute to Onlook').
API
Compare Onlook with similar tools
See how it stacks up against alternatives
Related Tools
View all 121 →
Premium Alternatives
freeday-ai
Freeday provides an enterprise AI agent platform that deploys autonomous "digital employees" to automate end-to-end workflows (customer service, KYC, accounts payable, etc.), billed via outcome-based / pay-per-resolved-interaction pricing and positioned for regulated industries.
rebillion.ai
ReBillion is an AI-powered transaction coordination platform for U.S. residential real estate that reads contracts, builds timelines, validates state-specific compliance, triages email, and automates routine TC work for brokers, teams, and transaction coordinators.
-Bh91Hz9I.png)
personal-ai
Personal AI is a distributed edge AI platform offering a Small Language Model platform designed for scalable, domain-specialized, and personalized AI applications with a focus on privacy, security, and compliance.
