Onlook
Open-source visual-first редактор кода, который стирает грань между дизайном и версткой, позволяя визуально верстать, менять стили и создавать React-приложения прямо поверх вашего исходного кода.
Что это такое
Onlook — это визуальный AI-редактор кода нового поколения, созданный выпускниками Y Combinator. Проект называют первой полноценной открытой альтернативой Framer, Webflow, V0, Lovable, Bolt.new и Figma Make.
Главное отличие Onlook в том, что инструментом правки является сам код проекта (единый источник правды / source of truth). Вы работаете в привычном визуальном интерфейсе типа Figma, но каждое действие — клик, перетаскивание блока, изменение цвета или отступа — мгновенно превращается в чистый React-код и Tailwind-классы в вашем репозитории.
В основе архитектуры лежит запуск кода в изолированном WebContainer: редактор связывает элементы на DOM-дереве с их точным местоположением в .tsx-файлах, а встроенный AI-чат помогает генерировать новые страницы, компоненты и верстку по текстовому описанию или макету.
Как это используют
Onlook объединяет дизайнеров, верстальщиков и фронтенд-разработчиков в едином рабочем пространстве без необходимости бесконечного согласования макетов:
- Визуальное редактирование React и Next.js: Открывайте существующий проект или создавайте новый с нуля. Вы можете менять тексты, перетаскивать блоки (drag-and-drop), править отступы и размеры через визуальную панель управления Tailwind-стилями — изменения сразу записываются в исходный код.
- AI-генерация страниц и компонентов: Запрашивайте у встроенного AI-ассистента создание новых экранов по текстовым промптам или скриншотам. Ассистент умеет ставить задачи в очередь, использовать изображения в качестве референсов и самостоятельно создавать Git-ветки (Branching) для безопасных экспериментов.
- Мгновенный переход к коду: Нажатие правой кнопкой мыши по любому элементу в визуальном редакторе переносит вас прямо к нужной строчке кода в встроенном редакторе или вашей любимой IDE.
- Работа с дизайном и бренд-токенами: Управление слоями, ассетами, палитрами, системными компонентами и страницами проекта в едином меню.
- Командная работа и деплой: Совместное редактирование в реальном времени, оставление комментариев на холсте, генерация ссылок для предпросмотра и деплой проекта на кастомный домен за пару секунд.
Преимущества
- Код как единственный источник правды — никакого проприетарного формата данных, на выходе вы получаете чистый Next.js + TailwindCSS код.
- Интерфейс в стиле Figma — привычные инструменты манипуляции слоями, стилями и объектами для дизайнеров.
- Поддержка протокола MCP — подключение сторонних инструментов и контекстных серверов через Model Context Protocol.
- Безопасные эксперименты (Branching) — изоляция дизайнерских гипотез и изменений в отдельных ветках с сохранением чекпоинтов.
- Двустороннее синхронное редактирование — параллельная работа в визуальном окне и в редакторе кода с моментальным отображением результатов.
Open Source и совместимость
Onlook — это полностью открытый open-source проект, код которого распространяется под лицензией Apache-2.0. Иходники visual-редактора, рантайма и инструментов доступны в официальном репозитории onlook-dev/onlook на GitHub, где проект уже собрал свыше 26 000 звёзд.
Продукт полностью совместим с API VEGA: вы можете в один клик подключить Onlook к вашей инфраструктуре и направить вызовы моделей и AI-ассистентов через внутренние эндпоинты компании.