Skip to content
aicoolies logo
Onlook logo

Onlook

Visual IDE for React that designers can use

Onlook is an open-source visual editor for React and Next.js with 25.9K+ GitHub stars that lets designers edit real code-backed interfaces on an infinite canvas. It connects visual changes, AI chat, component and layer inspection, and versioned code workflows so teams can prototype and refine product UI without treating design files as the source of truth.

Rate
Website
ShareShare on XShare on LinkedInShare on Reddit
Is this your product? →

About Onlook

Onlook reimagines the React development experience by providing a visual editing layer that sits on top of real codebases. Designers and developers can select elements, modify styles, adjust layouts, and add components through a visual interface while the tool generates clean React code that integrates directly into the project repository. Unlike design-to-code tools that produce throwaway markup, Onlook works with existing code.

The platform supports code-backed product workflows where teams want design changes to stay close to the real implementation. AI assistance helps generate component variations, suggest layout improvements, and convert visual changes into React/Next.js-oriented code patterns. The open-source architecture with 25.9K+ GitHub stars ensures transparency and a free self-hosted path for teams that want to evaluate it before using hosted collaboration features.

Onlook's current pricing model lists free self-hosting, a hosted Starter option with daily MCP-call limits, and custom Teams pricing for collaboration, security, branding, custom domains, and dedicated support. The tool focuses on keeping code as the source of truth rather than producing one-off visual exports, making it most relevant for product teams that already work in React or Next.js codebases.

Pricing & Platform Specs

Pricing Summary

Open source visual code editor for React and Tailwind CSS (Apache-2.0, $0 self-host). Cloud Free includes basic visual canvas editing, local workspace sync, and limited AI prompts ($0/mo). Cloud Pro ($15–$25/mo) offers unlimited projects, full AI-assisted UI generation and styling refactors, Figma synchronization, and cloud team collaboration. Enterprise provides custom pricing for on-premise deployments, SAML/SSO, custom design system enforcement, and dedicated SLA support.

full pricing breakdown →

Supported Platforms

React, Next.js, Storybook, shadcn/ui, Git

Explore categories, tags & use cases

Alternatives

All Onlook alternatives →
Cursor logo

Cursor

Top Pick

The AI-first code editor

AI-first code editor built as a VS Code fork that deeply integrates LLMs into every part of the development workflow. Features Tab autocomplete with multi-line predictions, Cmd+K inline editing, AI chat with full codebase awareness, and Agent mode for autonomous multi-file edits with terminal execution. Supports GPT-4, Claude, and more with automatic context from project files and docs. Includes privacy mode for SOC 2 compliance. The leading AI-native IDE with 100K+ paying users.

freemiumTelemetry
Coolify logo

Coolify

Self-hosted Heroku/Vercel alternative

Open-source, self-hostable PaaS alternative to Heroku, Vercel, and Netlify with 44K+ GitHub stars. Deploy static sites, APIs, full-stack apps, databases, and 280+ one-click services on your own VPS or bare metal via SSH. Features auto Let's Encrypt SSL, Git integration (GitHub/GitLab/Bitbucket/Gitea), S3 backups, Docker Swarm support, and a REST API for CI/CD automation. Self-hosted version is free forever with no features behind paywalls.

freemiumOpen Source
screenshot-to-code logo

screenshot-to-code

Convert any screenshot or mockup into clean frontend code with AI vision.

screenshot-to-code is an open-source tool that converts screenshots, mockups, and Figma designs into clean, functional HTML, Tailwind CSS, React, or Vue code using AI vision models. Powered by GPT-4V, Claude, and Gemini, it supports video-to-code and iterative editing workflows, making it a rapid scaffolding tool for frontend developers who want to skip the pixel-translation step entirely.

freemiumOpen Source

Side-by-Side Comparisons

Onlook logo
Onlook
vs
Lovable logo
Lovable
vs
Tempo Labs logo
Tempo Labs

Onlook vs Lovable vs Tempo Labs — Visual React Builders & AI App Development Compared

Visual React development has become a distinct category in 2026, with tools that let designers and developers manipulate real React components through intuitive visual interfaces rather than writing code line by line. This comparison examines three platforms leading this shift: Onlook as an open-source visual editor that connects to your existing codebase, Lovable as a conversational full-stack app builder for rapid product creation, and Tempo Labs as a visual React IDE with multi-agent AI planning and a rich editing canvas.

OnlookLovableTempo Labs

Community experience

Sources & verification

Sources checked
Content verified

Verification dates are editorial checks. Routine CMS saves and automatic updatedAt timestamps do not advance them.

FAQ

What is Onlook?

Onlook is an open-source visual editor for React and Next.js with 25.9K+ GitHub stars that lets designers edit real code-backed interfaces on an infinite canvas. It connects visual changes, AI chat, component and layer inspection, and versioned code workflows so teams can prototype and refine product UI without treating design files as the source of truth.

Is Onlook free?

Onlook offers a free tier alongside paid plans. Open source visual code editor for React and Tailwind CSS (Apache-2.0, $0 self-host). Cloud Free includes basic visual canvas editing, local workspace sync, and limited AI prompts ($0/mo). Cloud Pro ($15–$25/mo) offers unlimited projects, full AI-assisted UI generation and styling refactors, Figma synchronization, and cloud team collaboration. Enterprise provides custom pricing for on-premise deployments, SAML/SSO, custom design system enforcement, and dedicated SLA support.

Is Onlook open source?

Yes — Onlook is open source.

Is Onlook still maintained?

Yes — Onlook is active. Its listing was last verified on September 6, 2026.

What are the best Onlook alternatives?

The first editor-selected Onlook alternatives are Cursor, Coolify, screenshot-to-code.

How does Onlook score in our review?

The published editorial review lists Onlook at 80/100 overall across speed, privacy, and developer experience. Check the review's evidence status and test metadata for its verification level.