Визуальный конструктор текстовых макетов в духе Figma
Расставляйте текст и таблицы на холсте, привязывайте их к JSON и выгружайте готовый HTML.
| Холст | Размер задаётся вручную (по умолчанию 800×600), зум колесом с зажатым Ctrl, панорамирование перетаскиванием |
| Текст и таблицы | Добавляются кнопкой и кликом по холсту, перетаскиваются, тянутся за края, текст правится двойным щелчком |
| Привязка к JSON | Каждый ключ объекта в редакторе слева становится блоком на холсте, значение — его текстом. Правите JSON, блоки обновляются сразу |
| Выравнивание | По краям и центру холста, привязка к левому краю и к маркеру на линейке |
| Точные координаты | Позиция X/Y и размеры в панели свойств, три режима ресайза: по содержимому, фиксированная высота, фиксированный размер |
| Типографика | Каталог Google Fonts с кириллицей, превью каждого шрифта отрисовывается прямо из файла через opentype.js, выбор начертания и кегля |
| Экспорт | Одна кнопка сохраняет макет в самодостаточный canvas.html |
- Впишите в редактор слева JSON, например
{ "title": "Привет", "body": "Текст" }. Поддерживается JSON5: комментарии, ключи без кавычек, висячие запятые. - Расставьте блоки на холсте и выровняйте их через правую панель.
- Выберите блок, чтобы поменять шрифт, начертание и размер.
- Нажмите кнопку с иконкой HTML5 и получите
canvas.html.
| Действие | Как |
|---|---|
| Добавить текст / таблицу | кнопка на левой панели, затем клик по холсту |
| Редактировать текст | двойной щелчок по блоку |
| Удалить блок | выделить и нажать Delete |
| Масштаб | Ctrl + колесо мыши |
Нужен Node.js 20+.
git clone https://github.com/logreus-cloud/TextFlow.git
cd TextFlow
npm install
npm run devКаталогу шрифтов нужен бесплатный ключ Google Fonts Developer API. Без ключа всё остальное работает, а вместо списка шрифтов будет подсказка.
cp .env.example .env.local
# впишите ключ в VITE_GOOGLE_FONTS_API_KEY| Команда | Что делает |
|---|---|
npm run dev |
дев-сервер с hot reload |
npm run build |
production-сборка в dist/ |
npm run preview |
локальный просмотр сборки |
Workflow .github/workflows/deploy.yml собирает проект и публикует его на GitHub Pages при каждом пуше в main. Чтобы на демо работали шрифты, добавьте ключ в секрет репозитория VITE_GOOGLE_FONTS_API_KEY и ограничьте его в Google Cloud Console по HTTP referrer: ключ попадает в клиентский бандл.
- Vue 3 (Composition API,
<script setup>) и Vite - interact.js: перетаскивание и ресайз блоков, маркер на линейке
- vue-zoomable: зум и панорамирование холста
- splitpanes: панели с изменяемой шириной
- opentype.js: превью шрифтов в виде SVG-контуров
- vue3-virtual-scroller: виртуальный список из сотен шрифтов
- Prism и JSON5: подсветка и разбор JSON
- Выделение и настройка таблиц наравне с текстом
- Цвет, межстрочный интервал и межбуквенное расстояние
- Отмена и повтор действий
- Сохранение проекта в JSON и загрузка обратно
- Подключение выбранных Google Fonts в экспортированный HTML