@lyonbot/interactive-blocks

Make interactive selectable, drag-and-drop, copy-and-paste ready, Block and Slot components easily! Works with Vue, React and any MV* framework.

[ ▶️ Try the Demo ] [ 📁 View on GitHub ] [ 📖 Document ]

How Interactive?

• (multiple) selectable!
• copy and paste! with system clipboard
• keyboard shortcuts!
• drag and drop! (optional)

These keyboard shortcuts are supported!

• Ctrl+X, Ctrl+C, Ctrl+V
• Navigate with arrow keys
• Select multiple blocks with Shift + arrow keys
• Select all blocks with Ctrl+A
• Delete, Backspace

How to Integrate

• React: @lyonbot/interactive-blocks-react
• Vue 2: @lyonbot/interactive-blocks-vue2

This lib works with any framework, including React and Vue. Example is written with React.

📖 Read document with Docsify

1. Basic Setup

2. Drag and Drop -- read "basic setup" first