Discussion on: HTML App builder

[Palash Bauri 👻]

Check out this javascript library (below) , it's library to build drag and drop interfaces for creating websites.

givanz / VvvebJs

Drag and drop website builder javascript library.

VvvebJs

Drag and drop website builder javascript library.

Built with jQuery and Bootstrap 4.

Two panel Live Demo

One panel Live Demo

Using Startbootstrap landing page for demo page and Bootstrap 4 components.

Features

• Components and blocks/snippets drag and drop.
• Undo/Redo operations.
• One or two panels interface.
• File manager and component hierarchy navigation.
• Add new page.
• Live code editor.
• Image upload with example php script included.
• Page download or export html or save page on server with example php script included.
• Components/Blocks list search.
• Bootstrap 4 components.
• Youtube, Google maps, Charts.js etc widgets.

By default the editor comes with Bootstrap 4 and Widgets components and can be extended with any kind of components and inputs.

Usage

<!-- jquery-->
<script src="js/jquery.min.js"></script&gt
<script src="js/jquery.hotkeys.js"></script&gt
<!-- bootstrap-->
<script src="js/popper.min.js"></

…

View on GitHub

[Navdeep Tanwar]

Thanks a-lot Palash for the reference
actually I already made drag & drop functionality
but I don't know how to edit multiple dragged components and save them to database so that I can fetch them and re-render again for further editing

[Palash Bauri 👻]

You can programmatically create XML schema for each component with information such as X,Y,Z coordinates, text, color etc etc and save the data to database.

Again when loading from database you can use a xml parser to tell components where to put themselves , what text or color to put in...

Something like that may work.

[Navdeep Tanwar]

But I have to make API for the app to load style , I can't send XML

[Palash Bauri 👻]

Instead of XML you can use JSON

[Navdeep Tanwar]

yea exactly
but question is how to render and save :)

[Palash Bauri 👻]

When you fetching and rendering, you may need to write a parser.