Onlook
Open-source visual editor for React applications
Onlook is profiled here as a Coding Assistant tool for engineering teams. Read about features, pricing, and how it compares to related options in the tools directory.
Description
Onlook is an open-source design tool that lets developers and designers edit a React application visually while writing changes straight back to the code. Working on a live canvas, a user selects elements, adjusts styles, and rearranges layout, and Onlook updates the underlying React and Tailwind source so the design and the codebase stay in sync. AI assistance generates and edits components from natural language, which gives designers a way to ship UI without leaving the real project.
Key Capabilities:
A visual canvas that edits a running React app and writes back to source
Direct style editing that updates Tailwind classes in the codebase
AI generation of components and layouts from natural-language prompts
Two-way sync that keeps the design surface and the code consistent
Element inspection and drag-based layout on real components
Local-first operation against a developer's own project
Alternative tools
- Moonshot AI
Open-weight Kimi models tuned for agentic and coding tasks
- xAI Grok
Grok model family with real-time search through one API
- Bito
AI code review agent and in-editor coding assistant
- Sweep
AI autocomplete and coding agent built for JetBrains
- Letta
Build stateful agents with long-term memory
- Qwen
Alibaba's open-weight model family for text, code, and vision