Onlook is a free, open-source visual editor that lets designers and developers design directly inside a real React codebase, where the canvas is the running app itself rather than a picture of it.
In most design workflows, a mockup is drawn in one tool and then rebuilt by hand in code, and the two drift apart over time. Onlook removes that handoff: every frame on its infinite canvas is a working page, and styling or rearranging it edits the underlying code, which stays the single source of truth. Designers can spin up variations of an idea side by side and merge the directions that work, shape tokens, components, and styles visually, and build with the team’s existing design system, including real components from a Storybook setup. AI agents help generate and modify the interface, and inspiration such as screenshots and moodboards can be dropped next to the live work to steer them.
Because the design surface is the product itself, there is no separate prototype to maintain: spacing, tokens, and component states behave exactly as they will in production, and changes can be reviewed as ordinary code diffs inside the team’s normal process.
Onlook is free. The editor is open source and can be self-hosted at no cost, while a hosted cloud version is offered for teams that want a managed setup, arranged through the Onlook team.
Onlook is aimed at visual engineers, designers who work in code, and React product teams that are tired of rebuilding mockups and want design work that ships as real, reviewable code. It also suits solo builders who design and develop their own products.