![\"Vvveb\"](\"https://www.vvveb.com/admin/themes/default/img/biglogo.png\")
\n \n Drag and drop page builder javascript library.\n
\n Built with Vanilla Js with no dependencies or build tools and Bootstrap 5\n
\n \n
\n Drag and drop page builder javascript library.\n
\n Built with Vanilla Js with no dependencies or build tools and Bootstrap 5\n
\n Website |\n Documentation |\n Forum |\n Twitter \n
\n\n\n## [Live Demo](https://www.vvveb.com/vvvebjs/editor.html)\n\nFor a full featured Open Source CMS using VvvebJs page builder check [Vvveb CMS](https://github.com/givanz/Vvveb)\n\nUsing [Vvveb landing page template](https://github.com/givanz/landing) for demo page and Bootstrap 5 sections and blocks.\n\n![](\"https://www.vvveb.com/img/dark-theme.png\")
\n![](\"https://www.vvveb.com/img/light-theme.png\")
\n\n### Features\n\n* Components and blocks/snippets drag and drop and in page insert.\n* Undo/Redo operations.\n* One or two panels interface.\n* File manager and component hierarchy navigation.\n* Add new page modal with template and folder options.\n* Live code editor with codemirror plugin syntax highlighting.\n* Image upload with example php script included.\n* Page download or export html or save page on server with example php script included.\n* Components/Sections/Blocks list search.\n* Bootstrap 5 components.\n* Media gallery with integrated CC0 image search and server upload support.\n* Image, video and iframe elements resize handles.\n* Elements breadcrumb for easier parent elements selection.\n* Full Google fonts list support for font selection.\n* Youtube, Google maps, Charts.js etc widgets.\n* Optional CKEditor plugin to replace builtin text editor.\n* Zip download plugin to download the page and all assets as zip file.\n* SVG Icon component bundled with hundreds of free icons.\n* Animate on scroll support for page elements.\n* Theme global typography and color pallette editor.\n\n\nBy default the editor comes with Bootstrap 5 and Widgets components and can be extended with any kind of components and inputs.\n\n## Install\n\n* Clone the repository \n```bash\n#git 2.13+ \ngit clone --recurse-submodules https://github.com/givanz/VvvebJs\n\n# older git versions \ngit clone --recursive https://github.com/givanz/VvvebJs\n```\n\n* Pull changes \n```bash\ngit pull --recurse-submodules\n```\n\n## Usage\n\nClone the repository or download a release then open `editor.html`\n\nBecause of browser iframe security you need to use a webserver such as apache/xampp and open `http://localhost/editor.html`\n\nTo disable browser security and open `editor.html` without installing a webserver run chrome with\n\n```bash\nchrome --disable-web-security --user-data-dir=/tmp/temporary_profile editor.html\n```\n\nTo use the image upload or page save feature you need to have php installed.\n\n\n## Docker\n\n### Local development\n\nFrom VvvebJs folder run\n\n```bash\ndocker-compose up\n```\n\n### Image \n\nOr run image \n\n```bash\ndocker run -p 8080:80 vvveb/vvvebjs\n```\n\nOpen http://localhost:8080/editor.php or http://localhost:8080/editor.html\n\n## Save page\n\nSave page function needs either php or node\n\n### PHP\n\nIf you use docker, xampp or a shared hosting account php should work without any change.\n\nSaving is done using [save.php](save.php)\n\n### Node\n\nFor node go to VvvebJs folder and run\n\n```bash\nnpm install express\nnode save.js\n```\n\nOpen http://localhost:8080/editor.html\n\nSaving is done using [save.js](save.js)\n\n\n## [Landing template](https://github.com/givanz/landing)\n\nTo make changes to template files or sections run the following commands from `demo/landing` folder\n\n### Install gulp\n\n```bash\nnpm i\n```\n\n### Generate html files\n\nTemplate html partials are located in `demo/landing/src` folder.\n\n```bash\nnpm run gulp\n```\n\n### Watch for changes for development\n\n```bash\nnpm run gulp watch\n```\n\n### Generate sections list for page builder\n\nSections html files are located in `demo/landing/src/sections` folder grouped in folders with the section group name.\n\n```bash\nnpm run gulp sections\n```\n\n### Generate blocks list\n\nBlocks html files are located in `demo/landing/src/blocks` folder grouped in folders with the blocks group name.\n\n```bash\nnpm run gulp blocks\n```\n\n### Generate screenshots for sections\n\n```bash\nnpm run gulp screenshots\n```\n\n## Usage\n\n### Initialize example\n\n\n```js\n\n\n\n\n\n\t\n\n\t\n\n\t\n\n\t\n\t\n\n