---
name: onlook
summary: "Onlook is an open-source visual editor for React apps that pairs an AI agent with a design-tool-style canvas, letting you edit a live Next.js/TailwindCSS app visually and in code while the changes write back to the actual source. It positions itself as a \"Cursor for designers,\" bridging the gap between design and front-end development."
language: TypeScript
license: Apache-2.0
repo: https://github.com/onlook-dev/onlook
source: https://opensources.dev/resource/onlook
health: 100
---

# onlook

Onlook is an open-source visual editor for React apps that pairs an AI agent with a design-tool-style canvas, letting you edit a live Next.js/TailwindCSS app visually and in code while the changes write back to the actual source. It positions itself as a "Cursor for designers," bridging the gap between design and front-end development.

# Onlook Documentation

This is a Next.js application for the Onlook documentation.

Run development server:

```bash
bun run dev
# or
pnpm dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

## Explore

In the project, you can see:

- `lib/source.ts`: Code for content source adapter, provides the interface to
  access your content.
- `app/layout.config.tsx`: Shared options for layouts, optional but preferred to
  keep.

RouteDescription`app/(home)`The route group for your landing page and other pages.`app/docs`The documentation layout and pages.`app/api/search/route.ts`The Route Handler for search.

### Documentation Structure

The documentation is organized into the following sections:

- **Getting Started**: Quick introduction and installation guides
- **User Guide**: Comprehensive guide for using Onlook
- **Features**: Detailed description of Onlook's features
- **Tutorials**: Step-by-step guides for common tasks
- **Developer Documentation**: Technical documentation for contributors

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
  features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.