Onlook
: How to use it, features, and the business problems it solves

How to Use

1. Create an account and download the app

   Create an account on the official site and download the corresponding desktop app (Mac/Windows).

2. Create a new project or import an existing one

   Create a new React project in Onlook, or import an existing React project that supports Tailwind CSS.

3. Edit in the visual editor

   Intuitively arrange UI components, adjust styles, edit text, and more in a Figma-like interface.

4. Use the AI assistant

   Give instructions to the AI via chat to generate components, change styles, add interactions, and more.

5. Use real-time preview and interactive mode

   Instantly preview your edits and verify the behavior of user interactions and animations.

6. Export code and manage versions

   Your edits are instantly reflected in the code and saved to your local environment. Version control and rollback are also available.

---

Features

• Visual code editor

  Visually edit React components in a Figma-like UI.

• AI assistant (chat-based)

  Generate UI, change styles, and add interactions through natural-language instructions.

• Real-time preview

  Instantly preview your edits and check UI behavior.

• Interactive mode

  Verify the behavior of user interactions and animations.

• Tailwind CSS support

  Style your projects using Tailwind CSS.

• Local storage

  Your edits and code are saved to your local environment and never sent externally.

• Version control and rollback

  Manage your edit history and roll back to any version.

• Open source

  The source code is published on GitHub, so you can freely customize and extend it.

---

Pricing