Table of Contents

1. Introduction
2. What is Onlook?
3. Architecture Overview
4. Running Onlook Locally
5. Using Onlook on Your Own App
6. AI Code Edits
7. Why Onlook Matters
8. Onlook vs Cursor: What’s the Difference?
9. Final Thoughts

Introduction

Onlook is a powerful open-source visual editor that blends the best of design tools like Figma with code editors like VSCode or Cursor — but with a frontend-first twist. If you're looking for a Cursor alternative focused on visual editing, React components, Tailwind styles, and AI-powered code changes, Onlook may be exactly what you're looking for.

Unlike traditional AI-enhanced IDEs, Onlook lets you manipulate your UI visually — directly in your browser — with changes written back to your real codebase via ASTs, not runtime wrappers. And it does all this without vendor lock-in or proprietary formats.

What is Onlook?

Onlook is a visual editor that works directly on your codebase, enabling real-time design changes in a UI similar to Figma — but grounded in actual code. You can select components on the screen, tweak styles or props, and instantly see the results, with the option to write those changes directly back to your code files.

Unlike traditional no-code/low-code platforms or proprietary design tools, Onlook does not abstract away your code. Instead, it extends it with visual capabilities and developer-aware editing.

Key Features

• Visual editing directly tied to your code
• Framework-aware: supports Next.js (App Router) and React
• Non-intrusive: no runtime dependency or vendor lock-in
• Supports Tailwind, CSS Modules, and more
• AI-powered edits via MorphLLM and Anthropic Claude
• Full Git integration for tracking and diffs

Architecture Overview

At its core, Onlook is built as a monorepo with a modular structure. Here’s how it all breaks down:

Apps

• apps/web/client – The core Next.js frontend that renders your visual editing experience
• apps/web/template – Templates used to scaffold new Next.js projects
• apps/backend – Supabase-based backend for authentication, project storage, and change tracking

Packages

• packages/models – Shared type models for consistent state handling
• packages/ui – Design system with ShadCN + Tailwind components
• packages/schema – Drizzle-based ORM schemas
• packages/ai – Code abstraction for integrating LLMs

How Edits Work

Onlook operates like a browser (pointing to your local app), injecting temporary changes into the DOM using devtools-style overlays and styles. If you choose to persist a change, Onlook does the following:

1. Maps DOM elements to code using build-time attribute injection (like source maps).
2. Parses the original file into an Abstract Syntax Tree (AST).
3. Modifies the AST to reflect your changes (e.g., add props, alter styles).
4. Writes changes directly back to the source file.

This system is both framework-agnostic and vendor-neutral, meaning your code remains yours — no runtime dependencies or lock-in.

Running Onlook Locally

To explore Onlook on your own machine, here’s a full guide to local development.

Requirements

• Bun – Required for managing the monorepo
• Docker – Used to run the Supabase backend
• Node.js – Required for your own app (e.g., Next.js project)

🔄 Local Setup

1. Clone the repo:

git clone https://github.com/onlook-dev/onlook
cd onlook

1. Install dependencies:

bun install

1. Start backend (Supabase):

bun backend:start

1. Get API keys:
   • Codesandbox (for file previews): Generate from Codesandbox Dashboard
   • Anthropic Claude (for AI suggestions): Get a key from https://console.anthropic.com/settings/keys
   • MorphLLM or Relace (for applying AI edits): https://morphllm.com/dashboard
2. Configure environment:

bun run setup:env

1. Setup database:

bun db:push

1. Seed with sample data:

bun db:seed

1. Start the dev server:

bun dev

Visit http://localhost:3000 to launch the editor interface.

Using Onlook on Your Own App

You can also install Onlook into your personal or team Next.js app for direct use:

Step 1: Install the Plugin

npm install --save-dev @onlook/nextjs

Step 2: Update next.config.js

const path = require('path');
const nextConfig = {
  experimental: {
    swcPlugins: [['@onlook/nextjs', { projectRoot: path.resolve('.') }]],
  },
};
module.exports = nextConfig;

Step 3: Run via Onlook

npx onlook dev

You’ll now see a visual editing environment similar to Figma at /onlook.

AI Code Edits

One of Onlook’s most powerful features is its ability to apply visual or prop-level changes using AI — all grounded in your local code.

• Claude by Anthropic helps interpret visual requests ("make this card full-width").
• MorphLLM applies the correct JSX, classnames, or Tailwind styles directly into your codebase.
• You can review, undo, or commit these changes just like any code diff.

Why Onlook Matters

Onlook is not just another WYSIWYG editor. It’s:

• Developer-first – Designed to integrate with your real stack and tools
• Open source – No proprietary code formats or lock-in
• Composable – Easily extendable and inspectable (just read the code!)
• Collaborative – Potential for future multiplayer and action-based replay features

Onlook vs Cursor: What’s the Difference?

If you've used Cursor — the AI-powered IDE built on VSCode — you'll find that Onlook shares some of its ambitions, but with a radically different interface and target use case. Where Cursor excels as an all-purpose AI coding assistant inside a traditional text-based environment, Onlook flips the paradigm: it lets you visually edit React components and styles right in your browser, with real-time previews and changes synced directly to your source code.

Both tools use LLMs to boost developer productivity, but while Cursor is focused on text-based prompts and completions across any file type, Onlook is tailored for frontend work — JSX, Tailwind, layout tweaking, and design refinements. With Onlook, you don’t have to jump between Figma and your IDE just to move a button or adjust padding. You simply click the element, tweak it visually, and let Onlook handle the underlying code — all while retaining Git control and full developer transparency.

If you’re looking for a Cursor alternative for frontend design and UI development, Onlook is not just similar — it might be exactly what you need.

The table below summarises the Cursor vs Onlook Comparison

Final Thoughts

Onlook is pushing the boundary between design tools and real code — and doing it in a way that respects how developers actually work. It’s early, but immensely promising.

If you're tired of flipping between Figma, the browser, and your IDE just to move a button or align a heading, Onlook might just change how you build UI forever.

🧷 Useful Links

• 🔗 GitHub – onlook-dev/onlook
• 🧠 MorphLLM