HTML Editors

Introduction

HTML editors — VS Code, WebStorm, CMS WYSIWYG, Figma-to-code — determine what markup actually ships. Staff concern is the output pipeline: formatter rules, Emmet expansion, CMS sanitization, and whether AI assistants hallucinate invalid nesting. Shopify's theme editor and Stripe's MDX docs pipeline both enforce HTML constraints at save time.

Business problem

Editor defaults create org-wide markup debt: Prettier htmlWhitespaceSensitivity, CMS pasting from Word, Copilot emitting div buttons.

• Cost: Remediation sprints after accessibility audit find editor-sourced errors.
• Consistency: Without shared formatter, PRs fight over attribute order and quote style.
• Security: WYSIWYG "source mode" bypasses sanitization for marketers.

Why this feature exists

Authoring tools lowered the barrier to hypertext creation — from Notepad to visual editors because raw tag typing doesn't scale for content teams.

• Dreamweaver era: Visual + source dual mode taught bad table layout habits.
• Modern: IDE linting + LSP for HTML/custom components.
• CMS: Block editors serialize to HTML JSON — lossy round trips.

Browser internals

Editors don't parse like browsers until preview. Live preview iframes run full HTML5 parser; inline autocomplete may use lighter parsers that accept invalid snippets temporarily.

• Preview iframe: Isolated document — CSP may differ from prod.
• Formatter: Re-serializes DOM-like AST — may reorder attributes.
• Emmet: Expands abbreviations to HTML strings — validate after expand.

Author types → LSP/formatter AST → file on disk
Preview iframe → full HTML parser → rendered pixels

Rendering workflow

What you see in editor ≠ production. Missing fonts, CSP, and CDN transforms mean preview LCP lies. BBC uses staging with production headers for true render checks.

• Local preview: file:// protocol breaks module scripts and fetch.
• Hot reload: Injects scripts — masks parser-blocking behavior.
• Design tools: Export absolute positioning — bad for responsive HTML.

Feature deep dive

Production editor stack: IDE with html-validate/eslint-plugin-jsx-a11y, Prettier for HTML, Emmet for boilerplate, CMS with allowlisted blocks, Storybook for component HTML snapshots.

• VS Code: built-in HTML language service + extensions (axe, Headwind).
• WebStorm: inspections for deprecated tags and accessibility.
• CMS: DOMPurify on save — not on render only.

<!-- .vscode/settings.json -->
{
  "html.validate.styles": false,
  "editor.formatOnSave": true,
  "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
}

Accessibility analysis

WYSIWYG is the #1 source of missing alt text and heading skips. Enforce block templates with required alt, heading level caps, and no font/color inline styles.

• Alt prompts: CMS blocks refuse publish without alt decision (decorative flag).
• Heading widget: Only h2-h4 selectable in body — h1 from template.
• Link editor: Discourage "click here" link text.

SEO impact

CMS HTML bloat — empty paragraphs, nested spans — dilutes keyword prominence. Editor lint can flag multiple h1 and title length before publish.

• Slug vs title: Editor fields map to title element separately.
• Structured blocks: FAQ schema only if editor preserves Q/A markup.
• Internal links: rel attributes configurable in link picker.

Security considerations

Source mode and markdown are XSS vectors in CMS. Disable script tags, on* attributes, and javascript: URLs at sanitization. Stripe docs allow limited HTML tags in MDX compile step.

• Paste filtering: Strip Microsoft Word conditional comments and scripts.
• AI assist: Review generated HTML like any user content.
• Preview XSS: Admin preview must not execute author script against admin cookies.

Performance impact

Editor-inserted images without width/height from media library metadata cause CLS. Integrate CDN transforms at pick time — Amazon CMS auto-inserts dimensions.

• Inline styles: Block editor bloats HTML size — prefer classes.
• SVG paste: Huge path data — optimize in pipeline.
• Preview bundles: Don't measure prod perf from editor shell.

Real production example

Shopify Online Store 2.0 — JSON templates + Liquid blocks; HTML output validated against theme check CLI in CI.

• theme check: Fails CI on deprecated tags and missing alt patterns.
• Editor: Merchants can't inject script — platform sanitizes.
• Version control: Theme files reviewed like app code.

Enterprise usage

Global marketing orgs standardize on one CMS with HTML allowlist, separate "developer mode" role, and quarterly editor output audits.

• Roles: Authors vs developers — source access gated.
• Training: Editor docs cover heading order and link text.
• Integration: Preview hits staging with production CSP.

Common production failures

Word paste incident — nested conditional comments broke parser in IE mode compatibility view; page blank for enterprise users 3 days.

• AI-generated table: Invalid colspan shipped to product pages — layout collapse mobile.
• Formatter war: Prettier vs IDE wrapped attributes — merge conflicts on HTML files.
• Copilot button: <div onclick> merged — keyboard inaccessible checkout.

Architecture review questions

• What HTML does the CMS emit on save vs on render?
• Are formatter and linter rules identical in CI and local editors?
• Can non-developers access raw HTML or script injection paths?
• Does preview use production CSP and asset URLs?
• How are images from the media library enriched with dimensions and alt?
• What is the rollback process for bad bulk CMS publish HTML?

Hands-on project

Configure editor pipeline for a static site repo: Prettier, html-validate, axe CI on built HTML, CMS paste sanitizer demo.

• Deliverable: .vscode + GitHub Action failing on a11y regression.
• Verify: Paste malicious Word HTML — sanitizer strips script.
• Stretch: Custom lint rule banning div[onclick].

Interview questions

Try it yourself

Edit the HTML, CSS, or JS panels — the preview updates as you type.

Summary

HTML editors shape what ships. Staff engineers own the full pipeline — formatting, validation, sanitization, and CI — so authoring velocity doesn't trade away accessibility, security, or SEO.