Cursor for Designers

Onlook is where teams design together — directly in their real codebase

Villainterest - Product Notes

• Implement evil pin creation (mwahaha)
• Add 'light mode' (begrudgingly)
• Build villain-to-villain messaging (evil DMs)
• Create villain collaboration boards
• Add villain lair location sharing (evil meetups)
• Create devious recommendation page

Design with AI on an infinite canvas

Craft, preview, and iterate with AI to ship better websites and prototypes faster than ever.

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•Code•Design Side-by-side-by-side

Direct editing

Drag-and-drop, rearrange, scale, and more with elements directly in the editor.

Villainterest - Product Notes

Supported by you & 26,717 other builders

Join the open source movement to bring design and code together

Frequently asked questions

Is there a free version of Onlook? Yes, Onlook can be self-hosted for free on GitHub. For the hosted cloud version, please contact our team or book a demo. We are working closely with teams to set up the best internal design and code workflow, and are happy to help you get started.

What kinds of things can I design with Onlook? You can prototype, ideate, and create websites from scratch with Onlook

Why would I use Onlook? When you design in Onlook you design in the real product – in other words, the source of truth. Other editors are great for ideating, but Onlook is the only one that lets you design with code using your existing design system instantly.

Who owns the code that I write with Onlook? The code you make with Onlook is all yours. You can export it on your local machine, publish it to GitHub, or host it at a link

What is the difference between Onlook and other design tools? Onlook is a visual editor for code. It allows you to create and style your own creations with code as the source of truth. While it is best suited for creating web experiences, it can be used for anything visual – presentations, mockups, and more. Because Onlook uses code as the source of truth, the types of designs you can create are unconstrained by Onlook's interface.

Why is Onlook open-source? 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 Onlook to give developers transparency over the tool, and make it as flexible as possible for the unique ways teams set up their code.