Online Webpage Builder With jQuery And Bootstrap - VvvebJs

File Size: 14 MB
Views Total: 34329
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Online Webpage Builder With jQuery And Bootstrap - VvvebJs

VvvebJs is a jQuery and Bootstrap based online web page builder/creator where the users are allowed to add/remove Bootstrap 4 components via drag and drop. Licensed under the Apache License 2.0.


  • Redo/undo operations.
  • Fullscreen mode.
  • Export html.
  • Mobile/tablet/desktop views.
  • Move elements.
  • Clone elements.
  • Code editor.
  • Syntax highlight.

See also:

How to use it:

1. Load the necessary jQuery library and Bootstrap 4 framework in the document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Load the VvvebJs web page builder's JavaScript and CSS files in the document.

<!-- hotkey plugin-->
<script src="js/jquery.hotkeys.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-bootstrap4.js"></script> 
<script src="libs/builder/components-widgets.js"></script>

3. Initialize the web page builder.

$(document).ready(function() {
  Vvveb.Builder.init('demo/index.html', function() {
    //load code after iframe is loaded here

4. Override the default CSS variables in the _variables.scss.

// Variables
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.

// Color system

// stylelint-disable
$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black:    #000 !default;




  • Includes Vvveb landing template from Vvveb CMS as default edit page with custom template sections and gulp automatic sections and screenshots generation from html source.


  • New input VideoInput to use for <video> elements.


  • Latest VvvebJs + Vvveb landing template bundle


  • Updated Boostrap 5.3


  • Dark mode, align option for image component
  • rename and delete buttons for media modal
  • new duplicate button for file manager
  • updated Bootstrap to 5.3.0 alpha.


  • Bugfixes

v1.6.0 (2022-11-04)

  • Updated Boostrap version to 5.22
  • changed default youtube video for video component to fix bug
  • fixed color input empty color error


  • Updated to Bootstrap v5.2.0-beta1 and added global style editor for bootstrap css vars in configuration tab


  • Image resize, bootstrap 5.0.1 update, boostrap color picker fix


  • Added page sections feature.

v1.4.1 (2019-07-16)

  • Fixed properties collapse section to work with left/right panels.

v1.4 (2019-03-25)

  • Added section box to add components and blocks anywhere on the page by clicking (+) plus button without the need to drag and drop.
  • Added designer mode to put components anywhere on the page with position absolute.


  • Added support for non editable area.


  • New page feature allows adding new page in file manager.


  • Removed redundant htmlAttr: "id" from heading component and changed text input event from keyup to blur to make undo easier
  • Ui improvments to spacing and colors
  • Changed all icons to line awesome


  • Bugfix


  • Added disable cache flag parameter to load page to prevent browser caching interfering with ajax save.


  • Added image upload with support for backend upload with ajax


  • Added file upload option to image input


  • Added component tree for file manager.


  • Added Vvveb.dragIcon option to switch from using component image or component html for drag icon.
  • Improved component drag and drop and added droppable highlight.


  • Added file manager, new widgets components, collapsible panels for components and properties, new properties for html elements like padding, margin, typography etc.


  • Added code editor support (default textarea) and codemirror plugin for code editor syntax highlight,
  • Added width and height for video an maps widget.
  • Fixed base component class input editing bug.
  • Fixed unclosed div in editor.html and updated bootstrap 4


  • Added support for style html attribute by using htmlAttr="style" key will be used as css property

This awesome jQuery plugin is developed by givanz. For more Advanced Usages, please check the demo page or visit the official website.