Onlook

Visual code editor for designers — edit production code visually.

DesignAICodingProductivityDeveloper ToolsFreemium

Onlook is a visual code editor for designers and product managers — think Cursor, but for design. It lets you craft, edit, and ship web experiences visually while writing real code underneath. Edit your production React components directly, see changes in real-time, and push to production without context switching.

onlook.com

公式サイトへ

onlook.com

主な機能

Visual React Editor
Click on any React component in your production app and edit it visually — styles, content, and layout changes are reflected instantly.
AI Design to Code
Describe what you want in natural language and Onlook generates the corresponding UI code, automatically integrated into your existing component structure.
Live Edit
Make changes directly on your live web app — edit text, colors, spacing, and layout without opening a code editor or digging through files.
Real-time Preview
See every change immediately as you make it. No more switching between editor and browser to check your work.
Responsive Design
Adjust designs for every screen size with visual breakpoint controls. Ensure pixel-perfect layouts across desktop, tablet, and mobile.
Ship to Production
Push visual edits to production without writing code or creating pull requests. Onlook commits the real code changes behind the scenes.