Integrate with any website or web app running on Next.js + TailwindCSS, and make live edits directly in the browser DOM. Customize your design, control your codebase, and push your changes without compromise.
Open-source alternative to Figma Make, Bolt.new, Lovable, V0, etc.
- Create Next.js app in seconds
- Start from text or image
- Use prebuilt templates
- Import from Figma
- Start from GitHub repo
- Visually edit your app
- Use Figma-like UI
- Preview your app in real-time
- Manage brand assets and tokens
- Development Tools
- Real-time code editor
- Save and restore from checkpoints
- Run commands via CLI
- Connect with app marketplace
- Deploy your app in seconds
- Generate sharable links
- Link your custom domain
- Collaborate with your team
- Real-time editing
- Leave comments
Also check the open issues for a full list of proposed features (and known issues).
We're in early preview for Onlook Web. If you're looking for the electron app, it's moved to Onlook Desktop.
For the full reasoning and architecture details, see Migrating from Electron to Web
Available soon with a hosted app or run locally.
Onlook will run on any Next.js + TailwindCSS project, import your project through V0, Figma, etc. into Onlook
Use the chat to create or edit a project you're working on. At any time, you can always right-click an element to open up the exact location of the element in code. Just be sure to choose your preferred IDE in the upper-right corner of the screen.
For full documentation, visit docs.onlook.com
To see how to Contribute, visit Getting Started
- When you create an app, we load the code into a web container
- The container runs and serves the code
- Our editor receives the preview link and displays it in an iFrame
- Our editor reads and indexes the code from the container
- We instrument the code in order to map elements to their place in code
- When the element is edited, we edit the element in our iFrame, then in code
- Our AI chat also has code access and tools to understand and edit the code
This architecture can theoretically scale to any language or framework that displays DOM elements declaratively (e.g. jsx/tsx/html). We are currently focused on making it work well with Next.js and TailwindCSS.
For a full walkthrough, check out our Architecture Docs
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also open issues.
See the CONTRIBUTING.md for instructions and code of conduct.
- Team: Discord - Twitter - LinkedIn - Email
- Project: https://github.com/onlook-dev/onlook
- Website: https://onlook.com
Distributed under the Apache 2.0 License. See LICENSE.md for more information.