Onlook

Onlook is a next-generation visual code editor designed to bridge the gap between design and development. It enables designers and product managers to craft web experiences using AI while working directly with code as the source of truth. The tool combines the familiarity of design tools with the power of real code editing, allowing teams to prototype, iterate, and ship websites faster than ever.

• Direct Editing allows users to drag-and-drop, rearrange, scale, and manipulate elements directly in the editor without writing code manually.

• AI Chat Integration provides instant design help and feedback from AI right within your workflow, enabling code generation and responsive design fixes.

• Component System lets you customize reusable components that can be swapped across websites, working with your real design system.

• Revision History ensures you never lose progress with full version control, allowing you to revert changes when needed.

• Brand Compliance centralizes design tokens, color palettes, and typography management to keep fonts, colors, and styles consistent.

• Layers Panel enables precise selection and control over elements, allowing you to navigate your React component tree with accuracy.

• GitHub Integration allows you to import existing React/Next.js/Tailwind codebases and start building immediately.

• Team Collaboration enables sharing projects with team members and collaborating on designs in real-time.

• Custom Domain Publishing lets you attach a custom domain and share your work with the world.

• Draw-in Layers allows tracing divs and text directly in designs to create code in real-time.

To get started, you can self-host Onlook for free using the GitHub repository, or contact the team for the hosted cloud version. The tool is optimized for larger screens and works best with React, Next.js, and Tailwind CSS projects. Users can import existing codebases, design visually, and have changes reflected directly in the source code.