Web/Mobile HTML Builder & Editor 🚀

No-code HTML builder for your web and mobile apps based on DaisyUI and Tailwind.

Built for you by Vocamen with love 🤍

Feel free to use as-is, and contribute (it's really easy):

🥇ONLINE BUILDER

Summary

TL;DR Simply click ONLINE BUILDER and start building your HTML page.

-- Currently, to change components content click the component settings (cog wheel) then use this ugly hack: click "update" then add a character to the following input, then hit "tab" to update your component. Feel free to provide a better way --

Click the </> button to inspect and copy your HTML and CSS. Paste code in your app and don't forget to add DaisyUI and Tailwind CSS in your html page, in the header:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet" type="text/css" />

Auto-saves on your browser, no need to save!

🥰 PR are welcome!

If you'd like to contribute but don't want to download and install stuff, simply FORK this repository and change blocks.js and components.js in src/, then PR (Pull Request) from your fork to this project.

Download

• CDN
  • https://unpkg.com/web-mobile-html-builder
• NPM (not sure)
  • npm i web-mobile-html-builder
• GIT
  • git clone https://github.com/vocamen/web-mobile-html-builder.git

Development

Clone the repository

git clone --depth 1 https://github.com/vocamen/web-mobile-html-builder.git
cd web-mobile-html-builder

Install dependencies

npm i
npm i -g grapesjs-cli
(you will need this one to test and build easily)

Start the dev server

npx grapesjs-cli serve

Tweak

Simply change 2 files in src/

• components.js (the HTML code in your page)
• blocks.js (the menu elements to drag in your HTML page)

Build the source

npx grapesjs-cli build

Test your project before PR

http-server ./dist/

License

MIT