onlook-dev/onlook

The Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI

What it solves

Onlook addresses the friction between visual design and frontend development. It allows designers and developers to edit a live website's UI visually in the browser while automatically syncing those changes back to the underlying Next.js and TailwindCSS code, eliminating the need to manually translate Figma designs into code.

How it works

Onlook loads a project's code into a web container that serves the app in an iFrame. The editor indexes the code and instruments it to create a direct map between DOM elements in the browser and their specific locations in the source code. When a user makes a visual change in the editor, Onlook updates the element in the iFrame and simultaneously modifies the corresponding code. It also integrates an AI chat with code access to generate or edit components via text or image prompts.

Who it’s for

It is designed for AI-native designers and frontend developers working with Next.js and TailwindCSS who want to prototype and build user interfaces visually without leaving their codebase.

Highlights

  • Visual-to-Code Sync: Edit elements directly in the browser DOM with changes reflected in real-time in the code.
  • AI-Driven Creation: Generate Next.js apps and components starting from text or image prompts.
  • Figma-like Interface: Includes a visual editor with layer browsing, brand asset management, and a components panel.
  • Developer Tooling: Features a side-by-side code editor, CLI command execution, and checkpoint saving/restoring.
  • Rapid Deployment: Ability to generate shareable links and connect custom domains quickly.

Related

  • Project
    frontman-ai/frontman

    An open-source AI coding agent that lets users edit frontend source code directly from the browser by clicking elements and describing changes in plain English.

  • Project
    0xnyn/airship

    A visual editor for your codebase that lets you to select UI elements in a live browser preview and use AI agents to edit the source code directly.

  • Project
    writer/writer-framework

    An open-source framework for building AI applications that combines a visual drag-and-drop UI editor with a Python-based backend.

  • Project
    primocms/primo

    A developer-focused CMS that synchronizes a visual browser editor for clients with a local-file workflow for developers, enabling AI agents to edit sites directly.

  • Project
    nexu-io/open-design

    An open-source, local-first design platform that enables coding agents to generate and render web prototypes, decks, and motion graphics based on a brand's design system.