{"repo":"givanz/VvvebJs","free":true,"listed":false,"github":"https://github.com/givanz/VvvebJs","clone":"git clone https://github.com/givanz/VvvebJs.git","description":"Drag and drop page builder library written in vanilla javascript without dependencies or build tools.","language":"JavaScript","stars":8595,"topics":["bootstrap","bootstrap5","builder","drag-and-drop","editor","free","javascript","low-code","no-code","nocode","nodejs","open-source","page-builder","scss","site-generator","ui","vanilla-javascript","website-builder","website-generation","wysiwyg"],"license":"Apache-2.0","category":"page_builder","readme_excerpt":"# VvvebJs\n\n

\n \"Vvveb\"\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 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\n\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