Onlook

Onlook provides a visual editor that works directly on a React codebase, allowing designers and product managers to modify UI components while seeing the corresponding source code side‑by‑side. The tool presents an infinite canvas where users can drag, drop, and edit elements such as navigation bars, cards, and image grids, with changes reflected instantly in the underlying JSX and CSS. It also includes native design‑tool features like layer management, asset browsing, and real‑time collaboration within the same project files.

The editor is targeted at teams that need to bridge design and development workflows without leaving the code, especially those building web experiences with React. By exposing the actual code while offering a visual interface, it lets non‑technical contributors contribute UI updates and lets developers see design intent without manual translation.

Onlook runs on macOS and is released as a stable, open‑source project. Its distinctive approach is the tight 1:1 mapping between visual edits and the real code, enabling a seamless, collaborative design process that stays synchronized with the live codebase.