Copying an HTML File Per Deployment Variant Is Not a Starting Point. It Is a Decision to Maintain N Codebases.

TLDR

The common development plan, "copy the main HTML page for the second domain variant now, and consolidate them into a shared module later", is rarely executed. Once duplicated, pages diverge as developers apply un-synchronized fixes. Taking 30 minutes to encapsulate the core engine inside a Web Component or ES module upfront eliminates technical debt and ensures future variant pages remain lightweight shells.

Variant Strategy	Initial Setup Time	Long-Term Code Drift	Maintenance Overhead
"Copy File for Now"	5 Minutes	Guaranteed High Drift	Multiplies per variant ($O(N)$)
Web Component Engine	30 Minutes	Zero Drift	Constant ($O(1)$)

---

Problem statement: the myth of "consolidating later"

When introducing a second domain deployment (e.g., adding a Floorplan editor alongside an existing Electrical editor), copying index.html feels fast.

Teams justify this choice with: "We will extract a shared canvas module once we confirm what features the floorplan domain needs."

In practice, "consolidating later" almost never happens.

As features and bug fixes are committed to individual variant files, merging diverged copies becomes increasingly difficult over time.

---

Technical failure mode: compounding divergence costs

The cost of consolidating duplicated files grows over time:

1. Day 1: Duplicated files are identical. Consolidation takes 30 minutes.
2. Month 3: Files contain divergent bug fixes and refactored helper functions. Consolidation requires manual code merging and re-testing.

---

The fix: modular Web components upfront

Spend 30 minutes upfront to encapsulate core engine logic inside a Web Component before creating variant pages:

// Central Modular Canvas Component (<schema-editor>)
export class SchemaEditorComponent extends HTMLElement {
  connectedCallback() {
    const domain = this.getAttribute('domain') || 'general';
    this.mountEditor(domain);
  }
mountEditor(domain) {     const config = getDomainConfiguration(domain);     // Instantiate unified canvas engine with domain configuration     this.engine = new CanvasEngine(this, config);   } }
customElements.define('schema-editor', SchemaEditorComponent);

Each variant page becomes a simple 15-line HTML shell:

<!-- declarative host page shell -->
<schema-editor domain="construction"></schema-editor>

Rule of thumb: Build tools as Web Components with attribute interfaces upfront. Avoid copying HTML pages to create application variants.