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 support@aappseed.us
• 👉 Join Discord, DnD-tools channel.

---

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