Schema Editor

Postmortem: Four Copies of the Same HTML File Became Four Different Codebases

2026-06-04

TLDR

Our schema editor maintained four domain HTML files (electrical, construction, software, floorplan), each holding a full copy of the 900-line canvas engine setup. We applied a grid snapping fix to the electrical domain and never ported it to the floorplan domain, which caused a public failure during a product demonstration six weeks later. We deleted all four duplicated files and replaced them with 15-line host shells wrapping a central <schema-editor> Web Component.

Incident Milestone	Duplicated HTML Architecture	Refactored Web Component Architecture
Engine Code Location	4 separate copies of 900-line HTML	Single canonical file (`schema-editor.js`)
Bug Fix Scope	Single file (Electrical only)	100% of domain variants automatically
Domain Host Complexity	900 lines per domain page	15 lines per domain page

Problem statement: the cost of un-synchronized page copies

To launch specialized variants of our editor quickly, we created four domain subdirectories:

electrical/index.html
construction/index.html
software/index.html
floorplan/index.html

Each file was an identical copy of our 900-line master canvas setup with minor palette tweaks.

Six weeks after launch, a client demo of the floorplan editor failed because elements placed near viewport edges snapped incorrectly.

Investigation revealed that the exact same bug had been fixed in electrical/index.html three weeks prior.

Because the fix was committed strictly to electrical/index.html, the floorplan copy never received the patch.

Technical failure mode: diffing divergent files

An audit diffing all four domain files revealed multiple un-synchronized changes:

Three Missing Fixes: Canvas pan bounds, zoom math, and grid snap fixes were present in electrical but missing in floorplan and construction.
One Missing Security Patch: A postMessage origin validation fix applied to software/index.html was missing from the other three pages.

The fix & architecture: the `<schema-editor>` Web component

We deleted the 900 lines of duplicated canvas code across all four HTML files and built a unified <schema-editor> Web Component:

// REFACTORED: Central Web Component Engine (schema-editor.js)
export class SchemaEditorComponent extends HTMLElement {
  static get observedAttributes() { return ['domain']; }
connectedCallback() {     this.domain = this.getAttribute('domain') || 'general';     this.render();   }
render() {     const config = DOMAIN_CONFIGS[this.domain];     this.engine = new CanvasEngine(this, config);   } }
customElements.define('schema-editor', SchemaEditorComponent);

Thin declarative host shells

Each domain page was replaced with a 15-line declarative host shell:

<!-- floorplan/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Floorplan Schema Editor</title>
  <script type="module" src="/src/components/schema-editor.js"></script>
</head>
<body>
  <schema-editor domain="floorplan"></schema-editor>
</body>
</html>

Now, any bug fix committed to schema-editor.js applies to all four domain variants automatically.

Rule of thumb: Replace duplicated variant HTML files with a single Web Component engine and thin host page shells to guarantee bug fix parity across deployment contexts.

Read this post in the full Engineering Journal →