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 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 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
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 69 →
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.
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.
Make Sense of Any GitHub PR
MakeSense (powered by LiveReview) gives a concise, easy-to-understand explanation of any public GitHub pull request, classifies issues by severity across security/maintainability/performance/correctness, and includes a short quiz to check understanding — ready in under 30 seconds.
Sign in with your ChatGPT account for free AI
Sign in with ChatGPT lets developers add ChatGPT account authentication to web apps so users can access OpenAI AI capabilities (works across free and paid ChatGPT accounts). It provides React components and helper methods to obtain encrypted, locally stored credentials and call the AI SDK from the signed-in account.
%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.
Premium Alternatives
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.
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.
Finetunefast
FinetuneFast provides finetuning boilerplates, inference templates, and deployment tooling to accelerate building and shipping ML models (text-to-image, LLMs, RAG, TTS) — aimed at developers, indie makers and businesses who want production-ready examples and fast time-to-deploy.
