Что это такое?
Onlook — это визуальный редактор с открытым исходным кодом, в основе которого лежит ИИ, для дизайна поверх вашей кодовой базы на Next.js + Tailwind. Вы редактируете элементы прямо в DOM браузера, как в графическом редакторе, а изменения в реальном времени переносятся в настоящий код.
Onlook — это визуальный редактор с открытым исходным кодом, в основе которого лежит ИИ, для дизайна поверх вашей кодовой базы на Next.js + Tailwind. Вы редактируете элементы прямо в DOM браузера, как в графическом редакторе, а изменения в реальном времени переносятся в настоящий код.Это больше похоже на Figma или на редактор кода?И то, и другое: визуальный интерфейс в стиле Figma (слои, элементы, перетаскивание) работает поверх настоящего редактора кода и живого предпросмотра. Проект позиционируется как альтернатива с открытым исходным кодом для Bolt.new, Lovable, V0, Replit Agent, Figma Make и Webflow.
И то, и другое: визуальный интерфейс в стиле Figma (слои, элементы, перетаскивание) работает поверх настоящего редактора кода и живого предпросмотра. Проект позиционируется как альтернатива с открытым исходным кодом для Bolt.new, Lovable, V0, Replit Agent, Figma Make и Webflow.Как начать что-то создавать в Onlook?Воспользуйтесь размещённым приложением или запустите его локально и импортируйте существующий проект на Next.js (или начните с нуля, с текста, изображения или готового шаблона). Полные инструкции по установке находятся на docs.onlook.com.
Воспользуйтесь размещённым приложением или запустите его локально и импортируйте существующий проект на Next.js (или начните с нуля, с текста, изображения или готового шаблона). Полные инструкции по установке находятся на docs.onlook.com.Работает ли Onlook с любым фронтенд-стеком?Пока что он создан специально для проектов на Next.js и TailwindCSS; поддержки других фреймворков и стилизации без Tailwind пока нет.
Пока что он создан специально для проектов на Next.js и TailwindCSS; поддержки других фреймворков и стилизации без Tailwind пока нет.Чего ещё не хватает или что находится в разработке?Совместная работа над командами (комментарии, совместное редактирование в реальном времени помимо курсоров), панель компонентов с перетаскиванием, настройка MCP в проектах и поддержка проектов, не работающих на Next.js/Tailwind, пока не реализованы.
Совместная работа над командами (комментарии, совместное редактирование в реальном времени помимо курсоров), панель компонентов с перетаскиванием, настройка MCP в проектах и поддержка проектов, не работающих на Next.js/Tailwind, пока не реализованы.Можно ли развернуть его у себя вместо размещённого приложения?Да, редактор с открытым исходным кодом можно запустить локально (в комплекте есть Dockerfile и настройка docker-compose); размещённый продукт — это отдельное предложение, которое сейчас доступно в раннем доступе по листу ожидания.
Да, редактор с открытым исходным кодом можно запустить локально (в комплекте есть Dockerfile и настройка docker-compose); размещённый продукт — это отдельное предложение, которое сейчас доступно в раннем доступе по листу ожидания.Лицензия разрешительная?Она распространяется по лицензии Apache 2.0 — разрешительной лицензии с открытым исходным кодом без необычных ограничений.
Она распространяется по лицензии Apache 2.0 — разрешительной лицензии с открытым исходным кодом без необычных ограничений.Как редактирование элемента на холсте на самом деле меняет мой исходный код?Onlook загружает ваш проект в веб-контейнер, добавляет в запущенный код инструменты, которые связывают каждый элемент DOM с его местом в исходниках, и когда вы редактируете элемент визуально, сначала обновляется живой iFrame, а затем изменение записывается в настоящий файл кода.
Onlook загружает ваш проект в веб-контейнер, добавляет в запущенный код инструменты, которые связывают каждый элемент DOM с его местом в исходниках, и когда вы редактируете элемент визуально, сначала обновляется живой iFrame, а затем изменение записывается в настоящий файл кода.Какой стек технологий лежит в основе Onlook?Next.js и TailwindCSS на фронтенде, tRPC для серверного интерфейса, Supabase и Drizzle для авторизации и базы данных, AI SDK с OpenRouter для доступа к LLM, а также Morph и Relace для быстрого применения правок; для среды выполнения и изоляции используются Bun и Docker.
Next.js и TailwindCSS на фронтенде, tRPC для серверного интерфейса, Supabase и Drizzle для авторизации и базы данных, AI SDK с OpenRouter для доступа к LLM, а также Morph и Relace для быстрого применения правок; для среды выполнения и изоляции используются Bun и Docker.Можно ли опубликовать приложение, которое я создал в Onlook?Да, вы можете развернуть проект за считанные секунды, создать ссылки для совместного доступа и подключить собственный домен прямо из редактора.
Да, вы можете развернуть проект за считанные секунды, создать ссылки для совместного доступа и подключить собственный домен прямо из редактора.Может ли ИИ-чат вносить изменения в код самостоятельно?Да, у ИИ-чата есть прямой доступ к коду и инструменты для понимания и редактирования кода вашего проекта, а также можно поставить в очередь сразу несколько сообщений в чате.
Да, у ИИ-чата есть прямой доступ к коду и инструменты для понимания и редактирования кода вашего проекта, а также можно поставить в очередь сразу несколько сообщений в чате.What are similar projects?Core-Framework, vibe-vibe, openpencil, ux-ui-agent-skills, tweakcn, design-extract, open-pencil-cloud, heroui
Core-Framework, vibe-vibe, openpencil, ux-ui-agent-skills, tweakcn, design-extract, open-pencil-cloud, herouiWhich topics is it in?vibecoding, design-to-code, design-tool, supabase, figma, drizzle-orm, vibe-coding, openrouter, ide, design-system, bun, tailwindcss
vibecoding, design-to-code, design-tool, supabase, figma, drizzle-orm, vibe-coding, openrouter, ide, design-system, bun, tailwindcss