### Install Feather Icons with npm
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/feather/README.md
Install the Feather Icons library using npm for project integration.
```shell
npm install feather-icons
```
--------------------------------
### Install Ikonate with npm
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/ikonate/README.md
Install the Ikonate package using the npm package manager.
```bash
npm install ikonate
```
--------------------------------
### Install Node.js Dependencies for Landing Template
Source: https://github.com/givanz/vvvebjs/blob/master/README.md
Install the necessary Node.js dependencies for the landing template using npm. This command should be run from the `demo/landing` folder.
```bash
npm i
```
--------------------------------
### Get Flutter packages
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/unicons/README.md
Run this command in your Flutter project directory to download and install the specified dependencies, including Unicons.
```bash
flutter pub get
```
--------------------------------
### Install npm Dependencies for Build
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/ikonate/README.md
Install npm dependencies required to generate demo files and SVG sprites.
```bash
npm install
```
--------------------------------
### Install Eva Icons via NPM
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/eva-icons/README.md
Install the eva-icons package using npm. This is the recommended method for Node.js projects.
```bash
npm i eva-icons
```
--------------------------------
### Install and Use React Heroicons
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/heroicons/README.md
Install the @heroicons/react package via npm. Import icons individually as React components. Supports outline and solid styles from different import paths.
```sh
npm install @heroicons/react
```
```javascript
import { BeakerIcon } from '@heroicons/react/solid'
function MyComponent() {
return (
...
)
}
```
--------------------------------
### Install CoreUI Icons via Yarn
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/coreui-icons/README.md
Install the CoreUI Icons package using Yarn for use in your projects.
```shell
yarn add @coreui/icons
```
--------------------------------
### Install css.gg via npm
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/css.gg/README.md
Install the latest version of css.gg using npm. This is the recommended way to include the icon library in your project.
```shell
npm i css.gg
```
--------------------------------
### Full HTML Example with Icons
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/css.gg/README.md
A complete HTML document demonstrating how to include and use CSS.gg icons with 'i', 'div', and 'gg-icon' tags.
```html
Document
```
--------------------------------
### Install Tabler Icons with npm
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/tabler-icons/README.md
Install the Tabler Icons package using npm for use in your project.
```bash
npm install @tabler/icons --save
```
--------------------------------
### Local React Component Example
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/css.gg/README.md
Import and use icons as local React components by specifying the correct import path.
```javascript
import React from 'react';
// local path
import { ICONNAME } from "./ {ICONNAME} "
function App() {
return (
);
}
export default App;
```
--------------------------------
### Install CoreUI Icons via NPM
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/coreui-icons/README.md
Install the CoreUI Icons package using npm for use in your Node.js projects.
```shell
npm install @coreui/icons --save
```
--------------------------------
### Initialize Vvveb.js Builder
Source: https://github.com/givanz/vvvebjs/blob/master/README.md
Include these scripts to bootstrap the Vvveb.js builder. This example initializes the builder with page data and sets up various GUI components.
```html
```
--------------------------------
### Install Feather Icons with npm
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/feather/README.md
Install the feather-icons package using npm for use in your project. This step can be skipped if using a CDN.
```shell
npm install feather-icons --save
```
--------------------------------
### Clone Ikonate Repository
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/ikonate/README.md
Clone the Ikonate Git repository to manually install the icons in your project.
```bash
git clone https://github.com/eucalyptuss/ikonate.git
```
--------------------------------
### Example Usage of SVG Sprite
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/css.gg/README.md
Demonstrates how to use a downloaded SVG sprite file within an HTML document by referencing the icon's ID.
```html
Document
```
--------------------------------
### Install CoreUI Icons via CDN
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/coreui-icons/README.md
Include the CoreUI Icons CSS file in your HTML to use the icons. You can include all icons or specific sets like free, brand, and flag icons.
```html
```
```html
```
--------------------------------
### Install Ionicons Web Component
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/ionicons/readme.md
Include this script tag near the end of your page to enable the Ionicons Web Component if not using Ionic Framework.
```html
```
--------------------------------
### Include Eva Icons from NPM
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/eva-icons/README.md
Include the Eva Icons script in your project after installing via NPM. The path may vary based on your build system.
```html
```
--------------------------------
### Define a Custom Image Component
Source: https://github.com/givanz/vvvebjs/wiki/Components
Example of a complete component definition for an image, showcasing various configuration options and event handlers. This includes setting the component's name, image, default HTML, detection nodes, classes, attributes, and defining properties for editing.
```javascript
Vvveb.Components.extend("_base", "html/image", {
name: "Image",
image: "icons/image.svg",
html: '
',
nodes: ["img"],
classes: ["btn", "btn-link"],
attributes: ["data-component-maps"],
afterDrop: function (node) {},
init: function (node) {},
beforeInit: function (node) {},
onChange: function (node, property, value) {},
resizable:true,//show select box resize handlers
properties: [{
name: "Id",
key: "id",
htmlAttr: "id",
inputtype: TextInput
}
]);
```
--------------------------------
### Font Compilation: Specify FontForge Path
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/tabler-icons/README.md
Configure the path to the FontForge executable in `compile-options.json` if it's not in the system's PATH. This is particularly useful for custom installations.
```json
{
"fontForge":"/Applications/FontForge.app/Contents/MacOS/FontForge"
}
```
--------------------------------
### Toggle and Select Input for Class Properties
Source: https://github.com/givanz/vvvebjs/wiki/Components
Shows examples of ToggleInput for a 'Disabled' attribute and SelectInput for 'Size' class on a Bootstrap button, utilizing 'data' for options and 'validValues' for class constraints.
```javascript
//ToggleInput
{
name: "Disabled",
key: "disabled",
htmlAttr: "disabled",
inputtype: ToggleInput,
data: {
on: "disabled-true",
off: "disabled-false"
}
}
//SelectInput
{
name: "Size",
key: "size",
htmlAttr: "class",
inputtype: SelectInput,
validValues: ["btn-lg", "btn-sm"],
data: {
options: [{
value: "",
text: "Default"
}, {
value: "btn-lg",
text: "Large"
}, {
value: "btn-sm",
text: "Small"
}]
}
```
--------------------------------
### Include Remix Icon via CDN
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/remix-icon/README.md
Link to the Remix Icon CSS file using a CDN in the `` section of your HTML document for quick integration without installation.
```html
```
--------------------------------
### Vvveb.Gui.init()
Source: https://context7.com/givanz/vvvebjs/llms.txt
Initializes GUI actions and registers keyboard shortcuts for various editor functions like saving, undo/redo, and toggling panels.
```APIDOC
## Vvveb.Gui.init()
### Description
Initializes GUI actions and keyboard shortcuts. Binds `data-vvveb-action` attributes to `Vvveb.Gui` methods and registers shortcuts for save, undo, redo, tree list, and code editor.
### Method
`Vvveb.Gui.init()`
### Usage Examples
```js
// Initialize GUI – must be called after Builder.init()
Vvveb.Gui.init();
// Toggle dark/light mode
Vvveb.Gui.darkMode.call(document.querySelector(".btn-dark-mode"));
// Toggle the bottom code editor panel
Vvveb.Gui.toggleEditor();
// Switch responsive viewport (sm | md | lg | xl | xxl)
Vvveb.Gui.viewport.call(document.querySelector('[data-view="md"]'));
// Trigger page download as HTML file
Vvveb.Gui.download();
// Toggle preview mode
Vvveb.Gui.preview();
// Save via AJAX
Vvveb.Gui.saveAjax(null, "save.php", document.querySelector(".save-btn"));
// Undo / Redo
Vvveb.Gui.undo();
Vvveb.Gui.redo();
```
```
--------------------------------
### Run Build Command
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/ikonate/README.md
Execute the build command from the main repository directory to generate demo files and SVG sprites.
```bash
npm run build
```
--------------------------------
### Import All Icons CSS
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/css.gg/README.md
Import all CSS icons at once using @import. Options include css.gg, UNPKG, and JSDelivr.
```css
/* css.gg */
@import url('https://css.gg/css');
/* UNPKG */
@import url('https://unpkg.com/css.gg/icons/all.css');
/* JSDelivr */
@import url('https://cdn.jsdelivr.net/npm/css.gg/icons/all.css');
```
--------------------------------
### Initialize Vvveb.Gui and Keyboard Shortcuts
Source: https://context7.com/givanz/vvvebjs/llms.txt
Binds HTML attributes to Vvveb.Gui methods and registers essential keyboard shortcuts for actions like save, undo, redo, and editor toggling. Must be called after Builder.init().
```javascript
// Initialize GUI – must be called after Builder.init()
Vvveb.Gui.init();
// Toggle dark/light mode
Vvveb.Gui.darkMode.call(document.querySelector(".btn-dark-mode"));
// Toggle the bottom code editor panel
Vvveb.Gui.toggleEditor();
// Switch responsive viewport (sm | md | lg | xl | xxl)
// Equivalent to clicking a responsive breakpoint button
document.querySelector('[data-view="md"]').dataset.view = "md";
Vvveb.Gui.viewport.call(document.querySelector('[data-view="md"]'));
// Trigger page download as HTML file
Vvveb.Gui.download();
// Toggle preview mode (disables editing interactions)
Vvveb.Gui.preview();
// Save via AJAX (triggered by Ctrl+S shortcut internally)
Vvveb.Gui.saveAjax(null, "save.php", document.querySelector(".save-btn"));
// Undo / Redo
Vvveb.Gui.undo();
Vvveb.Gui.redo();
```
--------------------------------
### Vvveb.Builder.init(url, callback)
Source: https://context7.com/givanz/vvvebjs/llms.txt
Initializes the VvvebJs page builder by loading a target HTML page into the editor iframe. It sets up essential editor functionalities like drag-and-drop and highlight/select overlays. The callback function is executed once the iframe has finished loading. This method must be called before any other Builder methods.
```APIDOC
## Vvveb.Builder.init(url, callback)
### Description
Loads the target HTML page into the editor iframe, sets up drag-and-drop handlers, the highlight/select overlay, and fires `callback` when the iframe finishes loading. Must be called before any other Builder method.
### Method
JavaScript Function
### Parameters
- **url** (string) - Required - The URL of the HTML page to load into the editor.
- **callback** (function) - Required - A function to be called after the iframe has finished loading.
### Request Example
```javascript
// Include dependencies in editor.html, then initialize:
//
//
//
//
//
//
//
const pages = [
{ name: "home", title: "Home", url: "demo/narrow-jumbotron/index.html", file: "demo/narrow-jumbotron/index.html" },
{ name: "landing", title: "Landing", url: "demo/landing/index.html", file: "demo/landing/index.html" },
];
// Boot the builder with the first page
Vvveb.Builder.init(pages[0].url, function () {
console.log("Builder ready – iframe loaded");
});
// Initialize UI subsystems
Vvveb.Gui.init();
Vvveb.FileManager.init();
Vvveb.SectionList.init();
Vvveb.Breadcrumb.init();
Vvveb.TreeList.init();
// Register all pages and load the first one
Vvveb.FileManager.addPages(pages);
Vvveb.FileManager.loadPage(pages[0].name);
// Hide right panel for single-panel layout
Vvveb.Gui.toggleRightColumn(false);
```
### Response
This method does not return a value, but initializes the builder and executes the callback upon successful iframe load.
```
--------------------------------
### vvveb.iframe.loaded
Source: https://github.com/givanz/vvvebjs/wiki/Events
This event is triggered by the editor after the page/iframe has finished loading and the editor setup is complete.
```APIDOC
## vvveb.iframe.loaded
### Description
The editor triggers this event after the page/iframe is loaded and the the editor finished setting up the page.
### Event Payload
The detail parameter is set to iframe document object.
```javascript
new CustomEvent("vvveb.iframe.loaded", {detail: self.frameDoc}));
```
```
--------------------------------
### Import Unicons in Dart
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/unicons/README.md
Import the Unicons package into your Dart code to start using its Flutter components.
```dart
import 'package:unicons/unicons.dart';
```
--------------------------------
### Initialize Vvveb.js Editor
Source: https://github.com/givanz/vvvebjs/blob/master/editor.html
Initializes the Vvveb.js builder with the first page from the provided list and then initializes the GUI and other components.
```javascript
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.StyleList.init();
Vvveb.TreeList.init();
Vvveb.Breadcrumb.init();
Vvveb.CssEditor.init();
Vvveb.FileManager.addPages(pages);
Vvveb.FileManager.loadPage(pages[firstPage]["name"]);
Vvveb.Gui.toggleRightColumn(false);
Vvveb.Breadcrumb.init();
```
--------------------------------
### Import Iconoir in JavaScript
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/iconoir/README.md
Import a specific icon from the iconoir package into your JavaScript project. Ensure you have installed the package first.
```javascript
import Iconoir from 'iconoir/icons/iconoir.svg'
```
--------------------------------
### Import Boxicons Module
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/boxicons/README.md
Import the Boxicons module in your JavaScript file after installation. This makes the icon set available for use.
```javascript
import 'boxicons';
```
--------------------------------
### Number Input with Initialization for Style Properties
Source: https://github.com/givanz/vvvebjs/wiki/Components
Configures a 'Width' property using NumberInput for style, demonstrating the use of the 'init' function to parse and set the initial value correctly by removing 'px'.
```javascript
{
name: "Width",
key: "width",
htmlAttr: "style",
parent:"",
inputtype: NumberInput,//can also be replaced with RangeInput
data: {
value: "320",//default
min: "50",
max: "1024",
step: "10"
},
init: function (node) {//use init because number input does not ignore "px"
return parseInt(node.style.width);//remove px
}
}
```
--------------------------------
### Basic HTML Structure with Feather Icons
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/feather/README.md
A minimal HTML file demonstrating how to include Feather Icons via CDN and use them with the `feather.replace()` method.
```html
```
--------------------------------
### CSS Customisation Parameters
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/ikonate/README.md
Example CSS properties that can be used to customise Ikonate icons when used as inline SVG or SVG sprite.
```css
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
```
--------------------------------
### Build All Assets with Gulp
Source: https://github.com/givanz/vvvebjs/wiki/Sections
The 'npm run gulp' command is used to build all necessary assets, including sections, blocks, and screenshots, for the VvvebJs project.
```bash
npm run gulp
```
--------------------------------
### Trigger Get HTML After Event
Source: https://github.com/givanz/vvvebjs/wiki/Events
This event is triggered by Vvveb.Builder.getHtml after HTML processing is finished. The detail parameter is the processed document object.
```javascript
new CustomEvent("vvveb.getHtml.after", {detail: doc}));
```
--------------------------------
### Trigger Get HTML Before Event
Source: https://github.com/givanz/vvvebjs/wiki/Events
This event is triggered by Vvveb.Builder.getHtml before helpers are removed and processing occurs. The detail parameter is the document object.
```javascript
new CustomEvent("vvveb.getHtml.before", {detail: document});
```
--------------------------------
### Generate Section Screenshots with Gulp
Source: https://github.com/givanz/vvvebjs/wiki/Sections
Run 'gulp screenshots' to generate thumbnail images for each section, improving the visual representation in the editor.
```bash
npm run gulp screenshots
```
--------------------------------
### Example Usage of Inline SVG Sprite/Symbol
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/css.gg/README.md
Shows how to define icons as symbols within a hidden SVG element and then reference them using xlink:href.
```html
Document
```
--------------------------------
### Style and Class Properties with Validations
Source: https://github.com/givanz/vvvebjs/wiki/Components
Demonstrates properties for 'Background Color' using ColorInput and 'Type' for Bootstrap container classes using SelectInput, including class manipulation with validValues.
```javascript
properties: [
{
name: "Background Color",
key: "background-color",
htmlAttr: "style",
inputtype: ColorInput,
},
{
name: "Type",
key: "type",
htmlAttr: "class",
inputtype: SelectInput,
validValues: ["container", "container-fluid"],
data: {
options: [{
value: "container",
text: "Default"
}, {
value: "container-fluid",
text: "Fluid"
}]
} name: "Class",
key: "class",
htmlAttr: "class",
inputtype: TextInput
}]
```
--------------------------------
### SelectInput Event Definition
Source: https://github.com/givanz/vvvebjs/wiki/Inputs
Example of defining event listeners for a SelectInput component, listening for 'change' events on the 'select' element and calling the 'onChange' method.
```javascript
let SelectInput = { ...Input, ...{
events: {
//event, listener, child element
["change", "onChange", "select"],
},
...
```
--------------------------------
### Initialize VvvebJs Builder
Source: https://github.com/givanz/vvvebjs/wiki/Home
Initialize the VvvebJs editor by calling Vvveb.Builder.init. The first parameter is the URL of the page to edit, and the second is a callback function executed after the page loads.
```javascript
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();
```
--------------------------------
### Style Tabler Icons with CSS
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/tabler-icons/README.md
Apply custom styles to Tabler Icons using CSS classes. This example demonstrates changing color, size, and stroke-width.
```css
.icon-tabler {
color: red;
width: 32px;
height: 32px;
stroke-width: 1.25;
}
```
--------------------------------
### CDN Alternatives for Older Versions
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/css.gg/README.md
Access older versions (v.1.0.6) of css.gg using UNPKG or JSDelivr CDNs.
```html
https://unpkg.com/browse/css.gg@1.0.6/
```
```html
https://cdn.jsdelivr.net/npm/css.gg@1.0.6/
```
--------------------------------
### Including Open Iconic with Foundation
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/open-iconic/README.md
Link the Foundation-specific stylesheet to use Open Iconic with Foundation framework. Use the 'fi' class with the icon name.
```html
```
```html
```
--------------------------------
### Restore AOS Classes After Save
Source: https://github.com/givanz/vvvebjs/wiki/Events
Example of listening to the 'vvveb.getHtml.after' event to re-add AOS animation classes after the HTML has been saved. This restores the visual state for the editor.
```javascript
window.addEventListener("vvveb.getHtml.after", function(event) {
let doc = event.detail;
doc.querySelectorAll("[data-aos]").forEach(e => e.classList.add("aos-animate", "aos-init"));
});
```
--------------------------------
### Clean AOS Classes on Save
Source: https://github.com/givanz/vvvebjs/wiki/Events
Example of listening to the 'vvveb.getHtml.before' event to remove AOS animation classes before the HTML is saved. This ensures a clean HTML output.
```javascript
//clean aos classes on save
window.addEventListener("vvveb.getHtml.before", function(event) {
let doc = event.detail;
doc.querySelectorAll("[data-aos]").forEach(e => e.classList.remove("aos-animate", "aos-init"));
});
```
--------------------------------
### Vvveb.Styles.add()
Source: https://context7.com/givanz/vvvebjs/llms.txt
Registers global theme styles that can be applied to the entire page, useful for switching color themes or typography presets.
```APIDOC
## Vvveb.Styles.add(type, data) — Register a global theme style
### Description
Registers theme styles as CSS files that can be applied to the whole page and toggled from the Styles panel. Useful for switching between color themes or typography presets.
### Parameters
- `type` (string): A unique identifier for the style (e.g., "theme/dark").
- `data` (object): An object containing style details:
- `name` (string): The display name of the theme.
- `image` (string): Path to a preview image for the theme.
- `style` (string): Path to the CSS file for the theme.
### Usage Examples
```js
Vvveb.Styles.add("theme/dark", {
name: "Dark Theme",
image: "img/dark-theme-preview.jpg",
style: "css/themes/dark.css",
});
Vvveb.Styles.add("theme/minimal", {
name: "Minimal",
image: "img/minimal-preview.jpg",
style: "css/themes/minimal.css",
});
Vvveb.StyleGroup["Themes"] = ["theme/dark", "theme/minimal"];
// Programmatically apply a theme
Vvveb.StyleList.applyStyle("css/themes/dark.css");
// Remove active theme
Vvveb.StyleList.applyStyle(null);
```
```
--------------------------------
### TextInput Event Definition
Source: https://github.com/givanz/vvvebjs/wiki/Inputs
Example of defining event listeners for a TextInput component, specifically listening for 'keyup' events on the 'input' element and calling the 'onChange' method.
```javascript
let TextInput = { ...Input, ...{
events: {
//event, listener, child element
["keyup", "onChange", "input"],
},
...
```
--------------------------------
### Select and Manipulate Nodes with Vvveb.Builder
Source: https://context7.com/givanz/vvvebjs/llms.txt
Use Builder to programmatically select DOM nodes, load their components into the properties panel, and perform actions like moving, cloning, or deleting them. Listen for node selection events.
```javascript
// Programmatically select an element in the iframe
const targetNode = window.FrameDocument.querySelector(".hero-banner h1");
Vvveb.Builder.selectNode(targetNode);
Vvveb.Builder.loadNodeComponent(targetNode);
// Listen for node selection events
window.addEventListener("vvveb.Builder.selectNode", (e) => {
const { target } = e.detail;
console.log("Node selected:", target.tagName, target.className);
});
// Move selected node up/down in the DOM (also records undo mutation)
Vvveb.Builder.moveNodeUp();
Vvveb.Builder.moveNodeDown();
// Clone selected node
Vvveb.Builder.cloneNode();
// Delete selected node
// (Equivalent to clicking the delete button in the UI)
const node = Vvveb.Builder.selectedEl;
Vvveb.Undo.addMutation({
type: "childList",
target: node.parentNode,
removedNodes: [node],
nextSibling: node.nextSibling,
});
node.remove();
```
--------------------------------
### Editor Iframe Loaded Event
Source: https://github.com/givanz/vvvebjs/wiki/Events
This event is triggered by the editor after the page/iframe has loaded and the editor setup is complete. The detail parameter is the iframe's document object.
```javascript
new CustomEvent("vvveb.iframe.loaded", {detail: self.frameDoc}));
```
--------------------------------
### Add Custom Theme with Holder.js
Source: https://github.com/givanz/vvvebjs/blob/master/demo/product/index.html
Demonstrates how to add a custom theme named 'thumb' to Holder.js. This theme defines background and foreground colors, as well as the text to be displayed.
```javascript
Holder.addTheme('thumb', {
bg: '#55595c',
fg: '#eceeef',
text: 'Thumbnail'
});
```
--------------------------------
### Vvveb.StyleManager
Source: https://context7.com/givanz/vvvebjs/llms.txt
Manages CSS styles for elements within the Vvveb.js editor. It supports setting and getting CSS properties, handling responsive breakpoints, and managing pseudo-states.
```APIDOC
## Vvveb.StyleManager.setStyle(element, styleProp, value) / .getStyle(element, styleProp)
### Description
Manages styles through a dedicated `
',
nodes: ["img"],
classes: ["btn", "btn-link"],
attributes: ["data-component-maps"],
afterDrop: function (node) {},
init: function (node) {},
beforeInit: function (node) {},
onChange: function (node, property, value) {},
resizable:true,//show select box resize handlers
properties: [{
name: "Id",
key: "id",
htmlAttr: "id",
inputtype: TextInput
}
]);
```
--------------------------------
### Font Compilation: Specify FontForge Path
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/tabler-icons/README.md
Configure the path to the FontForge executable in `compile-options.json` if it's not in the system's PATH. This is particularly useful for custom installations.
```json
{
"fontForge":"/Applications/FontForge.app/Contents/MacOS/FontForge"
}
```
--------------------------------
### Toggle and Select Input for Class Properties
Source: https://github.com/givanz/vvvebjs/wiki/Components
Shows examples of ToggleInput for a 'Disabled' attribute and SelectInput for 'Size' class on a Bootstrap button, utilizing 'data' for options and 'validValues' for class constraints.
```javascript
//ToggleInput
{
name: "Disabled",
key: "disabled",
htmlAttr: "disabled",
inputtype: ToggleInput,
data: {
on: "disabled-true",
off: "disabled-false"
}
}
//SelectInput
{
name: "Size",
key: "size",
htmlAttr: "class",
inputtype: SelectInput,
validValues: ["btn-lg", "btn-sm"],
data: {
options: [{
value: "",
text: "Default"
}, {
value: "btn-lg",
text: "Large"
}, {
value: "btn-sm",
text: "Small"
}]
}
```
--------------------------------
### Include Remix Icon via CDN
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/remix-icon/README.md
Link to the Remix Icon CSS file using a CDN in the `` section of your HTML document for quick integration without installation.
```html
```
--------------------------------
### Vvveb.Gui.init()
Source: https://context7.com/givanz/vvvebjs/llms.txt
Initializes GUI actions and registers keyboard shortcuts for various editor functions like saving, undo/redo, and toggling panels.
```APIDOC
## Vvveb.Gui.init()
### Description
Initializes GUI actions and keyboard shortcuts. Binds `data-vvveb-action` attributes to `Vvveb.Gui` methods and registers shortcuts for save, undo, redo, tree list, and code editor.
### Method
`Vvveb.Gui.init()`
### Usage Examples
```js
// Initialize GUI – must be called after Builder.init()
Vvveb.Gui.init();
// Toggle dark/light mode
Vvveb.Gui.darkMode.call(document.querySelector(".btn-dark-mode"));
// Toggle the bottom code editor panel
Vvveb.Gui.toggleEditor();
// Switch responsive viewport (sm | md | lg | xl | xxl)
Vvveb.Gui.viewport.call(document.querySelector('[data-view="md"]'));
// Trigger page download as HTML file
Vvveb.Gui.download();
// Toggle preview mode
Vvveb.Gui.preview();
// Save via AJAX
Vvveb.Gui.saveAjax(null, "save.php", document.querySelector(".save-btn"));
// Undo / Redo
Vvveb.Gui.undo();
Vvveb.Gui.redo();
```
```
--------------------------------
### Run Build Command
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/ikonate/README.md
Execute the build command from the main repository directory to generate demo files and SVG sprites.
```bash
npm run build
```
--------------------------------
### Import All Icons CSS
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/css.gg/README.md
Import all CSS icons at once using @import. Options include css.gg, UNPKG, and JSDelivr.
```css
/* css.gg */
@import url('https://css.gg/css');
/* UNPKG */
@import url('https://unpkg.com/css.gg/icons/all.css');
/* JSDelivr */
@import url('https://cdn.jsdelivr.net/npm/css.gg/icons/all.css');
```
--------------------------------
### Initialize Vvveb.Gui and Keyboard Shortcuts
Source: https://context7.com/givanz/vvvebjs/llms.txt
Binds HTML attributes to Vvveb.Gui methods and registers essential keyboard shortcuts for actions like save, undo, redo, and editor toggling. Must be called after Builder.init().
```javascript
// Initialize GUI – must be called after Builder.init()
Vvveb.Gui.init();
// Toggle dark/light mode
Vvveb.Gui.darkMode.call(document.querySelector(".btn-dark-mode"));
// Toggle the bottom code editor panel
Vvveb.Gui.toggleEditor();
// Switch responsive viewport (sm | md | lg | xl | xxl)
// Equivalent to clicking a responsive breakpoint button
document.querySelector('[data-view="md"]').dataset.view = "md";
Vvveb.Gui.viewport.call(document.querySelector('[data-view="md"]'));
// Trigger page download as HTML file
Vvveb.Gui.download();
// Toggle preview mode (disables editing interactions)
Vvveb.Gui.preview();
// Save via AJAX (triggered by Ctrl+S shortcut internally)
Vvveb.Gui.saveAjax(null, "save.php", document.querySelector(".save-btn"));
// Undo / Redo
Vvveb.Gui.undo();
Vvveb.Gui.redo();
```
--------------------------------
### Vvveb.Builder.init(url, callback)
Source: https://context7.com/givanz/vvvebjs/llms.txt
Initializes the VvvebJs page builder by loading a target HTML page into the editor iframe. It sets up essential editor functionalities like drag-and-drop and highlight/select overlays. The callback function is executed once the iframe has finished loading. This method must be called before any other Builder methods.
```APIDOC
## Vvveb.Builder.init(url, callback)
### Description
Loads the target HTML page into the editor iframe, sets up drag-and-drop handlers, the highlight/select overlay, and fires `callback` when the iframe finishes loading. Must be called before any other Builder method.
### Method
JavaScript Function
### Parameters
- **url** (string) - Required - The URL of the HTML page to load into the editor.
- **callback** (function) - Required - A function to be called after the iframe has finished loading.
### Request Example
```javascript
// Include dependencies in editor.html, then initialize:
//
//
//
//
//
//
//
const pages = [
{ name: "home", title: "Home", url: "demo/narrow-jumbotron/index.html", file: "demo/narrow-jumbotron/index.html" },
{ name: "landing", title: "Landing", url: "demo/landing/index.html", file: "demo/landing/index.html" },
];
// Boot the builder with the first page
Vvveb.Builder.init(pages[0].url, function () {
console.log("Builder ready – iframe loaded");
});
// Initialize UI subsystems
Vvveb.Gui.init();
Vvveb.FileManager.init();
Vvveb.SectionList.init();
Vvveb.Breadcrumb.init();
Vvveb.TreeList.init();
// Register all pages and load the first one
Vvveb.FileManager.addPages(pages);
Vvveb.FileManager.loadPage(pages[0].name);
// Hide right panel for single-panel layout
Vvveb.Gui.toggleRightColumn(false);
```
### Response
This method does not return a value, but initializes the builder and executes the callback upon successful iframe load.
```
--------------------------------
### vvveb.iframe.loaded
Source: https://github.com/givanz/vvvebjs/wiki/Events
This event is triggered by the editor after the page/iframe has finished loading and the editor setup is complete.
```APIDOC
## vvveb.iframe.loaded
### Description
The editor triggers this event after the page/iframe is loaded and the the editor finished setting up the page.
### Event Payload
The detail parameter is set to iframe document object.
```javascript
new CustomEvent("vvveb.iframe.loaded", {detail: self.frameDoc}));
```
```
--------------------------------
### Import Unicons in Dart
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/unicons/README.md
Import the Unicons package into your Dart code to start using its Flutter components.
```dart
import 'package:unicons/unicons.dart';
```
--------------------------------
### Initialize Vvveb.js Editor
Source: https://github.com/givanz/vvvebjs/blob/master/editor.html
Initializes the Vvveb.js builder with the first page from the provided list and then initializes the GUI and other components.
```javascript
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.StyleList.init();
Vvveb.TreeList.init();
Vvveb.Breadcrumb.init();
Vvveb.CssEditor.init();
Vvveb.FileManager.addPages(pages);
Vvveb.FileManager.loadPage(pages[firstPage]["name"]);
Vvveb.Gui.toggleRightColumn(false);
Vvveb.Breadcrumb.init();
```
--------------------------------
### Import Iconoir in JavaScript
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/iconoir/README.md
Import a specific icon from the iconoir package into your JavaScript project. Ensure you have installed the package first.
```javascript
import Iconoir from 'iconoir/icons/iconoir.svg'
```
--------------------------------
### Import Boxicons Module
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/boxicons/README.md
Import the Boxicons module in your JavaScript file after installation. This makes the icon set available for use.
```javascript
import 'boxicons';
```
--------------------------------
### Number Input with Initialization for Style Properties
Source: https://github.com/givanz/vvvebjs/wiki/Components
Configures a 'Width' property using NumberInput for style, demonstrating the use of the 'init' function to parse and set the initial value correctly by removing 'px'.
```javascript
{
name: "Width",
key: "width",
htmlAttr: "style",
parent:"",
inputtype: NumberInput,//can also be replaced with RangeInput
data: {
value: "320",//default
min: "50",
max: "1024",
step: "10"
},
init: function (node) {//use init because number input does not ignore "px"
return parseInt(node.style.width);//remove px
}
}
```
--------------------------------
### Basic HTML Structure with Feather Icons
Source: https://github.com/givanz/vvvebjs/blob/master/resources/svg/icons/feather/README.md
A minimal HTML file demonstrating how to include Feather Icons via CDN and use them with the `feather.replace()` method.
```html