Onlook is an AI-powered visual editor for design. It connects to your existing codebase and lets designers and developers create interfaces using real components. Unlike generic AI code generators, Onlook constrains AI to your design system. Changes become pull requests engineers can merge directly — no export, no translation, no throwaway prototypes.

Onlook is for product teams with designers and an existing component library. Ideal users include design engineers, product designers working in code-forward teams, frontend developers who want visual tooling, and teams maintaining design systems who want AI that respects their existing work.

Traditional design tools create static mockups that must be rebuilt in code. Onlook works with your real components — what you design IS the code. There's no handoff because designers and developers work in the same artifact. Changes become PRs, not specs. AI is constrained to your design system, so there's no brand drift.

AI code generators create new code from scratch using generic HTML/CSS. The output needs to be translated to work with your real components. Onlook is different — it connects to your existing component library and constrains AI to YOUR design system. Outputs are consistent, on-brand, and directly mergeable. No translation step needed.

Onlook offers: (1) An infinite canvas for visual design with real code running underneath, (2) AI that's constrained to your design system — no brand drift, (3) Real-time team collaboration with spatial comments, (4) Direct GitHub integration — changes become mergeable PRs, (5) Support for your existing components, colors, and design tokens, (6) A visual interface that requires no coding for designers.

Onlook's AI is constrained to your design system. When you ask AI to make changes, it can only use components, colors, and tokens that exist in your codebase. This prevents brand drift and ensures outputs match your design system. You can point at elements visually rather than describing them in text — the AI understands the exact selector, component, and styles.

Yes. Onlook has built-in team collaboration. Share your canvas, leave spatial comments, and work together in real-time. Multiple team members can view and edit the same project simultaneously. Changes sync to code and can be submitted as PRs.

Changes you make in Onlook become real code changes in your repository. When you're ready, submit them as a pull request for engineers to review and merge. No export, no copy-paste, no translation. The code is production-ready because it uses your actual components.

Onlook works with React, Next.js, Vue, Angular, Svelte, Preact, SolidJS, Qwik, and Web Components. If your framework works with modern component-based architecture, it likely works with Onlook.

Onlook supports all major CSS approaches: Tailwind CSS, CSS Modules, styled-components, Emotion, SASS/SCSS, Less, Vanilla Extract, Stitches, and plain CSS. Whatever styling approach your codebase uses, Onlook works with it.

Onlook works with all major component libraries including shadcn/ui, Material UI, Mantine, Chakra UI, Radix UI, Ant Design, Headless UI, Blueprint, Fluent UI, and PrimeReact. If your components work in your codebase, they work in Onlook.

Yes. Onlook connects to your codebase and lets you design with your real components — the buttons, cards, and layouts your engineers already built. AI suggestions use your actual component API, not generic alternatives.

Onlook connects directly to your GitHub repository. Changes you make are tracked as real code changes. When you're ready to ship, Onlook creates a pull request with your changes that engineers can review, comment on, and merge using their normal workflow.

Designers and developers work in the same artifact — there's no handoff. Designers make visual changes on the canvas, which become real code changes. Developers can review and refine in their IDE. Changes are submitted as PRs for team review. Spatial comments let team members communicate directly on the canvas.

Yes. Onlook fits into your existing Git workflow. Changes become branches and PRs. Engineers review code in their normal tools. CI/CD pipelines work as expected.

Onlook complements AI coding tools like Claude Code. Claude Code is great for building in the terminal — Onlook adds the visual layer designers need. Use Claude Code to scaffold components, then use Onlook to visually iterate and refine. Changes from both tools merge into the same codebase.

Yes. Since Onlook works with real code, you can share your work directly as you created it on the canvas. Stakeholders see real, working UI — not static mockups that might not match the final product.

Both the founders come from either side of the design and development divide. We realized that AI could be the final leap to solve the problem of designers and developers working together. Onlook is a continuous iteration towards the new state-of-the-art for collaboration in code.

Developers have historically been second-rate citizens in the design process. Onlook was founded to bridge the divide between design and development, and we wanted to make developers first-class citizens alongside designers. We chose to be open-source to give developers transparency into how we are building Onlook and how the work created through Onlook will complement the work of developers.

Onlook was founded in Cincinnati, Ohio, USA, and started as a remote-first company between Cincinnati and New York City. After the YC Winter 2025 batch, Onlook opened a barracks in San Francisco. Our open-source contributors are scattered across the world, bringing their unique perspectives and incredible talent to the project as we continue to push the limits of design and development.