On-line Webpage Builder With jQuery And Bootstrap – VvvebJs

VvvebJs is a jQuery and Bootstrap based mostly on-line net web page builder/creator the place the customers are allowed so as to add/take away Bootstrap 4 elements through drag and drop. Licensed underneath the Apache License 2.0.

Options:

• Redo/undo operations.
• Fullscreen mode.
• Export html.
• Cell/pill/desktop views.
• Transfer components.
• Clone components.
• Code editor.
• Syntax spotlight.

See additionally:

Find out how to use it:

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

<hyperlink 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 information 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.

$(doc).prepared(perform() {
  Vvveb.Builder.init('demo/index.html', perform() {
    //load code after iframe is loaded right here
    Vvveb.Gui.init();
  });
});

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

// Variables
//
// Variables ought to comply with the `$component-state-property-size` components for
// constant naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.


//
// Colour 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:

2024-02-12

• Drag component enhancements to keep away from components leaping round.
• Parts icons update.
• New elements: oEmbed elements, swiper carousel, tabs, accordion, flip-box, font-icon, social icons.
• New occasions: vvveb.FileManager.deletePage, vvveb.FileManager.renamePage, vvveb.FileManager.addPage, vvveb.FileManager.loadPage, vvveb.Breadcrumb.click on, vvveb.Breadcrumb.hover
• ChatGPT assistant plugin.
• Svg icons default stroke and fill repair to show correctly on darkish mode.
• Grid and column elements extends base to exhibits kinds choices.
• Modified pages file to incorporate path for brand new save perform modifications.

2023-09-03

• Contains Vvveb touchdown template from Vvveb CMS as default edit web page with customized template sections and gulp computerized sections and screenshots technology from html supply.

2023-08-09

• New enter VideoInput to make use of for <video> components.

2023-07-24

• Newest VvvebJs + Vvveb touchdown template bundle

2023-06-01

2023-03-11

• Darkish mode, align choice for picture part
• rename and delete buttons for media modal
• new duplicate button for file supervisor
• up to date Bootstrap to five.3.0 alpha.

2023-02-04

v1.6.0 (2022-11-04)

• Up to date Boostrap model to five.22
• modified default youtube video for video part to repair bug
• fastened shade enter empty shade error

2022-06-26

• Up to date to Bootstrap v5.2.0-beta1 and added world fashion editor for bootstrap css vars in configuration tab

2021-05-23

• Picture resize, bootstrap 5.0.1 replace, boostrap shade picker repair

2020-07-28

• Added web page sections function.

v1.4.1 (2019-07-16)

• Mounted properties collapse part to work with left/proper panels.

v1.4 (2019-03-25)

• Added part field so as to add elements and blocks wherever on the web page by clicking (+) plus button with out the necessity to drag and drop.
• Added designer mode to place elements wherever on the web page with place absolute.

2019-02-24

• Added help for non editable space.

2019-02-03

• New web page function permits including new web page in file supervisor.

2019-01-13

• Eliminated redundant htmlAttr: “id” from heading part and altered textual content enter occasion from keyup to blur to make undo simpler
• Ui improvments to spacing and colours
• Modified all icons to line superior

2018-12-23

2018-12-16

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

2018-08-25

• Added picture add with help for backend add with ajax

2018-08-24

• Added file add choice to picture enter

2018-07-25

• Added part tree for file supervisor.

2018-06-25

• Added Vvveb.dragIcon choice to modify from utilizing part picture or part html for drag icon.
• Improved part drag and drop and added droppable spotlight.

2018-05-17

• Added file supervisor, new widgets elements, collapsible panels for elements and properties, new properties for html components like padding, margin, typography and so on.

2018-04-03

• Added code editor help (default textarea) and codemirror plugin for code editor syntax spotlight,
• Added width and top for video an maps widget.
• Mounted base part class enter enhancing bug.
• Mounted unclosed div in editor.html and up to date bootstrap 4

2018-03-28

• Added help for fashion html attribute by utilizing htmlAttr=”fashion” key can be used as css property

This superior jQuery plugin is developed by givanz. For extra Superior Usages, please verify the demo web page or go to the official web site.