Visual Screen Designer

A drag-and-drop UI builder built with Vue 3, TypeScript, and Tailwind CSS.

Features

• Component Palette: Drag and drop components from the left sidebar.
• Canvas: Arrange components on the center canvas.
• Properties Panel: Configure component properties in the right sidebar.
• Preview Mode: Toggle between Edit and Preview modes to see the live form.
• Sharing: Generate a shareable link with the current screen design.
• Export: Export the screen design as JSON.

Tech Stack

• Vue 3 (Composition API)
• TypeScript
• Tailwind CSS
• vuedraggable
• vue-router
• lz-string

Setup

1. Install dependencies:

   npm install

2. Run development server:

   npm run dev

3. Build for production:

   npm run build