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.
