woai3c/visual-drag-demo

★ 5,628VueAudience · developerComplexity · 3/5LicenseSetup · easy

Mindmap

mindmap
  root((visual-drag-demo))
    What it does
      Drag components to canvas
      Resize and rotate
      Group and lock
      Export as code
    Features
      Undo and redo
      Grid snapping
      Layer ordering
      API data binding
    Tech Stack
      Vue
      npm
      JavaScript
    Learning resources
      5 technical articles
      Animated diagrams
      Chinese docs

mindmap root((visual-drag-demo)) What it does Drag components to canvas Resize and rotate Group and lock Export as code Features Undo and redo Grid snapping Layer ordering API data binding Tech Stack Vue npm JavaScript Learning resources 5 technical articles Animated diagrams Chinese docs

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Study the source code to learn how drag-and-drop canvas editors work before building your own low-code tool.

USE CASE 2

Fork the project as a starting point for a custom page builder that lets non-technical users assemble landing pages.

USE CASE 3

Use the undo/redo and grouping implementation as a reference when adding those features to an existing Vue app.

USE CASE 4

Read the accompanying Chinese articles alongside the code to understand how each editor feature was architected.

Tech stack

VueJavaScriptnpm

Getting it running

Difficulty · easy Time to first run · 30min

MIT license: use freely for any purpose including commercial, just keep the copyright notice.

In plain English

visual-drag-demo is a teaching project showing how to build the front-end of a low-code page editor. A low-code editor lets users assemble a page by dragging components onto a canvas rather than writing code. This project is built with Vue and is meant as a learning resource, with accompanying technical articles that explain how each feature works. The canvas includes a set of built-in component types: text blocks, images, rectangles, circles, straight lines, stars, triangles, buttons, and tables. Users can drag any component onto the canvas, resize it by dragging its handles, rotate it, and reposition it anywhere on the page. Multiple components can be selected and grouped into a single unit, then split apart again later. Individual components can also be locked to prevent accidental moves. The editor supports undo and redo, copy, paste, and cut. Components snap to a grid to help with alignment, and layer order can be adjusted to control which component appears in front of another. Property panels allow each component's visual style to be customized. JavaScript events and CSS animations can be bound to components from within the editor, and external API endpoints can be connected to supply component data. A preview mode lets the user see the finished page, and the layout can be exported as generated code. The README links to five technical articles in Chinese that walk through the implementation principles behind each major feature, including animated diagrams. The project is licensed under MIT and is set up as a standard npm project.

Copy-paste prompts

Prompt 1

Using visual-drag-demo as a reference, help me add a new circular component type to the Vue drag canvas with resizable radius and a color picker.

Prompt 2

Show me how the undo/redo stack is implemented in visual-drag-demo so I can replicate the same pattern in my own Vue 3 app.

Prompt 3

Based on visual-drag-demo, scaffold a minimal low-code page builder in Vue 3 that supports dragging text and image blocks onto a canvas and exporting the layout as JSON.

Prompt 4

Explain how visual-drag-demo handles multi-component selection and grouping, then help me add a similar feature to my existing Vue canvas project.

Open on GitHub → Explain another repo

← woai3c on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.