givanz/VvvebJs
VvvebJs
VvvebJs is a self-hosted, vanilla JavaScript library for visually assembling web pages by dragging pre-built HTML components onto a canvas. It functions as a visual HTML editor and component-based page builder that requires no build tools or external dependencies, and can be deployed on a server with PHP or Node.js backend for saving and exporting pages.
The builder organizes reusable HTML components into named groups for drag-and-drop assembly, and provides visual property editing that modifies HTML attributes, CSS styles, and class names through form controls and property panels. It includes a file-based section registration system that scans HTML file folders to generate reusable page sections, and an undo-redo command stack that records each DOM mutation as a reversible command.
The library supports custom component registration for defining new draggable elements with custom markup and behavior, live HTML source editing with syntax highlighting, and scroll-triggered animations. It offers media management capabilities including a stock image and custom media gallery, canvas-based media resizing, and server-side image upload. The builder also includes global theme style customization, Google Fonts integration, third-party widget embedding, and breadcrumb-based ancestor selection for navigating the component tree.
Pages can be exported as HTML files or packaged with all linked assets into a ZIP archive for deployment. The project includes server-side scripts for saving pages and uploading images, and provides a file browser and component tree navigation for organizing page elements.
Features
- Drag-and-Drop Page Builders - A self-hosted, vanilla JavaScript library for visually assembling web pages by dragging components onto a canvas.
- Drag and Drop - Provides a drag-and-drop interface for assembling web pages from pre-built HTML components.
- Self-Hosted Builders - Deployable on a server with PHP or Node.js backend for saving and exporting pages.
- Visual Page Editors - Edits web page layouts and content through a graphical interface with live preview.
- Custom Component Builders - Defines new draggable HTML elements with custom markup, properties, and behavior for the page builder.
- Property Editing Panels - Provides property editing panels for modifying HTML attributes, CSS styles, and class names of page elements.
- Vanilla DOM Controllers - Directly manipulates the browser's DOM tree to build and edit page layouts without a virtual DOM.
- Property Bindings - Binds form controls to element attributes and styles through event listeners for live property updates.
- Property Panel Initializers - Reads the current value from the selected element and populates the input field so the property panel reflects the component state.
- Vanilla JavaScript Utilities - Written in plain JavaScript with no external dependencies or build toolchain.
- File Management and Navigation - Browses uploaded files and navigates the component tree to select and organize page elements.
- Server-Save - Downloads pages as HTML files or saves them to a server using provided PHP or Node.js scripts.
- Page Exporters - Exports pages as HTML files or packages them with all linked assets into a ZIP archive for deployment.
- File-Based Section Registries - Ships a file-based system that scans HTML folders to generate reusable page sections for the builder.
- Live HTML Source Editors - Provides live HTML source editing with syntax highlighting and immediate visual reflection in the builder.
- Page and Asset ZIP Archivers - Packages the built page and all linked assets into a ZIP archive for deployment.
- Scroll-Triggered Animations - Attaches scroll-triggered animations to page elements to create visual interest as users scroll.
- Panel Groups - Groups related draggable elements under named categories in the builder's panel for easier access.
- ZIP Archive Exports - Packages the page and all its linked assets into a single ZIP file for download.
- Global Theme Instances - Provides a dedicated editor for setting the global typography and color palette across the entire page.
- Undo-Redo History - Maintains an undo-redo command stack that records each DOM mutation as a reversible action.
- Widget Embedding - Inserts interactive content like YouTube videos, Google Maps, and Chart.js charts into a page.
