Onlook

Name: Onlook
Author: onlook-dev

The Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit you

by onlook-dev

Rating

0.0

Votes

score

Downloads

total

Price

Free

Access token required

Works With

Claude CodeCursorWindsurfVS CodeDeveloper tool

About

Onlook

Cursor for Designers

Explore the docs »

👨‍💻👩‍💻👨‍💻 We're hiring engineers in SF! 👩‍💻👨‍💻👩‍💻

View Demo · Report Bug · Request Feature

[![Discord][discord-shield]][discord-url] [![LinkedIn][linkedin-shield]][linkedin-url] [![Twitter][twitter-shield]][twitter-url]

An Open-Source, Visual-First Code Editor

Craft websites, prototypes, and designs with AI in Next.js + TailwindCSS. Make edits directly in the browser DOM with a visual editor. Design in realtime with code. An open-source alternative to Bolt.new, Lovable, V0, Replit Agent, Figma Make, Webflow, etc.

🚧 🚧 🚧 Onlook is still under development 🚧 🚧 🚧

We're actively looking for contributors to help make Onlook for Web an incredible prompt-to-build experience. Check the open issues for a full list of proposed features (and known issues), and join our Discord to collaborate with hundreds of other builders.

What you can do with Onlook:

[x] Create Next.js app in seconds
[x] Start from text or image
[x] Use prebuilt templates
[ ] Import from Figma
[ ] Import from GitHub repo
[ ] Make a PR to a GitHub repo
[x] Visually edit your app
[x] Use Figma-like UI
[x] Preview your app in real-time
[x] Manage brand assets and tokens
[x] Create and navigate to Pages
[x] Browse layers
[x] Manage project Images
[x] Detect and use Components – _Previously in

Onlook Desktop_

[ ] Drag-and-drop Components Panel
[x] Use Branching to experiment with designs
[x] Development Tools
[x] Real-time code editor
[x] Save and restore from checkpoints
[x] Run commands via CLI
[x] Connect with app marketplace
[x] Deploy your app in seconds
[x] Generate sharable links
[x] Link your custom domain
[ ] Collaborate with your team
[x] Real-time editing
[ ] Leave comments
[ ] Advanced AI capabilities
[x] Queue multiple messages at once
[ ] Use Images as references and as assets in a project
[ ] Setup and use MCPs in projects
[ ] Allow Onlook to use itself as a toolcall for branch creation and iteration
[ ] Advanced project support
[ ] Support non-NextJS projects
[ ] Support non-Tailwind projects

Getting Started

Don't lose this

Three weeks from now, you'll want Onlook again. Will you remember where to find it?

Save it to your library and the next time you need Onlook, it’s one tap away — from any AI app you use. Group it into a bench with the rest of the team for that kind of task and you can pull the whole stack at once.

⚡ Pro tip for geeks: add a-gnt 🤵🏻‍♂️ as a custom connector in Claude or a custom GPT in ChatGPT — one click and your library is right there in the chat. Or, if you’re in an editor, install the a-gnt MCP server and say “use my [bench name]” in Claude Code, Cursor, VS Code, or Windsurf.

🤵🏻‍♂️

a-gnt's Take

Our honest review

This plugs directly into your AI and gives it new abilities it didn't have before. The Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit you. Once connected, just ask your AI to use it. It's completely free and works across most major AI apps. This one just landed in the catalog — worth trying while it's fresh.

Tips for getting started

Tap "Get" above, pick your AI app, and follow the steps. Most installs take under 30 seconds.

Your data stays between you and your AI — nothing is shared with us or anyone else.

Data & Databases