ScriptsApr 9, 2026·3 min read

Onlook — Visual AI Code Editor for React Apps

Open-source Figma-like visual editor for building React and Next.js apps with AI. Edit visually and code syncs in real-time. Design branching, team collab, deploy. Apache-2.0, 25,000+ stars.

AI
AI Open Source · Community
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

  1. Visit onlook.com to get started

  2. Or run locally:

git clone https://github.com/onlook-dev/onlook.git
cd onlook
# Follow setup at docs.onlook.com/developers/running-locally
  1. Open your Next.js + TailwindCSS project and start editing visually.
Intro

Onlook is an open-source visual-first code editor for React apps with 25,000+ GitHub stars — often called "the Cursor for Designers." It provides a Figma-like interface for editing Next.js and TailwindCSS projects, with AI-powered app generation from text or images. Visual changes sync to code in real-time. Features design branching, team collaboration, deployment with shareable links, and brand asset management. Best for designers and front-end developers who want to build and style React apps visually while maintaining clean code output.

Explore more AI development tools on TokRepo AI Open Source.

Onlook — The Cursor for Designers

What Makes Onlook Different

Unlike traditional code editors, Onlook lets you edit your React app visually — like Figma — while the code updates automatically in real-time. Unlike design-to-code tools, the output is your actual codebase, not generated components.

Key Features

Feature Description
AI App Generation Describe or upload an image → get a working app
Visual DOM Editing Click, drag, and style components visually
Real-Time Code Sync Visual changes instantly update source code
Design Branching Experiment with variations without affecting main
Team Collaboration Real-time editing with team members
One-Click Deploy Deploy and share with a link
Brand Management Manage design tokens and brand assets
Checkpoints Version history with restore capability

Supported Stack

  • Framework: Next.js
  • Styling: TailwindCSS
  • Components: Automatic detection and editing
  • Output: Clean, production-ready code

Workflow

  1. Open your Next.js project in Onlook
  2. Edit visually — select elements, change styles, move components
  3. Generate new components with AI from text descriptions or images
  4. Branch designs to experiment safely
  5. Review code changes in real-time
  6. Deploy with one click and share the link

FAQ

Q: What is Onlook? A: An open-source visual code editor that lets you build and style React/Next.js apps with a Figma-like interface while code syncs in real-time. Often called "the Cursor for Designers."

Q: Is Onlook free? A: Yes, Onlook is open-source under Apache-2.0.

Q: What frameworks does Onlook support? A: Currently Next.js with TailwindCSS. Visual edits produce clean, standard React code.

🙏

Source & Thanks

Created by Onlook Dev. Licensed under Apache-2.0.

Onlook — ⭐ 25,000+

Thanks to the Onlook team for bridging the gap between design and code.

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets

Latitude — AI Agent Engineering Platform

Open-source platform for building, evaluating, and monitoring AI agents in production. Observability, prompt playground, LLM-as-judge evals, experiment comparison. LGPL-3.0, 4,000+ stars.

AI Open Source

Plane — Open-Source AI Project Management

Open-source Jira/Linear alternative with AI-powered pages. Issues, sprints, modules, roadmaps, and real-time analytics. Self-hostable via Docker. AGPL-3.0, 47,500+ stars.

AI Open Source

Twenty — Open-Source AI CRM (Salesforce Alternative)

Modern open-source CRM with AI features. Custom objects, kanban views, email sync, workflow automation. NestJS + React + PostgreSQL. AGPL-3.0, 43,700+ stars.

AI Open Source
◈Home🔍Search👤Me