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.

Features:

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

See also:

• jQuery Based Content Editor and Layout Builder - KEditor
• jQuery & jQuery UI Plugin For Bootstrap Grid Editor - Grid Editor

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
    Vvveb.Gui.init();
  });
});

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;

...

Changelog:

2023-09-03

• 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.

2023-08-09

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

2023-07-24

• Latest VvvebJs + Vvveb landing template bundle

2023-06-01

• Updated Boostrap 5.3

2023-03-11

• 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.

2023-02-04

• 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

2022-06-26

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

2021-05-23

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

2020-07-28

• 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.

2019-02-24

• Added support for non editable area.

2019-02-03

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

2019-01-13

• 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

2018-12-23

• Bugfix

2018-12-16

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

2018-08-25

• Added image upload with support for backend upload with ajax

2018-08-24

• Added file upload option to image input

2018-07-25

• Added component tree for file manager.

2018-06-25

• 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.

2018-05-17

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

2018-04-03

• 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

2018-03-28

• 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.