Привет, Хабр! Сегодня хочу представить вам 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. Пользователь может перетаскивать элементы из палитры на холст, настраивать их свойства, а также перемещать их в дереве элементов для изменения структуры документа.
Ключевые возможности:
Интуитивный drag-and-drop интерфейс
Перетаскивание элементов между любыми частями интерфейса
Визуальные подсказки при перетаскивании
Удобные горячие клавиши (Shift для перемещения, Esc для отмены выбора)
Структурированное дерево элементов
Визуализация иерархии документа
Возможность раскрывать/сворачивать узлы
Выбор элементов кликом по дереву
Скрытие/отображение элементов без удаления
Удаление элементов прямо из дерева
Панель свойств с множеством настроек
Размеры и позиционирование
Отступы и поля
Границы и фон
Настройки отображения
Палитра с готовыми компонентами
Базовые 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:
Что можно улучшить в интерфейсе?
Каких возможностей не хватает?
Как можно сделать опыт использования более интуитивным?
Есть ли проблемы с производительностью или отзывчивостью интерфейса?
Какие компоненты стоит добавить в палитру?
Планы по развитию
В ближайших планах:
Улучшение UI/UX на основе ваших отзывов
Добавление шаблонов и пресетов для быстрого старта
Экспорт созданной структуры в чистый HTML/CSS код
Поддержка кастомных стилей и классов
История изменений с возможностью отмены/повтора действий
Расширение палитры компонентов
Полезные ссылки
Демо HTML Builder – попробуйте прямо сейчас
GitHub репозиторий – исходный код и документация
Vue DnD Kit – библиотека, на базе которой создан компонент
Буду рад любым комментариям, вопросам и предложениям! Давайте вместе сделаем этот инструмент еще лучше. Спасибо за внимание!
P.S. Если вы хотите принять участие в разработке проекта или у вас есть интересные идеи по улучшению — не стесняйтесь связываться со мной через GitHub, Telegram или комментарии к этой статье.
