# givanz/vvvebjs **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/givanz-vvvebjs).** 8,532 stars · 1,824 forks · JavaScript · Apache-2.0 ## Links - GitHub: https://github.com/givanz/VvvebJs - Homepage: https://www.vvveb.com/vvvebjs/editor.html - awesome-repositories: https://awesome-repositories.com/repository/givanz-vvvebjs.md ## Topics `bootstrap` `bootstrap5` `builder` `drag-and-drop` `editor` `free` `javascript` `low-code` `no-code` `nocode` `nodejs` `open-source` `page-builder` `scss` `site-generator` `ui` `vanilla-javascript` `website-builder` `website-generation` `wysiwyg` ## Description 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. ## Tags ### User Interface & Experience - [Drag-and-Drop Page Builders](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-page-builders.md) — A self-hosted, vanilla JavaScript library for visually assembling web pages by dragging components onto a canvas. - [Visual Page Editors](https://awesome-repositories.com/f/user-interface-experience/content-block-editors/visual-page-editors.md) — Edits web page layouts and content through a graphical interface with live preview. - [Custom Component Builders](https://awesome-repositories.com/f/user-interface-experience/custom-component-extensions/custom-component-builders.md) — Defines new draggable HTML elements with custom markup, properties, and behavior for the page builder. ([source](https://github.com/givanz/VvvebJs/wiki/Components)) - [Property Editing Panels](https://awesome-repositories.com/f/user-interface-experience/element-property-inspection/property-editing-panels.md) — Provides property editing panels for modifying HTML attributes, CSS styles, and class names of page elements. ([source](https://github.com/givanz/VvvebJs/wiki)) - [Vanilla DOM Controllers](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/javascript-component-controllers/vanilla-dom-controllers.md) — Directly manipulates the browser's DOM tree to build and edit page layouts without a virtual DOM. - [Property Bindings](https://awesome-repositories.com/f/user-interface-experience/property-bindings.md) — Binds form controls to element attributes and styles through event listeners for live property updates. - [Property Panel Initializers](https://awesome-repositories.com/f/user-interface-experience/property-panel-initializers.md) — Reads the current value from the selected element and populates the input field so the property panel reflects the component state. ([source](https://github.com/givanz/VvvebJs/wiki/Inputs)) - [Scroll-Triggered Animations](https://awesome-repositories.com/f/user-interface-experience/declarative-animations/scroll-triggered-animations.md) — Attaches scroll-triggered animations to page elements to create visual interest as users scroll. ([source](https://cdn.jsdelivr.net/gh/givanz/vvvebjs@master/README.md)) - [Panel Groups](https://awesome-repositories.com/f/user-interface-experience/panel-groups.md) — Groups related draggable elements under named categories in the builder's panel for easier access. ([source](https://github.com/givanz/VvvebJs/wiki/Components)) - [ZIP Archive Exports](https://awesome-repositories.com/f/user-interface-experience/session-recording-management/session-browsers-and-exporters/zip-archive-exports.md) — Packages the page and all its linked assets into a single ZIP file for download. ([source](https://cdn.jsdelivr.net/gh/givanz/vvvebjs@master/README.md)) - [Global Theme Instances](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/global-css-stylings/global-theme-instances.md) — Provides a dedicated editor for setting the global typography and color palette across the entire page. ([source](https://cdn.jsdelivr.net/gh/givanz/vvvebjs@master/README.md)) ### Part of an Awesome List - [Drag and Drop](https://awesome-repositories.com/f/awesome-lists/devtools/drag-and-drop.md) — Provides a drag-and-drop interface for assembling web pages from pre-built HTML components. - [File Management and Navigation](https://awesome-repositories.com/f/awesome-lists/devtools/file-management-and-navigation.md) — Browses uploaded files and navigates the component tree to select and organize page elements. ([source](https://cdn.jsdelivr.net/gh/givanz/vvvebjs@master/README.md)) ### Content Management & Publishing - [Self-Hosted Builders](https://awesome-repositories.com/f/content-management-publishing/static-site-document-generators/website-builders/self-hosted-builders.md) — Deployable on a server with PHP or Node.js backend for saving and exporting pages. - [Server-Save](https://awesome-repositories.com/f/content-management-publishing/content-formats-exporting/export-formats/html-exports/server-save.md) — Downloads pages as HTML files or saves them to a server using provided PHP or Node.js scripts. ([source](https://cdn.jsdelivr.net/gh/givanz/vvvebjs@master/README.md)) - [Page Exporters](https://awesome-repositories.com/f/content-management-publishing/package-exporters/page-exporters.md) — Exports pages as HTML files or packages them with all linked assets into a ZIP archive for deployment. - [File-Based Section Registries](https://awesome-repositories.com/f/content-management-publishing/section-based-layout-management/file-based-section-registries.md) — Ships a file-based system that scans HTML folders to generate reusable page sections for the builder. ### Web Development - [Vanilla JavaScript Utilities](https://awesome-repositories.com/f/web-development/vanilla-javascript-utilities.md) — Written in plain JavaScript with no external dependencies or build toolchain. - [Undo-Redo History](https://awesome-repositories.com/f/web-development/history-management/undo-redo-history.md) — Maintains an undo-redo command stack that records each DOM mutation as a reversible action. ([source](https://cdn.jsdelivr.net/gh/givanz/vvvebjs@master/README.md)) - [Widget Embedding](https://awesome-repositories.com/f/web-development/third-party-api-integrations/widget-embedding.md) — Inserts interactive content like YouTube videos, Google Maps, and Chart.js charts into a page. ([source](https://cdn.jsdelivr.net/gh/givanz/vvvebjs@master/README.md)) ### Development Tools & Productivity - [Live HTML Source Editors](https://awesome-repositories.com/f/development-tools-productivity/terminal-syntax-highlighting-engines/in-browser-code-editing/live-html-source-editors.md) — Provides live HTML source editing with syntax highlighting and immediate visual reflection in the builder. ([source](https://cdn.jsdelivr.net/gh/givanz/vvvebjs@master/README.md)) ### DevOps & Infrastructure - [Page and Asset ZIP Archivers](https://awesome-repositories.com/f/devops-infrastructure/asset-bundlers/asset-packagers/page-and-asset-zip-archivers.md) — Packages the built page and all linked assets into a ZIP archive for deployment.