Repolode
Предложить
GrapesJS

GrapesJS/grapesjs

Бесплатный фреймворк с открытым исходным кодом для визуального создания HTML-шаблонов и редакторов страниц методом перетаскивания, без написания кода.

Open source альтернатива:WixWebflow

Открыть на GitHubСайт
Звёзды
26,328
Форки
4,653
Открытые issues
30
Последний коммит
16 часов назад

Что это?

GrapesJS — бесплатный фреймворк с открытым исходным кодом для визуального создания HTML-шаблонов для сайтов, рассылок и мобильных приложений. Изначально он разрабатывался для встраивания в CMS, чтобы пользователи могли создавать динамические шаблоны без написания кода. Шаблоны состоят из структуры (HTML), стилей (CSS) и переменных, которые позднее заполняются на сервере и отображаются на клиенте.

В редактор входят менеджер блоков, менеджер стилей, менеджер слоёв, просмотрщик кода и менеджер ресурсов. Поддерживается локальное и удалённое хранение, а также встроенные команды для создания компонентов и управления ими. GrapesJS распространяется через npm, CDN-сервисы, такие как unpkg и CDNJS, а также через Git.

Возможности ядра расширяются с помощью системы плагинов. В проект также входят обёртка для React, пресеты для создания веб-страниц и рассылок (MJML), а также множество официальных плагинов и плагинов от сообщества для работы с компонентами, хранением данных и свойствами стилей.

Ключевые возможности

  • 01Менеджер блоков с поддержкой перетаскивания для создания структуры страницы
  • 02Менеджер стилей для визуального редактирования CSS компонентов
  • 03Менеджер слоёв и просмотрщик кода для изучения шаблона
  • 04Менеджер ресурсов для работы с изображениями и другими медиафайлами
  • 05Локальное и удалённое хранение шаблонов
  • 06Система плагинов, обёртка для React и пресеты для создания веб-страниц и рассылок

Сценарии использования

  • Добавление визуального редактора страниц в CMS, чтобы пользователи без навыков разработки могли создавать шаблоны
  • Создание шаблонов email-рассылок в редакторе с поддержкой перетаскивания
  • Создание конструктора сайтов без кода внутри собственного веб-приложения

Быстрый старт

  1. 1

    Установите GrapesJS через npm

    npm i grapesjs
  2. 2

    Подключите файлы CSS и JS и создайте контейнерный div со скриптом инициализации, как показано в примере использования в README

Темы

#web-builder#drag-and-drop#html-editor#visual-editor#no-code#cms#template-builder#framework#nocode#page-builder

Частые вопросы

Что такое grapesjs?
Бесплатный фреймворк с открытым исходным кодом для визуального создания HTML-шаблонов и редакторов страниц методом перетаскивания, без написания кода. GrapesJS — бесплатный фреймворк с открытым исходным кодом для визуального создания HTML-шаблонов для сайтов, рассылок и мобильных приложений. Изначально он разрабатывался для встраивания в CMS, чтобы пользователи могли создавать динамические шаблоны без написания кода. Шаблоны состоят из структуры (HTML), стилей (CSS) и переменных, которые позднее заполняются на сервере и отображаются на клиенте.
grapesjs можно использовать бесплатно? Какая у него лицензия?
grapesjs распространяется с открытым исходным кодом под лицензией Other. Перед использованием в коммерческих продуктах проверьте условия лицензии.
grapesjs всё ещё поддерживается?
Активно поддерживается. Последний коммит в grapesjs — 21 окт. 2026 г..
Для чего можно использовать grapesjs?
Добавление визуального редактора страниц в CMS, чтобы пользователи без навыков разработки могли создавать шаблоны Создание шаблонов email-рассылок в редакторе с поддержкой перетаскивания Создание конструктора сайтов без кода внутри собственного веб-приложения
Как установить grapesjs?
Установите GrapesJS через npm: npm i grapesjs Подключите файлы CSS и JS и создайте контейнерный div со скриптом инициализации, как показано в примере использования в README
Где скачать grapesjs?
Исходный код и инструкции по установке — на GitHub: https://github.com/GrapesJS/grapesjs

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты