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.
Profile facts come from the vendor source. AiMatch labels unknown pricing or API details instead of estimating them.
Review official source →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 $0
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 for a one-time $29 to add pricing, features, screenshots, verified owner details, and a clearly labeled 30-day category position after the profile is live.
Claim this listing for $29Key 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
Self-hosting is free. Hosted or custom services have separate terms.
Free plan
$0- Self-hosting is free. Hosted or custom services have separate terms.
Paid plans
- See the provider pricing page for current rates, billing periods, and usage limits.
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
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
A public product API was not confirmed in the reviewed sources.
Compare Onlook with similar tools
See how it stacks up against alternatives
Related Tools
View all 120 →
Copperhead
Copperhead is an open-source AI engineering platform and CLI that helps hardware teams design, verify, and ship printed circuit boards by editing KiCad files, running KiCad checks (ERC/DRC), and producing gerbers, firmware, and documentation in a gated, auditable pipeline.
Docs.dev Your Own Hosted Docs Platform in Minutes
Docs.dev is a deployable documentation template that runs as a Cloudflare Worker in your account, using your GitHub repo as the source of truth and agent-powered drafting (e.g., Claude Code or Codex) to generate reviewable docs branches that your team publishes via commit.
statuslin.es
statuslin.es is a community gallery of Claude Code status lines—copyable, previewed scripts and themes for terminal/status-bar displays that show Claude model stats (tokens, cost, limits), git info, and other runtime metrics.
Bullet · Fast, by design.
Bullet is a fast coding agent and developer tool that routes, searches, and executes code-focused tasks with a tight loop to minimize latency — offered as a macOS download and currently available in private beta.
Premium Alternatives
%22%2F%3E%20%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20dominant-baseline%3D%22central%22%20text-anchor%3D%22middle%22%20font-family%3D%22system-ui%2C-apple-system%2Csans-serif%22%20font-weight%3D%22700%22%20font-size%3D%2250%22%20fill%3D%22white%22%3EO%3C%2Ftext%3E%20%3C%2Fsvg%3E)
OTP Inspired actor supervisor based full stack templates
ShipStacks provides production-grade, OTP-inspired full-stack SaaS templates that include supervisors/actor patterns, auth, payments, uploads, AI chat and agent playbooks, and Docker-ready deployment in multiple languages and frameworks.
TokenDelivery.ai
TokenDelivery.ai (Token Delivery Network) is an OpenAI-compatible model API and playground that offers reproducible, deterministic model outputs, streaming responses, multimodal inputs (images and short videos), and exposed sampling parameters. It is free during preview and provides API keys, a playground, and a documented base URL for developers.
ratio1
Ratio1 is a blockchain-powered, decentralized AI operating system and edge/cloud computing platform that enables rapid development and deployment of AI apps, a tokenized GPU compute marketplace, and node-based infrastructure via Node Deeds and the $R1 utility token.
runpod
Runpod is an AI Developer Cloud that provides on-demand GPU infrastructure—Pods, Serverless endpoints, and multi-node Clusters—enabling teams to experiment, train, fine-tune, deploy, and scale AI workloads across 31 global regions with support for 30+ GPU SKUs.
builderkit
BuilderKit is a modular Next.js AI boilerplate and starter kit that provides deployable TypeScript code, pre-built AI apps, UI components, auth, payments, and integrations to accelerate building and shipping AI SaaS products.