Home

Overview

VvvebJs is a full featured powerful page builder written in Vanilla js with no dependencies and Bootstrap 5 css framework.

Quick start

The editor html is located in editor.html and to load the demo editor the following scripts are included.

<!-- jquery-->
<script src="js/jquery.min.js"></script>
<!-- Enable shortcut support such as ctrl+z for undo and ctrl+e for export etc-->
<script src="js/jquery.hotkeys.js"></script>


<!-- bootstrap-->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<!-- builder code-->
<!-- This is the main editor code -->
<script src="libs/builder/builder.js"></script>

<!-- undo manager-->
<script src="libs/builder/undo.js"></script>

<!-- inputs-->
<!-- The inputs library, here is the code for inputs such as text, select etc used for component properties -->
<script src="libs/builder/inputs.js"></script>

<!-- components-->
<!-- Components for Bootstrap 4 group -->
<script src="libs/builder/components-bootstrap4.js"></script>
<!-- Components for Widgets group -->
<script src="libs/builder/components-widgets.js"></script>


<!-- plugins -->

<!-- code mirror libraries - code editor syntax highlighting for html editor -->
<link href="libs/codemirror/lib/codemirror.css" rel="stylesheet"/>
<link href="libs/codemirror/theme/material.css" rel="stylesheet"/>
<script src="libs/codemirror/lib/codemirror.js"></script>
<script src="libs/codemirror/lib/xml.js"></script>
<script src="libs/codemirror/lib/formatting.js"></script>

<!-- code mirror vvveb plugin -->
<!-- replaces default textarea as html code editor with codemirror-->
<script src="libs/builder/plugin-codemirror.js"></script>	

To initialize the editor Vvveb.Builder.init is called.

The first parameter is the url to load for editing, this must be on the same subdomain to allow editing.

The second parameter is a function to call when the page is finished loading, by default the editor Gui.init() is called.

let defaultPages = {
 "narrow-jumbotron":{name:"narrow-jumbotron", title:"Jumbotron",  url: "demo/narrow-jumbotron/index.html", file: "demo/narrow-jumbotron/index.html"},
 "album":{name:"album", title:"Album",  url: "demo/album/index.html", file: "demo/album/index.html", folder:"content"},
 "blog":{name:"blog", title:"Blog",  url: "demo/blog/index.html", file: "demo/blog/index.html", folder:"content"},
 "carousel":{name:"carousel", title:"Carousel",  url: "demo/carousel/index.html",  file: "demo/carousel/index.html", folder:"content"},
 "offcanvas":{name:"offcanvas", title:"Offcanvas",  url: "demo/offcanvas/index.html", file: "demo/offcanvas/index.html", folder:"content"},
 "pricing":{name:"pricing", title:"Pricing",  url: "demo/pricing/index.html", file: "demo/pricing/index.html", folder:"ecommerce"},
 "product":{name:"product", title:"Product",  url: "demo/product/index.html", file: "demo/product/index.html", folder:"ecommerce"}  
};	

Vvveb.Gui.init();
let pages = defaultPages;

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.TreeList.init();
Vvveb.Breadcrumb.init();

Vvveb.FileManager.addPages(pages);
Vvveb.FileManager.loadPage(pages[firstPage]["name"]);
Vvveb.Gui.toggleRightColumn(false);
Vvveb.Breadcrumb.init();
</script>

Structure

Component Group is a collection of Components, for example Bootstrap 5 group is composed of Components such as Button and Grid, this object is used only for grouping components in the editor left panel.

For example Widgets component group has only two components video and maps and is defined as

Vvveb.ComponentsGroup['Widgets'] = ["widgets/googlemaps", "widgets/video"];

A Component is an object that provides html that can be dropped on the canvas and also properties that can be edited when the component is selected.

The html link Component that has Url and Target properties is defined as

Vvveb.Components.extend("_base", "html/link", {
    nodes: ["a"],//for what nodes the component is loaded when clicking on page
    name: "Link",//name displayed in the components list
    html: '<a href="#" rel="noopener">Link Text</a>',//the html code used to create the element when the component is dropped on the page
    image: "icons/link.svg",//image displayed in the components list
    properties: [{//inputs displayed when the component is selected on the page
        name: "Url",
        key: "href",
        htmlAttr: "href",//what html attribute the input should change/display
        inputtype: LinkInput//what input type is used to edit this property
    }, {
        name: "Target",
        key: "target",
        htmlAttr: "target",
        inputtype: TextInput
    }]
});

An Input object is used in Component properties collection for editing the property, for example text input, select, color, grid row etc For example TextInput extends Input object and is defined as

let TextInput = { ...Input, ...{
	//what events should be listened for changes and on what inputs
    events: [
	    //event, listener, child element
        ["focusout", "onChange", "input"],
	 ],

	//the event listener
	onChange: function(event, node, input) {
		if (event && event.target) {
			//triger the propertyChange event for the editor to update the element
			
			const e = new CustomEvent('propertyChange', { detail: {value : input.value ?? this.value, input: this, origEvent:event} });
			event.currentTarget.dispatchEvent(e);
		}
	},

	//the editor will call this method to set the initial value loadad from the element
	setValue: function(value) {
		this.element[0].querySelector('input').value = value;
	},

	//this method creates the input elements,  the render method uses the template inside editor.html, for this input is `<script id="vvveb-input-textinput"><input type="text"></script>`
	init: function(data) {
		return this.render("textinput", data);
	},
  }
);

Inputs also require a template that is defined as a <script> tag in the editor html (inside editor.html) with the id vvveb-input-inputname for example for text input is vvveb-input-textinput and is defined as

<script id="vvveb-input-textinput" type="text/html">
	
	<div>
		<input name="{%=key%}" type="text" class="form-control"/>
	</div>
	
</script>