Onlook
Open SourceOpen-source visual code editor for designing and editing live React and TailwindCSS applications with AI on an infinite canvas.
工具信息
什么是 Onlook？
Onlook is an open-source visual code editor that enables designers and product managers to visually craft, edit, and ship web experiences directly in real React codebases, with AI assistance and code as the source of truth. It supports live React component editing on an infinite canvas, TailwindCSS, Storybook design systems, and collaborative work inside actual code rather than disconnected mockups. Official pages indicate the product is optimized for larger screens.
核心功能
Visual Editor for React & TailwindCSS
Build and edit React applications visually while Onlook writes reliable code exactly where it needs to go.
AI-Powered Visual Builder
Design with AI on an infinite canvas, including chat-driven code edits that update live components and styles.
Live React Component Editing
Edit live React components on an infinite canvas within real codebases, with design tool features that map 1:1 to code.
Storybook Design System Support
Work with your team's real Storybook design system while editing in the visual canvas.
Component Library
Access and manage reusable components as part of the visual React builder workflow.
Theming & Branding
Apply and manage theming and branding controls that sync with the underlying code.
Layer Management
Inspect and organize layers in a live design preview that reflects the real UI structure.
Version History
Track changes over time within the visual editing environment.
React Templates
Start from React templates to accelerate visual application building.
Open Source
Available as an open-source project with public GitHub presence and community adoption signals.
使用场景
- #1
Visual React app design and development
Design and build React and TailwindCSS applications visually while generating trustworthy production code.
- #2
Team collaboration in real codebases
Allow teams to design together directly inside their real codebase rather than disconnected mockups.
- #3
AI-assisted UI fixes and iteration
Use AI chat beside the canvas to diagnose and update responsive layout, components, and styles in live code.
- #4
Prototyping with design-system fidelity
Create and refine prototypes using real React components and Storybook-aligned design systems.
定价方案
Official pages describe Onlook as open-source and promote GitHub, sign-up, waitlist, and book-a-demo flows. No paid plan tiers or commercial pricing details are stated on the provided official snapshots.
替代工具
常见问题
What is Onlook?
Is Onlook open source?
Who is Onlook designed for?
What technologies does Onlook work with?
Does Onlook include AI features?
Can teams collaborate in Onlook?
Is Onlook optimized for all devices?
Onlook 联系方式与社交媒体
- 支持邮箱
- 支持
- 网站：
- Twitter
- YouTube
- LinkedIn
- GitHub