Открытый визуальный редактор кода

Создавайте сайты, прототипы и дизайны с помощью ИИ в Next.js + TailwindCSS. Вносите правки напрямую в DOM браузера через визуальный редактор. Дизайньте в реальном времени с помощью кода. Открытая альтернатива таким сервисам, как Bolt.new, Lovable, V0, Replit Agent, Figma Make, Webflow и другим.

🚧 🚧 🚧 Onlook находится в разработке 🚧 🚧 🚧

Мы активно ищем участников, которые помогут сделать Onlook для веба потрясающим инструментом для создания проектов по промптам. Ознакомьтесь со списком открытых задач, чтобы увидеть все предлагаемые функции (и известные проблемы), и присоединяйтесь к нашему Discord, чтобы сотрудничать с сотнями других разработчиков.

Что можно делать с Onlook:

Onlook-GitHub-Example

Начало работы

Доступно в ближайшее время с хостинговым приложением или локальным запуском.

Использование

Onlook работает с любым проектом на Next.js + TailwindCSS. Импортируйте свой проект в Onlook или начните с нуля прямо в редакторе.

Используйте AI-чат для создания или редактирования вашего проекта. В любой момент вы можете кликнуть правой кнопкой на элемент, чтобы открыть его точное расположение в коде.

Рисуйте новые div-элементы и перетаскивайте их внутри родительских контейнеров.

Просматривайте код параллельно с дизайном вашего сайта.

Используйте панель инструментов редактора Onlook для настройки стилей Tailwind, прямого управления объектами и экспериментов с макетами.

Документация

Полную документацию можно найти на docs.onlook.com

Чтобы узнать, как внести свой вклад, посетите раздел Contributing to Onlook в нашей документации.

Как это работает

Когда вы создаете приложение, мы загружаем код в веб-контейнер.
Контейнер запускается и обслуживает код.
Наш редактор получает ссылку на превью и отображает его в iFrame.
Редактор читает и индексирует код из контейнера.
Мы инструментируем код, чтобы сопоставить элементы с их местом в коде.
При редактировании элемента мы сначала изменяем его в iFrame, а затем в коде.
Наш AI-чат также имеет доступ к коду и инструменты для его понимания и редактирования.

Эта архитектура теоретически может масштабироваться на любой язык или фреймворк, который декларативно отображает DOM-элементы (например, jsx/tsx/html). Сейчас мы сосредоточены на оптимальной работе с Next.js и TailwindCSS.

Для полного пошагового руководства ознакомьтесь с нашими Architecture Docs.