added reamde and workflows

Author: ZiZIGY

.github/workflows/deploy-demo.yml

@@ -0,0 +1,35 @@
+name: Deploy Demo
+
+on:
+  push:
+    branches: [master]
+  workflow_dispatch:
+
+permissions:
+  contents: write
+  pages: write
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build demo
+        run: yarn build
+
+      - name: Deploy to GitHub Pages
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: dist
+          branch: gh-pages

README.md

@@ -1,5 +1,76 @@
-# Vue 3 + TypeScript + Vite
+<p align="center">
+  <img src="https://raw.githubusercontent.com/ZiZiGY/vue-dnd-kit/master/public/logo.svg" width="400" alt="HTML Builder Logo">
+</p>
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+<h1 align="center">HTML Builder Component</h1>
 
-Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+<p align="center">
+  A powerful, visual HTML structure builder component for Vue 3 applications
+</p>
+
+<p align="center">
+  <img src="https://img.shields.io/badge/Framework-Vue%203-brightgreen" alt="Framework: Vue 3">
+  <img src="https://img.shields.io/badge/Language-TypeScript-blue" alt="Language: TypeScript">
+  <img src="https://img.shields.io/badge/Status-Beta-yellow" alt="Status: Beta">
+</p>
+
+## ✨ 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
+
+```bash
+# Install dependencies
+yarn install
+
+# Start development server
+yarn dev
+```
+
+For additional information about project setup and IDE support, refer to the [Vue TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+
+## 📄 License
+
+[MIT](LICENSE)
+
+---
+
+<p align="center">Made with ❤️ by <a href="https://github.com/zizigy">ZiZiGY</a></p>