Onlook Features: Design with Your Real Components
Onlook is a visual design canvas that connects to your existing codebase. Design with your real components on an infinite canvas. AI is constrained to your design system — no brand drift, no throwaway code. Changes become mergeable pull requests.
Key Features
- Your Real Components — design with the buttons, cards, and layouts your engineers built
- AI constrained to your design system — uses your colors, fonts, and tokens
- Built for Teams — real-time collaboration with spatial comments
- Ship PRs, Not Prototypes — changes become mergeable pull requests
- Canvas manipulation — drag, resize, arrange elements visually
- Layer management — navigate your React component tree visually
- Version history — roll back to any previous version
- Works with your codebase — connect existing React or Next.js projects
- Direct GitHub integration — push changes directly to your repository
Features
Design with Your Real Components
Connect your codebase. Design on the canvas. Ship PRs.
Villainterest - Product Notes
Minimalist Interior with Dramatic Lighting
Black Leather Bar Stool with Brass Accents
Spikey Ceramic Iron Metal Sculpture
Black Bar Stool Silhouette Design
Ceramic Brutalist Objects with Spikes
Brutalist Dark Glass Vase Sculpture
Golden Muted Interior with Sharp Lines
Contemporary Brutalist Interior Design
Minimalist Zig-Zag Chair Design
Minimalist Metallic Sheer Design
Lounge Chair Against Clean Wall
Metallic Chair with Brutalist Design
Living Room with Metal Furniture Design
.jpg)
Metallic Brushed Metal Chair Design
Black Leather Furniture Design
Minimalist Interior with Dramatic Lighting
Black Leather Bar Stool with Brass Accents
Black Bar Stool Silhouette Design
Ceramic Brutalist Objects with Spikes
Brutalist Dark Glass Vase Sculpture
Golden Muted Interior with Sharp Lines
Contemporary Brutalist Interior Design
Minimalist Zig-Zag Chair Design
Minimalist Metallic Sheer Design
Lounge Chair Against Clean Wall
Spikey Ceramic Iron Metal Sculpture
Metallic Chair with Brutalist Design
Living Room with Metal Furniture Design
Metallic Brushed Metal Chair Design
Layers
Brand
Pages
Assets
Elements
Apps
Villainterest - Product Notes
Minimalist Interior with Dramatic Lighting
Black Leather Bar Stool with Brass Accents
Spikey Ceramic Iron Metal Sculpture
Black Bar Stool Silhouette Design
Ceramic Brutalist Objects with Spikes
Brutalist Dark Glass Vase Sculpture
Golden Muted Interior with Sharp Lines
Contemporary Brutalist Interior Design
Minimalist Zig-Zag Chair Design
Minimalist Metallic Sheer Design
Lounge Chair Against Clean Wall
Metallic Chair with Brutalist Design
Living Room with Metal Furniture Design
Metallic Brushed Metal Chair Design
Black Leather Furniture Design
Minimalist Interior with Dramatic Lighting
Black Leather Bar Stool with Brass Accents
Black Bar Stool Silhouette Design
Ceramic Brutalist Objects with Spikes
Brutalist Dark Glass Vase Sculpture
Golden Muted Interior with Sharp Lines
Contemporary Brutalist Interior Design
Minimalist Zig-Zag Chair Design
Minimalist Metallic Sheer Design
Lounge Chair Against Clean Wall
Spikey Ceramic Iron Metal Sculpture
Metallic Chair with Brutalist Design
Living Room with Metal Furniture Design
Metallic Brushed Metal Chair Design
Layers
Brand
Pages
Assets
Elements
Apps
Design with AI on an infinite canvas
Craft, preview, and iterate with AI to ship better websites and prototypes faster than ever.
Villainterest - Product Notes
Minimalist Interior with Dramatic Lighting
Black Leather Bar Stool with Brass Accents
Spikey Ceramic Iron Metal Sculpture
Black Bar Stool Silhouette Design
Ceramic Brutalist Objects with Spikes
Brutalist Dark Glass Vase Sculpture
Golden Muted Interior with Sharp Lines
Contemporary Brutalist Interior Design
Minimalist Zig-Zag Chair Design
Minimalist Metallic Sheer Design
Lounge Chair Against Clean Wall
Metallic Chair with Brutalist Design
Living Room with Metal Furniture Design
Metallic Brushed Metal Chair Design
Black Leather Furniture Design
Minimalist Interior with Dramatic Lighting
Black Leather Bar Stool with Brass Accents
Black Bar Stool Silhouette Design
Ceramic Brutalist Objects with Spikes
Brutalist Dark Glass Vase Sculpture
Golden Muted Interior with Sharp Lines
Contemporary Brutalist Interior Design
Minimalist Zig-Zag Chair Design
Minimalist Metallic Sheer Design
Lounge Chair Against Clean Wall
Spikey Ceramic Iron Metal Sculpture
Metallic Chair with Brutalist Design
Living Room with Metal Furniture Design
Metallic Brushed Metal Chair Design
Layers
Brand
Pages
Assets
Elements
Apps
Native design tool features that work 1:1 with code.
A true developer tool for designers, helping you code without knowing anything about code.
AI That Understands Context
AI Constrained to Your Design System
Reference images, designs, and docs in chat. AI sees what you see — no more explaining from scratch. Outputs use your real components, colors, and tokens. No drift. No off-brand results.
Canvas Manipulation
Design on an Infinite Canvas
Drag, resize, and arrange elements directly on the canvas. See changes in real code instantly — no switching between tools. Point at what you want. AI knows exactly what you mean.
Design System Guardrails
Your Colors, Fonts, and Tokens
AI is constrained to your design system. Pick from your brand colors, use your typography scales, and style with your existing tokens. No drift. No off-brand outputs.
Native Design Tool Features
Familiar to Designers. Trusted by Engineers.
A canvas that feels intuitive, with real code underneath. Engineers can merge what you create directly — no handoff, no rebuilding.
Your Real Components
Design with what engineers built
Use the buttons, cards, and layouts your team already created. Not generic HTML — your actual design system, ready to drag onto the canvas.
Built for Teams
Real-time collaboration
Share your canvas. Leave spatial comments. Work together on designs that become real PRs. No more "now how do I share this?"
Ship PRs, Not Prototypes
Changes become pull requests
Your changes become a real pull request. Engineers review and merge — no handoff, no translation, no rebuilding from specs.
Layer Management
Navigate your component tree
See your React component hierarchy in a visual layer panel. Click any layer to select it on the canvas. No more hunting through JSX.
Works With Your Codebase
Connect existing projects
Connect your existing React or Next.js project. No rebuilding. No migration. Start designing in minutes.
Version History
Never lose your progress
Onlook automatically saves project snapshots. Experiment with confidence — roll back to any previous version with one click.
Frequently
asked questions
Onlook is a visual design canvas that connects to your existing codebase. Designers drag real components onto an infinite canvas, make changes visually, and submit pull requests — no coding required.
Traditional design tools create static mockups that must be rebuilt in code. Onlook works with your real components — what you design IS the code. Changes become PRs, not handoff specs.
AI generators create new code from scratch. Onlook constrains AI to YOUR existing components, so outputs match your design system. No translation, no drift.
No. Designers use a visual canvas with familiar tools. Real code runs underneath — you don't need to touch it unless you want to.
Yes. Share your canvas, leave spatial comments, and work together in real-time. Changes sync to code and can be submitted as PRs for engineers to review.
React, Next.js, and any CSS approach (Tailwind, CSS modules, styled-components). Works with any component library.