BUILD RECORD 15Lab2024—26

VvvebJs Modernization

A large visual site builder brought through a staged architecture and interface modernization.

All work
EngineeringEngineering · staged modernizationLocal working set
ARCHITECTURE

WEB

01WEB
01 / OVERVIEW

What exists.

VvvebJs is a visual drag-and-drop page builder. The modernization effort rebuilds it as a JSON-native editor with modern tooling while preserving the existing feature set.

02 / PROBLEM + CONSTRAINT

Where it resisted.

Migrating a large vanilla JavaScript codebase to a modern architecture without breaking the existing editor experience requires careful staging.

03 / INTERVENTION

What I changed.

Planned a staged migration with feature parity tracking, starting with the core DSL, renderer, and workspace packages.

DIFFICULT DECISION

The obvious implementation was not the product.

Use a workspace-based architecture with clear package boundaries to make the migration incremental rather than big-bang.

Current proof

03
  1. Bun workspace architecture with core, UI, importer, exporter, and preset packages.
  2. Feature parity audit tracking gaps and implementation order.
  3. Legacy reference preserved alongside the rewrite.
LESSONS

What this build changed.

Large codebase modernization succeeds when each stage is independently shippable and testable.

BUILD MATERIALS

The implementation surface.

01Bun02TypeScript03Vanilla JS
Next build recordAppwrite Project Migrate