header image

Onlook

Cursor for Designers
Explore the docs »

👨‍💻👩‍💻👨‍💻 We're hiring engineers in SF! 👩‍💻👨‍💻👩‍💻


View Demo · Report Bug · Request Feature

Discord LinkedIn Twitter

中文 | Español | Deutsch | français | Português | Русский | 日本語 | 한국어

Cursor для дизайнеров – визуально-ориентированный редактор кода с открытым исходным кодом

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

🚧 🚧 🚧 Onlook для веба всё ещё в разработке 🚧 🚧 🚧

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

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

  • Создавайте Next.js приложение за секунды
    • Начните с текста или изображения
    • Используйте готовые шаблоны
    • Импортируйте из Figma
    • Начните с GitHub репозитория
  • Визуальное редактирование приложения
    • Интерфейс, похожий на Figma
    • Превью приложения в реальном времени
    • Управление бренд-ассетами и токенами
    • Создание и навигация по страницам
    • Просмотр слоёв – Ранее доступно в Onlook Desktop
    • Обнаружение и использование компонентов – Ранее доступно в Onlook Desktop
    • Управление изображениями проекта – Ранее доступно в Onlook Desktop
  • Инструменты разработки
    • Редактор кода в реальном времени
    • Сохранение и восстановление из контрольных точек
    • Выполнение команд через CLI
    • Интеграция с маркетплейсом приложений
    • Локальное редактирование кода – Ранее доступно в Onlook Desktop
  • Развертывание приложения за секунды
    • Генерация ссылок для общего доступа
    • Подключение собственного домена
  • Совместная работа в команде
    • Редактирование в реальном времени
    • Оставление комментариев

Onlook-GitHub-Example

Onlook для Desktop (также известный как Onlook Alpha)

Мы находимся на ранней стадии предпросмотра Onlook Web. Если вы ищете загружаемое десктопное приложение на Electron, оно перемещено в Onlook Desktop.

Почему мы переходим на веб? Читайте о нашем решении: Миграция с Electron на Web

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

Скоро будет доступно через хостинг приложения или локальный запуск.

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

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

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

image

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

image

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

image

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

image

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

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

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

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

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

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

Для полного ознакомления с архитектурой изучите наши Architecture Docs.

Наш технологический стек

Фронтенд

База данных

  • Supabase - Аутентификация, база данных, хранилище
  • Drizzle - ORM

Искусственный интеллект

  • AI SDK - LLM-клиент
  • Anthropic - Провайдер LLM-моделей
  • Morph Fast Apply - Провайдер моделей быстрого применения
  • Relace - Провайдер моделей быстрого применения

Песочница и хостинг

Среда выполнения

  • Bun - Монорепозиторий, среда выполнения, сборщик
  • Docker - Управление контейнерами

Вклад в проект

image

Если у вас есть предложение по улучшению, пожалуйста, сделайте форк репозитория и создайте pull request. Вы также можете открыть issue.

Инструкции и кодекс поведения см. в файле CONTRIBUTING.md.

Участники проекта

Контакты

image

Лицензия

Распространяется под лицензией Apache 2.0. Подробнее см. в файле LICENSE.md.