What it is
onlook is an open-source visual code editor from the Onlook team (GitHub organization onlook-dev) for building Next.js plus Tailwind CSS sites, prototypes and designs. Start from text, an image or a template, then use AI chat to create and edit the project, or drag elements and adjust styles right on the page. What sets it apart is that every element maps to its exact spot in the code: right-click to jump there, and edits on the canvas change the code too. The README says the team's next hosted product is in early access through a waitlist.
Highlights:
- A Figma-like interface with layers, brand assets and tokens
- branches for trying designs and checkpoints you can restore
- one-click deploys, share links and custom domains
- the README still marks a drag-and-drop components panel and comments as unfinished.
How to use:
- First open the hosted app at onlook.com, or run it locally following docs.onlook.com.
- Then import a Next.js plus Tailwind CSS project or start a new one.
- Finally edit the page with AI chat or the toolbar.
Who it's for:
Designers and developers building with Next.js and Tailwind CSS who want to edit code while seeing the page.
Before you start:
- It only supports Next.js plus Tailwind CSS projects for now.
- The README says your code is loaded into a web container to run, and the AI chat can read and edit your code; the stack uses CodeSandbox SDK for the dev sandbox and OpenRouter for models.
- Running locally needs keys for those services; see the official docs.
- See the official site for pricing.
- Apache 2.0 license.
Based on the project's public documentation. Not tested by AI Inspiration World.