Cette page est affichée en anglais. Une traduction française est en cours.
ScriptsApr 9, 2026·3 min de lecture

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 Open Source
AI Open Source · Community
Introduction

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 et remerciements

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

Connectez-vous pour rejoindre la discussion.
Aucun commentaire pour l'instant. Soyez le premier à partager votre avis.

Actifs similaires

Mathesar — Open-Source Database Interface for PostgreSQL

Mathesar is a self-hosted web application that provides a spreadsheet-like interface for PostgreSQL databases, letting non-technical users browse, query, and manage data without writing SQL.

AI Open Source

Livebook — Interactive Notebooks for Elixir

Livebook is an open-source web application for writing interactive and collaborative code notebooks in Elixir, featuring real-time collaboration, smart cells for databases and charts, and seamless integration with the BEAM ecosystem.

AI Open Source

Nango — Open-Source Platform for Product API Integrations

Nango is an open-source unified API platform that handles OAuth flows, token refresh, rate limiting, and data syncing for 250+ third-party APIs so developers can ship product integrations faster.

AI Open Source
◈Accueil🔍Rechercher👤Moi