# Onlook

> A visual code editor that lets designers and product managers craft web experiences with AI, functioning as "Cursor for Designers."

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.

## Features
- Direct visual editing with drag-and-drop
- AI-powered chat for design assistance
- Reusable component system
- Revision history and version control
- Brand compliance with centralized design tokens
- Layers panel for precise element control
- GitHub import for existing codebases
- Real-time team collaboration
- Custom domain publishing
- Draw-in layers for code generation
- Keyboard shortcuts support
- Image and media asset management
- Branching and version control
- Theming and branding tools
- Project templates

## Integrations
GitHub, React, Next.js, Tailwind CSS

## Platforms
WINDOWS, MACOS, LINUX, WEB, API

## Pricing
Open Source, Free tier available

## Links
- Website: https://www.onlook.com
- Documentation: https://docs.onlook.com/
- Repository: https://github.com/onlook-dev/onlook
- EveryDev.ai: https://www.everydev.ai/tools/onlook