Create simple dashboard with only drag-and-drop. You can also import, export, build your project with it. it also support multiple pages/routes.

It use :

• gridstack.js as editor (drag-and-drop)
• Vite to wrap it
• DaisyUI as default UI framework
• Fastify as our service handler

Thanks to them, we can create this project.

And feel free to use it!

Demo

Try it on : https://web-builder.tools.stechoq.com

To use build's result, you can unzip it and run it like php -S 0.0.0.0:9000.

Features

current features :

• Page : Page is components wrapper. Path's name is auto generated by Page's name. After you build it, you can try to access each page by go to their path (e.g. for page Test, you can access it like localhost:9000/test).
  Default Page will be used to re-route your root path into it, so make sure that you have Default Page in your project.
• Component : component consist of iframe html. You can edit them directly from our web builder. we also provide some component templates too.
• Export: it would export your current project into json, so you can use it later.
• Import: to import your project's json.
• Build: to build your project into vite dist. it consist html, js, and css like usual. like any other current dist result, it focus all of its paths to /index.html, so you need to re-route it.

Please be aware that your project is not stored on localStorage or anything. it means if you try to refresh the page, your project will be disappear.

Self-Hosted

If you want to run it on your system, you have to :

• clone this repository
• npm install
• npm run build
• enter service directory
• npm install
• npm start
• open localhost:3000 in your browser