app-generator / opensource-dnd-tools

DnD Playground - Drag & Drop / Edit Components | AppSeed

Free DnD Tools

Open-Source Playground for Drag & Drop tools and visual components editing - provided by AppSeed.

• 👉 Visual Builder - LIVE Demo
• 🚀 Free Support via email & Discord
• 🫶 Contribute - see the open issues

Quick Start

Tested with Node 16.x, 18.x.

$ git clone https://github.com/app-generator/opensource-dnd-tools.git
$ cd builder
$ yarn
$ yarn dev    # development (LIVE Reload)
$ yarn build  # production  (dist FOLDER)

Roadmap & Features

Status	Item	info
✅	Minimal Core	using vanilla JS
✅	UI Framework	Bootstrap 5
✅	One-Page Layout	Single Component Drag & Drop
✅	Persistence (local storage)	Save, Restore, Clear
✅	Component Customization	Text-Only
✅	Added Grid Component	This allows to inject predefined rows (2,3,4 columns)
❌	Component Customization	Images, Links
❌	Component Customization	CSS
❌	PAGE Customization	CSS
❌	PAGE Customization	JS
❌	Manage SEO	Title, Description, Keywords
❌	Handle Multiple Pages	-
❌	Dashboard Layout	Single Component Drag & Drop
❌	Remote Component Server	Load Components from distant Server

Components Server

Managed by Flask

$ cd backend
$ virtualenv env
$ source env/bin/activate
$ pip install -r requirements.txt
$ flask run --debug

Here is the output:

• http://localhost:5000/
• http://localhost:5000/kits/, return available KITS
  • 'material-kit'
  • 'kit2'
• http://localhost:5000/kits/material-kit/, return Material Kit assets

{
    "name": "Material Kit BS5 ",
    "version": "0.0.0",
    "type": "kit",
    "material-kit": {
        "layouts": "base.html",
        "components": {
            "footers": {
                "footer.html": "NA"
            },
            "headers": {
                "header.html": "NA"
            },
            "navigation": {
                "navigation.html": "NA"
            },
            "general": {
                "section1.html": "NA"
            }
        }
    }
}

Contributors

Anyone can contribute to this free tool. For more input, please use:

• 👉 Email AppSeed using [email protected]
• 👉 Join Discord, DnD-tools channel.

---

Free DnD Tools - Open-Source Project actively supported by AppSeed

opensource-dnd-tools's Issues

[ENH] Added Grid Component (2-COL)

The components list needs to be enhanced with a grid component where all cells are drop-able

• BS5 Grid Components:
  • 2 columns (equal size)

There are no props associated with grid components but the user can drag & drop ordinary components inside the grid.

When the normal component is positioned on top of the grid, the active grid cell needs to be highlighted.

Grid components can be also deleted (with all inner elements) and change the order.

[ENH] Component MouseOver - Visual Effects

On mouseOver, the layout of the component needs to be highlighted with this dotted line:

• Red color
• Dotted Pattern
• Thin Line

Yarn Build Fails

After Quill integration, the yarn build target bump errors.
As a general rule, for each commit, the target build needs to be checked.

@mominur-helios please take a look.

TY!

yarn build
yarn run v1.22.18
$ tsc && vite build
src/main.ts:41:5 - error TS2304: Cannot find name 'Quill'.

41 new Quill('#editor', options);
       ~~~~~


Found 1 error in src/main.ts:41

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[ENH] Active Component - Change Order Option

When selected, the component position in the parent can be updated via two controls positioned in the left margin:

---

---

[ENH] Active Component - Delete Option

When selected, the component can be deleted via a classic x control positioned in the top right corner:

---

---

DIV Element - When selected, Attach Quill Editor

When a DIV component is selected for edit, a Quill editor needs to be active.

DEV Branch: wysiwyg-quill

With the Quill Editor active, the user can:

• edit the DIV HTML
• Edit the RAW HTML (if Quill allows)
  • some WYSIWYG editors permit the switch from visual to Raw HTML editing and vice-versa.

Once the user clicks on another DIV, the previous Quill instance is destroyed and a new one is created for the current element.

@mominur-helios please take a look.
TY!