Design-to-Code

Onlook

An open-source visual editor for React and Tailwind apps that lets designers make direct visual edits to a running codebase, synced back to real code.

Pricing

Open source, free (hosted plans available)

Visit site ↗

Onlook works the opposite direction from most design-to-code tools: it opens an existing React and Tailwind app in a visual, Figma-like canvas so designers can edit a real running product directly, with changes written back into the actual source code.

Why it stands out

Edits real code, writing changes directly into the app’s React/Tailwind source instead of generating a separate design artifact.
Open source, so teams can self-host and inspect exactly how visual edits map to code changes.
Designer-friendly canvas on top of a genuine, running development environment rather than a static mockup.

Good for

Teams that want designers making pixel-level tweaks directly on the live product, without filing a ticket for every spacing change.