Onlook

AI-Powered Visual Builder

Prompt Onlook's AI to build, design, and experiment with your ideas. This feature allows users to create interactive frontends by understanding React components and design tokens, generating code that fits the project's architecture. Users can simply describe their desired layout, and the AI will assist in setting it up.

React Visual Editor

Edit React components directly in the browser with a visual interface. Users can drag, drop, and style elements visually while Onlook updates the actual code files in real-time, ensuring that the existing build process remains intact. This feature allows for seamless integration of design and development workflows.

Tailwind CSS Visual Editor

Style your applications without writing CSS by adjusting layouts, colors, and text directly in the visual editor. Onlook generates clean Tailwind classes that align with the user's design decisions, making it easier to maintain consistency across projects.

Complete React Visual Builder

This feature combines visual design with developer-grade capabilities, allowing users to build complex React applications visually while maintaining full control over their code and components. It ensures that no refactoring is required, making it easy to scale projects.

Component Library

Create reusable components that work across your project, maintaining their style and behavior. This feature allows users to build once and use everywhere, ensuring consistency and efficiency in design and development.

Theming & Branding

Manage color palettes, typography scales, and design tokens through a centralized system. This feature allows users to define their design language once and apply it consistently across their projects, enhancing brand coherence.

Layer Management

Navigate your React component tree through a visual layer panel, allowing for precise control over every element. Users can select, organize, and manage components without the hassle of searching through JSX, streamlining the editing process.

Version History

Onlook automatically saves project snapshots, enabling users to roll back to previous versions at any time. This feature provides peace of mind, allowing for experimentation without the fear of losing progress.

React Templates

Users can bring their existing React projects into Onlook or start fresh with new ones. This feature supports any React next.js website styled with Tailwind, allowing for easy import and visual editing.

Import your codebase

Bring your existing React codebase into Onlook and start building immediately. This feature allows users to leverage their current work and enhance it with Onlook's visual editing capabilities.

Collaborate with your team

Share your project with your team and collaborate on designs in real-time. This feature enhances teamwork and ensures that all members can contribute to the design process simultaneously.

Publish your work

Attach a custom domain and share your work with the world. This feature allows users to showcase their projects easily, making it simple to present their designs to clients or stakeholders.

Draw-in Layers

Trace divs and text directly in your designs, creating code in real-time. This feature allows for a more intuitive design process, enabling users to visualize their components as they build.

AI Chat

Get instant design help and feedback from AI right in your workflow. This feature provides users with on-demand assistance, enhancing the design process and ensuring that help is always available.

Project Templates

Save and reuse your projects as templates across your team. This feature streamlines the project setup process, allowing teams to maintain consistency and efficiency in their workflows.

Branching & Version Control

Create and manage branches for your projects with full version history. This feature allows teams to experiment and iterate on designs without affecting the main project, ensuring a smooth development process.

Advanced Security

Includes SSO (SAML/OAuth), advanced security controls, audit logs, and admin controls. This feature ensures that user data and project information are protected, providing peace of mind for teams working on sensitive projects.