$ show givanz/VvvebJs
VvvebJs is a WYSIWYG web page builder that enables drag-and-drop creation of responsive websites using Bootstrap components. The system provides a visual editor with canvas, property panels, component library, and file management for constructing HTML pages. Key features include inline text editing, code viewing via CodeMirror, media handling, undo/redo functionality, and export capabilities. The architecture follows a modular pattern with core builder logic in libs/builder/builder.js, extensible via plugins and component definitions. Entry points include editor.html for initialization, save.php/save.js for persistence, and upload.php/scan.php for media management. The builder manipulates an iframe as the design canvas while maintaining component state and history for undo/redo operations.
The LLM identified 3 files worth highlighting for reuse:
Implements a robust undo/redo system using MutationObserver to track DOM changes in the builder's iframe. Serializes changes as reversible operations (type, target, oldValue/newValue) enabling infinite history without tight coupling to specific components. Demonstrates skill in state management and can be extracted for any web application requiring history tracking.
Standalone utility for embedding content from URLs using oEmbed providers (YouTube, Vimeo, etc.). Handles provider discovery, embedding, and caching with error handling. Decoupled from builder core and reusable in any web application needing to convert URLs to embedded content. Shows non-obvious skill in handling asynchronous API calls and fallback mechanisms.
Defines reusable input types (TextInput, ColorInput, RangeInput, SelectInput, etc.) for property panels with consistent API for initialization, value handling, and event binding. Reduces boilerplate in property editors through abstraction and follows extensible pattern. Demonstrates skill in creating maintainable form components adaptable to any UI library.