Article Lab — локальный визуальный редактор статей для последующей вставки в HTML-блок T123 в Tilda. Статья собирается из переиспользуемых компонентов, а на выходе редактор генерирует изолированные HTML и CSS без JavaScript-зависимостей.
- восемь базовых компонентов: текст, список, разделитель, изображение, кнопка, блок кода, таблица и группа;
- пользовательские компоненты, сохраняемые из настроенных экземпляров на холсте;
- вложенные и горизонтальные группы, drag-and-drop между корнем статьи и группами;
- отдельные настройки компонента и экземпляра;
- адаптивные стили для Desktop, Tablet, Mobile и пользовательских брейкпоинтов;
- ширина любого компонента в пикселях или процентах;
- rich text на TipTap: начертание, курсив и inline-ссылки;
- редактируемые маркированные и нумерованные списки с уровнями вложенности;
- импорт Markdown и явные директивы компонентов;
- undo/redo, несколько проектов, локальное автосохранение и импорт/экспорт JSON;
- scoped-экспорт HTML/CSS, рассчитанный на ширину реального HTML-контейнера в Tilda;
- preview шрифтов Google Fonts без добавления загрузчика шрифта в экспорт.
Проект рассчитан на сценарий, в котором библиотека компонентов настраивается один раз, а её общий CSS размещается в <head> сайта.
- Создайте проект и настройте компоненты, брейкпоинты, отступы и шрифты.
- Скопируйте CSS из правой панели редактора и добавьте его в дополнительный HTML-код внутри
<head>сайта Tilda. - Для каждой статьи собирайте нужный набор блоков и копируйте только HTML в блок T123.
Повторно копировать CSS не нужно, если вы:
- меняете только текст, ссылки, изображения и другой контент;
- добавляете, удаляете или переставляете экземпляры уже существующих компонентов;
- помещаете существующие компоненты внутрь групп, в том числе на несколько уровней вложенности;
- меняете количество карточек или других готовых вложенных компонентов.
CSS нужно обновить в <head>, если вы:
- изменили стили компонента или общие настройки проекта;
- создали новый компонент после предыдущего экспорта CSS;
- добавили локальные стилевые переопределения конкретному экземпляру.
Все компоненты библиотеки проекта включаются в общий CSS, даже если в текущей статье они не используются. HTML и CSS ограничены уникальным slug проекта, поэтому статьи следует экспортировать из того же проекта, для которого установлен общий CSS.
Брейкпоинты экспорта привязаны к фактической ширине HTML-контейнера через CSS Container Queries. Для браузеров без их поддержки генерируется fallback на media queries.
Ширину любого компонента можно задать:
- в
%— относительно доступной ширины родительского контейнера; - в
px— как фиксированное значение с безопасным ограничением по ширине контейнера.
Это работает как для корневых блоков статьи, так и для компонентов внутри групп. Изображения сохраняют пропорции и используют height: auto.
В общих настройках проекта есть два независимых поля:
- Export font-family — CSS-значение, которое попадёт в экспорт, например
Montserrat, Arial, sans-serif; - Preview Google Fonts — URL stylesheet Google Fonts, используемый только для отображения статьи в редакторе.
Пример URL для preview:
https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap
Article Lab не экспортирует ссылку на Google Fonts. Если шрифт нужен на опубликованном сайте, его загрузку следует отдельно подключить в <head> Tilda.
Обычные абзацы, заголовки и списки сопоставляются с базовыми компонентами. Конкретный компонент библиотеки можно вызвать по его slug:
:::button href="https://example.com" target="_blank"
Подробнее
:::Требования:
- Node.js
>=22.13.0; - pnpm
11.7.0.
pnpm install
pnpm devПриложение будет доступно по адресу http://localhost:3000.
pnpm test -- --run
pnpm exec tsc --noEmit
pnpm lint
pnpm buildpnpm build создаёт Sites/Cloudflare-совместимую сборку. Для Vercel в проекте предусмотрена отдельная команда:
pnpm build:vercelBackend и база данных не используются. Проекты и настройки сохраняются в localStorage текущего браузера и не синхронизируются между устройствами.
Для резервной копии или переноса проекта используйте экспорт и импорт JSON. Повреждённое содержимое workspace сохраняется отдельно в браузере, чтобы его можно было восстановить вручную.
app/editor/EditorApp.tsx— интерфейс редактора, холст и инспектор;app/editor/store.ts— состояние, история и операции над компонентами;app/editor/model.ts— модель проекта, базовые компоненты и миграции;app/editor/exporters.ts— генерация HTML и CSS для Tilda;app/editor/markdown.ts— импорт Markdown;app/editor/editor.test.ts— тесты модели и экспорта;app/globals.css— стили интерфейса и preview.