Framix Editor Core — визуальный no-code редактор сайтов на Nuxt + Vue

🇷🇺 Русский · 🇬🇧 English

Open-source ядро визуального drag-and-drop конструктора сайтов Framix. Веб-конструктор страниц и лендингов на Nuxt 4 + Vue 3 + Tailwind CSS 4 — с секциями, брейкпоинтами, Bento-сеткой, snap-привязками к блокам и направляющими (как в Figma) и встроенным рендером. Полностью self-hosted: бэкенд не нужен, всё хранится в localStorage, страницы экспортируются и импортируются в JSON. Распространяется по лицензии MIT — бесплатно для личного и коммерческого использования.

TL;DR — что это и зачем

• Визуальный редактор сайтов в браузере: блоки, секции, брейкпоинты Desktop / Tablet / Mobile.
• Drag-and-drop с Figma-подобными snap-линиями, distance-индикаторами, equal-spacing подсказками, marquee-выделением.
• Bento (CSS Grid) layout наряду с absolute и responsive — комбинируйте на одной странице.
• 31 панель свойств (background, border, shadow, typography, layout, actions, code, …) — никаких внешних плагинов.
• Готов к встраиванию: компонент <Builder> и <RenderPageRenderer> подключаются в любое Nuxt/Vue приложение.
• JSON-серилизация — храните страницы в БД, S3, git или передавайте между проектами.
• Тёмная тема, i18n (RU/EN), хоткеи, undo/redo — из коробки.

Кому подойдёт: разработчикам, которые делают свой landing-page builder, CMS, no-code платформу, email/PDF-генератор, инструмент для маркетологов или внутренний редактор контента — и не хотят писать drag-and-drop холст с нуля.

Демо и скриншоты

• Лайв-демо: запустите локально через npm install && npm run dev — главная (/) с галереей шаблонов и редактор (/editor) откроются на http://localhost:3000.

Главная — описание ядра, ссылки в редактор и галерея шаблонов:

Редактор — холст с секциями, правая панель свойств, snap-привязки:

Шаблоны — .json-страницы из папки templates/ рендерятся как живые превью:

💡 Чтобы увидеть редактор без установки, добавьте .json-страницу в папку templates/ — она появится на главной с живым превью карточки.

Содержание

• Быстрый старт
• Маршруты
• Холст и навигация
• Секции и брейкпоинты
• Layout-режимы секции
• Блоки
• Snap, привязки, направляющие
• Marquee-выделение и мульти-выбор
• Панель свойств
• Темы и дизайн-система
• История, копи-паст, клавиатура
• Сохранение, экспорт, импорт
• Шаблоны
• JSON-формат страницы
• Документация
• Технологический стек
• Лицензия

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

npm install
npm run dev
# → http://localhost:3000/         — главная: инфо + галерея шаблонов
# → http://localhost:3000/editor   — сам редактор
# → http://localhost:3000/render   — превью текущей страницы

npm run build      # production-сборка в .output/
npm run preview    # запуск собранной версии
npm run generate   # статическая сборка
npm run lint       # ESLint (если настроен)

Маршруты

Кликом по «Framix Editor» в сайдбаре редактора всегда возвращаетесь на главную.

Холст и навигация

• Бесконечный холст с центрированной «бумагой» — рамкой страницы.
• Зум колесом мыши (+ Ctrl/⌘) или хоткеями. Pinch-to-zoom на трекпаде.
• Pan (рука): инструмент H или удержание пробела/средней кнопки мыши при инструменте V.
• Reset zoom — ⌘/Ctrl + 0.
• Touch: pinch-to-zoom + drag для прокрутки на тач-устройствах.
• Курсор / рука — переключаются клавишами V (cursor) и H (hand).
• Фрейм: можно тянуть холст за свободную область; редактор держит «камеру» (useCanvas).

Секции и брейкпоинты

• Брейкпоинты: Desktop (768–1200px), Tablet (450–768px), Mobile (1–450px).
• Каждый брейкпоинт хранит независимую расстановку секций и блоков — можно переставить блоки на мобильном, не сломав десктоп.
• Копирование между брейкпоинтами: команда «Скопировать в брейкпоинт» переносит выбранную секцию/блок на другой viewport.
• Секции — горизонтальные «полосы» страницы. Высоту можно тянуть за нижнюю границу. Внизу холста — кнопка + Section.
• У каждой секции — свой LayoutConfig, фон, паддинги, max-width, колонки сетки.

Layout-режимы секции

Для Bento в правой панели есть редактор шаблона зон (BentoEditor) и карточки настройки каждой зоны.

Блоки

Все блоки имеют edit-версию (внутри редактора, с ручками ресайза) и render-версию (на /render, чистый HTML без UI редактора).

Snap, привязки, направляющие

Реализованы в useSnap.ts и рендерятся поверх холста как линии и лейблы:

• Snap к рёбрам и центрам соседних блоков в той же секции (порог 2px после учёта зума).
• Snap к центру/краям секции (вертикальная и горизонтальная оси).
• Snap к сетке (если включён режим сетки на секции — gridSize).
• Distance-индикаторы — пунктирные линии с цифрой расстояния в px от перетаскиваемого блока до ближайших соседей с каждой стороны (как в Figma).
• Equal-spacing-индикаторы: когда между несколькими блоками одинаковые зазоры по горизонтали или вертикали — рисуется зона с размером промежутка (тоже как в Figma — выравнивание серий).
• Линии-направляющие при достижении alignment-точки.
• Resize-snapping: при ресайзе те же привязки, плюс Shift для сохранения пропорций.

Активные snap-точки видны только во время drag/resize и пропадают после отпускания мыши — холст не загромождается.

Marquee-выделение и мульти-выбор

• Выделение рамкой: левый клик + drag по пустой области холста рисует marquee-прямоугольник; всё, что попадает внутрь, выделяется.
• Shift + click — добавить/убрать блок из выделения.
• ⌘/Ctrl + A — выделить все блоки текущей секции.
• Esc — снять выделение.
• Над мульти-выделением работают: drag, удаление, копирование, изменение Z-index, выравнивание.

Панель свойств

Правый сайдбар, аккордеоны открываются по контексту выделения. Полный список панелей (см. app/components/builder/properties/):

Actions, Align, BackdropFilter, Background, BentoEditor, Border, BorderRadius, BoxShadow, ChatWidgetParams, Code, Color, Cursor, DividerParams, Form, FrameGrid, Gradient, IconParams, ImageParams, Layout, Margin, MinMaxSize, Opacity, Overflow, Padding, PositionSize, Rotate, SectionBackgroundImage, TextParams, TextShadow, VideoParams, ZIndex.

Что покрыто:

• Геометрия: position, size, min/max, padding, margin, поворот, z-index.
• Цвета: solid и градиенты, picker через vue3-colorpicker с пипеткой и историей.
• Фон: цвет/градиент/картинка/режимы повторения и blend-mode.
• Бордер: толщина, цвет, тип, радиусы скругления (по углам, в %/px).
• Тени: box-shadow и text-shadow с inset, цветом и spread.
• Фильтры: backdrop-filter (blur, brightness, contrast, …).
• Текст: семейство (40+ Google-шрифтов), вес, размер, line-height, letter-spacing, text-shadow, выравнивание.
• Курсор: список CSS-cursor-значений с превью.
• Overflow, Opacity, rotate, align.
• Actions: ссылка, scroll к якорю (#anchor), сабмит формы, открытие в новой вкладке.
• Code: произвольный HTML/CSS/JS-сниппет (CodeMirror, language-server для html/css/js).
• Form: имя поля, плейсхолдер, валидация, обязательность.

Каждое изменение свойств: дебаунс-snapshot в историю, чтобы Undo не съедал каждый чих слайдером.

Темы и дизайн-система

• Light / Dark / System через @nuxtjs/color-mode.
• Theme Customizer: цвет акцента, скругление, переключатель темы.
• CSS-переменные на основе lib/themes.ts (~20KB) и lib/designSystem.ts.
• Tailwind 4 с tailwindcss-animate. Все классы валидируются через lib/tailwindClassList.ts (полный список разрешённых классов).
• Шрифты грузятся через @nuxt/fonts от Google: 40+ семейств для выбора в TextParams (sans, serif, display, handwritten, monospace).

История, копи-паст, клавиатура

История в useHistory.ts: до 50 snapshot'ов, debounced для property-изменений, staged для drag/resize (snapshot фиксируется только если состояние реально менялось).

Внутри редактора иконка клавиатуры в шапке открывает тот же список.

Сохранение, экспорт, импорт

• Автосохранение в localStorage (ключ framix-editor-core:current-page) через перехват apiRequest('/api/pages/update') в app/utils/api.ts — каждое изменение пишется сразу.
• Скачать JSON в шапке — выгружает текущее состояние как <title>.json.
• Загрузить JSON из файла — стандартный <input type="file">.
• Вставить JSON текстом — диалог с <textarea>, принимает четыре формата: Page со строкой data, Page с объектом data, голый { frame, breakpoints }, или просто массив Breakpoint[]. Авто-нормализация.
• Открыть рендер — кнопка в шапке открывает /render в новой вкладке.

Шаблоны

Папка templates/ — это галерея, видимая на главной. Положите туда .json-файл (тот, что выгружается через «Скачать JSON»), и он появится в виде карточки с живым превью: тот же PageRenderer, что и на /render, отрисованный в read-only режиме и отскейленный в карточку через CSS transform.

При клике по карточке:

• Открыть в редакторе — шаблон сохраняется в localStorage и открывается в /editor.
• Превью — открывается на /render.

Поддерживаемые форматы JSON:

• { frame, breakpoints } — голый холст,
• { id, title, data: "<JSON-строка>" } — Page-обёртка,
• Breakpoint[] — просто массив.

Битый/посторонний JSON в папке тихо пропускается, галерея не падает.

JSON-формат страницы

{
  "id": "page-1",
  "title": "Untitled",
  "description": "",
  "isPublish": false,
  "renderMode": "visual",
  "data": "<сериализованный массив Breakpoint[]>",
  "path": "/index",
  "createdAt": "2026-04-29T..."
}

data — это JSON.stringify(...) массива из useHistory.ts / useSections.ts: каждый брейкпоинт хранит свой sections: Section[], а каждая Section содержит blocks: Block[]. Тип Block — см. types/builder.ts.

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

• docs/HOW-TO-USE.md — пошаговая шпаргалка по интерфейсу.
• docs/ARCHITECTURE.md — модель данных, поток состояния, как переключаются брейкпоинты, как считается LayoutConfig.
• docs/API-INTEGRATION.md — как подключить настоящий бэкенд вместо localStorage.

Технологический стек

Nuxt 4 · Vue 3 · TypeScript · Tailwind CSS 4 · shadcn-vue · Tiptap (richtext) · radix-vue / reka-ui · vue-draggable-next · CodeMirror 6 (Code-панель) · vue3-colorpicker · @nuxtjs/i18n · @nuxtjs/color-mode · @nuxt/fonts · @nuxt/icon (lucide).

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

• Свой no-code конструктор сайтов или landing-page builder — берёте редактор как ядро и собираете вокруг него админку, биллинг, CDN.
• CMS-блок для контент-менеджеров: вместо ручного HTML-редактора — визуальный режим со snap-привязками.
• Email-верстальщик или генератор PDF-страниц — экспортируйте JSON-страницу и рендерьте в нужный формат.
• Шаблонизатор для маркетинга — бренд-команда создаёт корпоративные шаблоны, остальные собирают из блоков.
• Внутренний редактор продуктовых страниц в SaaS — feature-pages, release-notes, changelog'и без участия фронтенд-разработчика.
• Обучающий проект: drag-and-drop архитектура, undo/redo, CSS-Grid Bento, snap-математика — в одном репозитории.

Аналоги

Похожие решения, с которыми редактор разумно сравнивать:

• GrapesJS, Craft.js — open-source визуальные редакторы для встраивания. Framix Editor Core — Vue/Nuxt-нативный, со своим Bento-режимом и snap-инфраструктурой.
• Builder.io, Plasmic, Webflow — коммерческие SaaS-конструкторы. Framix Editor Core — self-hosted и MIT.
• Tiptap — это рич-текст редактор внутри блоков; Framix использует его как зависимость для Text-блока.

FAQ

Это библиотека на npm? Нет. Это эталонная сборка-приложение Nuxt 4. Чтобы интегрировать в свой проект, форкайте репозиторий или копируйте нужные компоненты (app/components/builder/Builder.vue, app/components/render/PageRenderer.vue, app/composables/use*.ts, app/utils/constants.ts).

Можно ли использовать коммерчески? Да. Лицензия MIT — вы вправе использовать, изменять и распространять код, в том числе в проприетарных продуктах. Ссылка на лицензию должна сохраняться.

Как подключить настоящий бэкенд? Замените заглушку app/utils/api.ts на свой fetch-клиент. Подробности в docs/API-INTEGRATION.md.

Поддерживается ли SSR / Nuxt Static? Да. Редактор обёрнут в <ClientOnly> (нет смысла рендерить drag-and-drop на сервере), но /render-страница и галерея шаблонов работают и в SSR, и в nuxt generate.

Как добавить свой блок?

1. Создать app/components/builder/blocks/MyBlock.vue (edit-версия) и app/components/render/blocks/MyBlock.vue (render-версия).
2. Добавить тип в types/builder.ts.
3. Зарегистрировать в палитре app/utils/constants.ts (useAllBlocks).
4. Подключить рендер-ветку в Builder.vue и PageRenderer.vue.

Где взять лого / favicon? Лого Framix лежит в public/logo/. Замените на свой при форке (см. раздел в README на английском).

Поддерживает ли Bun или pnpm? Зависит от Nuxt 4. Локально работает с npm и pnpm; bun-тестирование на ваше усмотрение.

Ключевые слова

visual page builder, drag-and-drop website builder, no-code editor, open source page builder, vue page builder, nuxt page builder, tailwind page builder, self-hosted website builder, landing page builder, Bento grid layout, figma-like snapping, JSON page format, embeddable visual editor, framix, визуальный редактор, конструктор сайтов, опенсорс конструктор лендингов, drag-and-drop редактор, Vue Nuxt page builder.

Если у вас есть права на репозиторий — добавьте эти GitHub Topics: page-builder, visual-editor, drag-and-drop, no-code, vue, nuxt, tailwindcss, typescript, open-source, mit-license, landing-page-builder, cms, wysiwyg, bento-grid, framix.

Лицензия

MIT © Framix