HTML Builder Component

A powerful, visual HTML structure builder component for Vue 3 applications

✨ About

HTML Builder is an advanced component that allows you to visually create and manipulate HTML structures through an intuitive interface. Despite being a single component, its functionality is so extensive that it has been developed in a dedicated repository.

🚀 Features

• Visual HTML Construction: Build complex HTML structures without writing code
• Drag & Drop Interface: Easily arrange and organize elements
• Real-time Preview: See your changes instantly
• Advanced Configuration: Fine-tune element properties through a comprehensive settings panel
• Component-Based: Works seamlessly with Vue 3 component architecture

📋 Component Structure

The HTML Builder component is organized into several sub-components:

• HTMLBuilderArea: Main workspace for visual editing
• HTMLBuilderConfig: Configuration sidebar for element properties
• HTMLBuilderTree: Hierarchical view of HTML structure
• HTMLBuilderDraggable/Droppable: Drag and drop functionality components

🔧 Configuration Sections

The builder provides comprehensive configuration options for HTML elements:

• Dimensions
• Margin & Padding
• Border
• Background
• Display Properties
• And more...

💻 Development

This project is built with Vue 3, TypeScript, and Vite. It uses the Vue 3 <script setup> SFCs for component authoring.

Prerequisites

• Node.js 16+
• Yarn or npm

Setup

# Install dependencies
yarn install

# Start development server
yarn dev

For additional information about project setup and IDE support, refer to the Vue TypeScript Guide.

📄 License

MIT

---

Made with ❤️ by ZiZiGY