onlook README

The project's README from github.com/onlook-dev/onlook. As one markdown file: README.md.

header image

Onlook

The design tool for AI-native designers — now in early access.
Onlook makes designing on top of your codebase effortless. Craft exceptional experiences with AI in code.

→ Join the waitlist

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


View Demo · Report Bug · Request Feature

Discord LinkedIn Twitter

中文 | Español | Deutsch | français | Português | Русский | 日本語 | 한국어

This is the open-source visual editor that started Onlook (Next.js + Tailwind). The hosted product we're building next, for AI-native designers, is in early access via the waitlist above.

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.

What you can do with Onlook:

Onlook-GitHub-Example

Getting Started

Use our hosted app or run locally.

Usage

Onlook will run on any Next.js + TailwindCSS project, import your project into Onlook or start from scratch within the editor.

Use the AI 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.

image

Draw-in new divs and re-arrange them within their parent containers by dragging-and-dropping.

image

Preview the code side-by-side with your site design.

image

Use Onlook's editor toolbar to adjust Tailwind styles, directly manipulate objects, and experiment with layouts.

image

Documentation

For full documentation, visit docs.onlook.com

To see how to Contribute, visit Contributing to Onlook in our docs.

How it works

architecture
  1. When you create an app, we load the code into a web container
  2. The container runs and serves the code
  3. Our editor receives the preview link and displays it in an iFrame
  4. Our editor reads and indexes the code from the container
  5. We instrument the code in order to map elements to their place in code
  6. When the element is edited, we edit the element in our iFrame, then in code
  7. 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 focused on making it work well with Next.js and TailwindCSS for now.

For a full walkthrough, check out our Architecture Docs.

Our Tech Stack

Front-end

Database

AI

Sandbox and hosting

Runtime

Contributing

image

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.

Contributors

Contact

image

License

Distributed under the Apache 2.0 License. See LICENSE.md for more information.

onlook (onlook-dev/onlook)

Searching Database…

26.9K ·GitHub
Onlook
这是什么？Onlook 是一款开源、以 AI 为核心的可视化编辑器，用于在你现有的 Next.js + Tailwind 代码库之上进行设计。你可以像使用设计工具一样直接在浏览器 DOM 中编辑元素，所做的修改会实时对应回真实代码。
这更像 Figma 还是更像代码编辑器？两者兼有：它是类似 Figma 的可视化界面（图层、元素、拖放），建立在真实的代码编辑器和实时预览之上，定位为 Bolt.new、Lovable、V0、Replit Agent、Figma Make 和 Webflow 的开源替代品。
我该如何开始用 Onlook 做东西？可以使用托管版应用，或在本地运行后导入现有的 Next.js 项目（也可以从零开始、从文字、图片或预制模板开始）。完整的安装说明请见 docs.onlook.com。
Onlook 支持任何前端技术栈吗？目前它是专门为 Next.js 和 TailwindCSS 项目打造的；对其他框架以及非 Tailwind 样式方案的支持暂时还不可用。
还有哪些功能缺失或正在开发中？团队协作（评论、超出实时光标之外的实时共同编辑）、拖放式组件面板、项目中的 MCP 设置，以及对非 Next.js/非 Tailwind 项目的支持，目前都仍未完成。
我可以自行部署，而不使用托管版应用吗？可以，开源编辑器可以在本地运行（自带 Dockerfile 和 docker-compose 配置）；托管产品则是另一种服务，目前处于通过候补名单开放的抢先体验阶段。
这个许可证宽松吗？它采用 Apache 2.0 许可证，这是一种宽松的开源许可证，没有特别的限制条款。
在画布上编辑一个元素，究竟是如何改动我的源代码的？Onlook 会将你的项目加载到一个 Web 容器中，并对正在运行的代码进行插桩，把每个 DOM 元素映射回它在源码中的位置。当你以可视化方式编辑元素时，它会先在实时 iFrame 中更新，然后再把修改写回实际的代码文件。
Onlook 背后的技术栈包括哪些？前端使用 Next.js 和 TailwindCSS，服务端接口使用 tRPC，身份验证与数据库使用 Supabase 和 Drizzle，大模型访问使用 AI SDK 搭配 OpenRouter，快速应用修改使用 Morph 和 Relace，运行时与沙箱隔离使用 Bun 和 Docker。
我在 Onlook 中构建的应用可以部署吗？可以，你能在几秒钟内部署项目、生成可分享的链接，并直接在编辑器中绑定自定义域名。
AI 聊天能自行修改代码吗？可以，AI 聊天可以直接访问代码，并具备理解和编辑项目代码的工具，你还可以一次排队发送多条聊天消息。
What are similar projects?Core-Framework, vibe-vibe, openpencil, ux-ui-agent-skills, tweakcn, design-extract, open-pencil-cloud, heroui
Which topics is it in?vibecoding, design-to-code, design-tool, supabase, figma, drizzle-orm, vibe-coding, openrouter, ide, design-system, bun, tailwindcss
Creator
onlook-dev
Size
81.1 MB
Stars
26.9K
Updated
CommitJul 22Releasev0.2.32Jul 17
Age
2y
Commits · 90 Days