Drag and Drop Website Builder Javascript Library | VvvebJs

drag-and-drop-website-builder

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

drag and drop website builder javascript library, vvvebjs documentation, drag and drop template builder jquery, vvvebjs github, drag and drop page builder jquery

Features:

  • Redo / Undo operations.
  • Full-screen mode.
  • HTML export.
  • Mobile / tablet / desktop views.
  • MoveĀ items.
  • Reproduction or clone items.
  • Code Editor.
  • Highlight syntax.

How to make use of it:

1. Load the mandatory jQuery library and Bootstrap 4 framework within the doc.

<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 net web page builder’s JavaScript and CSS files within the doc.

<!-- 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 net 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 within 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;

...

Online Webpage Builder With jQuery, VvvebJs Plugin/Github


See Demo And Download

Official Website(givanz): Click Here

This superior jQuery/javascript plugin is developed by givanz. For extra Advanced usage, please go to the official website.

Share