vvveb/vvvebjs
Drag and drop page builder javascript library.
1.1K
Drag and drop page builder javascript library.
Built with Vanilla Js with no dependencies and Bootstrap 5
Website | Documentation | Forum | Twitter
For a full featured Open Source CMS using VvvebJs page builder check Vvveb CMS
Using Vvveb landing page template for demo page and Bootstrap 5 sections and blocks.
docker run -p 8080:80 vvveb/vvvebjs
Persistent storage
sudo docker run -p 8080:80 \
--mount type=bind,source="$(pwd)",target=/var/www/vvveb/public \
vvveb/vvvebjs
By default the editor comes with Bootstrap 5 and Widgets components and can be extended with any kind of components and inputs.
#git 2.13+
git clone --recurse-submodules https://github.com/givanz/VvvebJs
# older git versions
git clone --recursive https://github.com/givanz/VvvebJs
git pull --recurse-submodules
Clone the repository or download a release then open editor.html
Because of browser iframe security you need to use a webserver such as apache/xampp and open http://localhost/editor.html
To use the image upload or page save feature you need to have php installed.
Save page function needs either php or node
If you use xampp or a shared hosting account php should work without any change.
Saving is done using save.php
For node go to VvvebJs folder and run
npm install express
node save.js
Open http://localhost:8080/editor.html
Saving is done using save.js
From VvvebJs folder run
docker-compose up
Open http://localhost:8080/editor.php or http://localhost:8080/editor.html
Or install image
docker run -p 8080:80 vvveb/vvvebjs
To make changes to template files or sections run the following commands from demo/landing
folder
npm i
Template html partials are located in demo/landing/src
folder.
npm run gulp
npm run gulp watch
Sections html files are located in demo/landing/src/sections
folder grouped in folders with the section group name.
npm run gulp sections
Blocks html files are located in demo/landing/src/blocks
folder grouped in folders with the blocks group name.
npm run gulp blocks
npm run gulp screenshots
<!-- bootstrap-->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- builder code-->
<script src="libs/builder/builder.js"></script>
<!-- undo manager-->
<script src="libs/builder/undo.js"></script>
<!-- inputs-->
<script src="libs/builder/inputs.js"></script>
<!-- components-->
<script src="libs/builder/components-bootstrap5.js"></script>
<script src="libs/builder/components-widgets.js"></script>
<script>
let pages = [
{
name:"narrow-jumbotron",
title:"Jumbotron",
url: "demo/narrow-jumbotron/index.html",
file: "demo/narrow-jumbotron/index.html"
},
{name:"landing-page", title:"Landing page", url: "demo/landing/index.html", file: "demo/landing/index.html"},
];
let firstPage = Object.keys(pages)[0];
Vvveb.Builder.init(pages[firstPage]["url"], function() {
//load code after page is loaded here
});
Vvveb.Gui.init();
Vvveb.FileManager.init();
Vvveb.SectionList.init();
Vvveb.Breadcrumb.init();
Vvveb.FileManager.addPages(pages);
Vvveb.FileManager.loadPage(pages[firstPage]["name"]);
Vvveb.Gui.toggleRightColumn(false);
Vvveb.Breadcrumb.init();
<script>
For editor html and components/input javascript templates edit editor.html
For css changes edit scss/editor.scss and scss/_builder.scss
To compile scss to css first install gulp
npm i
Then you can run
npm run gulp
or use watch to compile on file change.
npm run gulp watch
For documentation check the wiki
Apache 2.0
docker pull vvveb/vvvebjs