HTML Builder: визуальный конструктор HTML-структур на Vue 3

Привет, Хабр! Сегодня хочу представить вам HTML Builder — визуальный редактор HTML-структур с drag-and-drop интерфейсом, который я разрабатываю как часть библиотеки нестилизованных компонентов vue-dnd-kit/components (по аналогии с shadcn). Проект находится в стадии бета-тестирования, и мне бы хотелось получить обратную связь от сообщества разработчиков и дизайнеров.

Что такое HTML Builder?

HTML Builder — это компонент для визуального создания и редактирования HTML-структур без необходимости писать код вручную. Это комплексное решение, которое включает в себя:

• Рабочую область для визуального конструирования элементов

• Палитру компонентов для быстрого добавления элементов на холст

• Древовидный вид для удобного управления иерархией элементов

• Панель свойств для тонкой настройки каждого элемента

Зачем это нужно?

В современной веб-разработке часто возникает потребность в инструментах, которые могут упростить процесс создания интерфейсов, особенно для людей, не имеющих глубоких знаний в HTML и CSS. HTML Builder может использоваться для:

• Создания прототипов интерфейсов

• Разработки визуальных редакторов для CMS

• Создания конструкторов форм

• Разработки шаблонов email-рассылок

• Обучения основам HTML-вёрстки с визуальной обратной связью

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

В основе HTML Builder лежит система drag-and-drop, реализованная с помощью библиотеки Vue DnD Kit. Пользователь может перетаскивать элементы из палитры на холст, настраивать их свойства, а также перемещать их в дереве элементов для изменения структуры документа.

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

1. Интуитивный drag-and-drop интерфейс

   • Перетаскивание элементов между любыми частями интерфейса

   • Визуальные подсказки при перетаскивании

   • Удобные горячие клавиши (Shift для перемещения, Esc для отмены выбора)

2. Структурированное дерево элементов

   • Визуализация иерархии документа

   • Возможность раскрывать/сворачивать узлы

   • Выбор элементов кликом по дереву

   • Скрытие/отображение элементов без удаления

   • Удаление элементов прямо из дерева

3. Панель свойств с множеством настроек

   • Размеры и позиционирование

   • Отступы и поля

   • Границы и фон

   • Настройки отображения

4. Палитра с готовыми компонентами

   • Базовые HTML-элементы (div, p, img, span)

   • Блоки для разметки страницы

   • Медиа элементы

Технические детали

HTML Builder создан на Vue 3 с использованием Composition API и TypeScript. Компонент входит в библиотеку нестилизованных UI-компонентов vue-dnd-kit/components, которая работает по принципу, схожему с shadcn — вы получаете компоненты с базовой функциональностью, но можете полностью настраивать их стили и поведение под свои нужды.

Простое использование

Установка в проект:

pnpm dlx @vue-dnd-kit/components add HTMLBuilder 

Базовое использование:

<script setup lang="ts">   import { HTMLBuilderBase } from './components/HTMLBuilder'; </script>  <template>   <HTMLBuilderBase /> </template> 

Помогите сделать HTML Builder лучше!

Важно отметить, что на данный момент HTML Builder находится в очень ранней бета-версии с минимальным набором функций. Это скорее прототип или демонстрация концепции, который позволяет оценить базовые возможности и взаимодействие с пользователем. Тем не менее, даже в этой минималистичной версии можно получить представление о том, как компонент выглядит и работает.

Поскольку проект находится в стадии активной разработки, мне бы хотелось получить обратную связь от сообщества разработчиков и дизайнеров. Особенно интересны идеи по улучшению UI/UX:

• Что можно улучшить в интерфейсе?

• Каких возможностей не хватает?

• Как можно сделать опыт использования более интуитивным?

• Есть ли проблемы с производительностью или отзывчивостью интерфейса?

• Какие компоненты стоит добавить в палитру?

Планы по развитию

В ближайших планах:

1. Улучшение UI/UX на основе ваших отзывов

2. Добавление шаблонов и пресетов для быстрого старта

3. Экспорт созданной структуры в чистый HTML/CSS код

4. Поддержка кастомных стилей и классов

5. История изменений с возможностью отмены/повтора действий

6. Расширение палитры компонентов

Полезные ссылки

• Демо HTML Builder – попробуйте прямо сейчас

• GitHub репозиторий – исходный код и документация

• Vue DnD Kit – библиотека, на базе которой создан компонент

Буду рад любым комментариям, вопросам и предложениям! Давайте вместе сделаем этот инструмент еще лучше. Спасибо за внимание!

P.S. Если вы хотите принять участие в разработке проекта или у вас есть интересные идеи по улучшению — не стесняйтесь связываться со мной через GitHub, Telegram или комментарии к этой статье.