HTML WYSIWYG editor

Online, feature-rich WYSIWYG HTML editor which generates the source code of the content immediately.

Online HTML WYSIWYG Editor: ContentEditable Architecture, DOM Tree Sanitization & AST Pipelines

1. Overview & Core Advantages

A What-You-See-Is-What-You-Get (WYSIWYG) HTML editor is a browser-based rich text authoring environment that bridges human visual composition with clean, syntactically valid markup. Historically powered by the primitive and inconsistent browser command document.execCommand('designMode'), modern web engineering has transitioned WYSIWYG development into sophisticated Abstract Syntax Tree (AST) state engines and headless schema-driven document models like ProseMirror, TipTap, and Lexical.

High-performance digital publishing platforms, content management systems (CMS), and administrative dashboards demand instant, deterministic HTML serialization without compromising visual integrity or security. This utility provides real-time rich-text authoring paired with live, Prettier-formatted HTML source code export.

Core Architectural Advantages

  • 100% Client-Side Local Execution: Editing, visual updates, real-time AST transformations, and Prettier formatting occur strictly within the client’s browser JavaScript engine.
  • Zero External Telemetry & Total Confidentiality: Content drafts, unreleased press releases, internal operational playbooks, and sensitive editorial data are never uploaded to remote servers.
  • Strict AST Schema Validation: Eliminates corrupted nested tags, unclosed inline elements, and proprietary browser quirks that pollute source code.
  • Bi-Directional Code Synchronicity: Immediate feedback loop between visual visual typography controls and clean, human-readable HTML markup.

2. Technical Architecture & Algorithmic Principles

Evolution: execCommand vs. Schema-Driven AST Engines

Early web editors relied on browser-native document.execCommand(), which suffered from severe cross-browser divergence:

  • Bolding text in Chrome produced <b>...</b>, whereas Firefox rendered <span style="font-weight: bold;">...</span> and Safari produced <strong>...</strong>.
  • Inserting lists often broke parent paragraph tags or generated arbitrary nesting.
  • Undo/redo stacks were locked inside the opaque C++ implementation of the browser rendering engine.

Modern rich-text engines model the document as a structured tree or DAG of typed nodes rather than direct DOM mutations:

Visual User Input (Selection, Keydown, Paste)
                    |
                    v
       [Transaction Dispatcher]
                    |
                    v
    [Document State (Immutable Tree / AST)]
          /                    \
         v                      v
[DOM Renderer / View]   [HTML Serializer + Prettier]
  1. Document State: An immutable model tree where every node (e.g., doc, paragraph, heading, bullet_list) and mark (e.g., bold, italic, link) conforms to an explicit declarative schema.
  2. Transactions & Steps: Changes to the document are encapsulated as atomic operations (insert text, wrap in node, remove mark). This enables reliable collaborative editing (via Operational Transformation or CRDTs) and infinite deterministic undo histories.
  3. Serialization Pipeline: The internal state tree is projected into semantic HTML elements, normalized according to W3C standards, and formatted using AST-aware formatting rules.

The Formatting Engine: Prettier in the Browser

Raw serialized HTML generated by DOM writers typically collapses into a single dense string or produces erratic indentation. This editor integrates prettier/standalone alongside prettier/plugins/html directly in WebAssembly/WebWorker contexts:

  • Parses the serialized HTML string into an AST using a robust HTML parser (angular-html-parser or htmlparser2).
  • Measures line lengths, element nesting depths, and attribute spacing.
  • Re-synthesizes the markup into consistent, production-ready code with two-space indentation.

3. Step-by-Step Configuration & Implementation Guide

3.1 Headless Editor Integration Architecture (Vue 3 + TipTap/ProseMirror)

Below is an architectural implementation demonstrating how to build a reactive WYSIWYG editor with live code formatting:

import { defineComponent, h } from 'vue';
import { Editor, EditorContent } from '@tiptap/vue-3';
import StarterKit from '@tiptap/starter-kit';
import Link from '@tiptap/extension-link';
import { format } from 'prettier/standalone';
import * as prettierHtml from 'prettier/plugins/html';

export default defineComponent({
  setup() {
    const rawHtml = ref('<h1>Welcome</h1><p>Start composing your article...</p>');
    const formattedHtml = ref('');

    // Initialize Schema-Driven Headless Engine
    const editor = new Editor({
      content: rawHtml.value,
      extensions: [
        StarterKit.configure({
          heading: { levels: [1, 2, 3] },
        }),
        Link.configure({ openOnClick: false }),
      ],
      onUpdate: async ({ editor }) => {
        const html = editor.getHTML();
        rawHtml.value = html;
        
        // Execute Client-Side AST Beautification
        formattedHtml.value = await format(html, {
          parser: 'html',
          plugins: [prettierHtml],
          tabWidth: 2,
          printWidth: 80,
        });
      },
    });

    onBeforeUnmount(() => editor.destroy());

    return { editor, formattedHtml };
  },
});

3.2 Live Sanitization against DOM-Based XSS (DOMPurify Integration)

When accepting arbitrary pasted content into a WYSIWYG editor, defensive sanitization is mandatory to eliminate dangerous tags (<script>, <iframe>, object) and attributes (onload, onerror):

import DOMPurify from 'dompurify';

export function sanitizeEditorMarkup(dirtyHtml: string): string {
  return DOMPurify.sanitize(dirtyHtml, {
    ALLOWED_TAGS: [
      'h1', 'h2', 'h3', 'p', 'b', 'i', 'strong', 'em', 'u',
      'ul', 'ol', 'li', 'blockquote', 'code', 'pre', 'a', 'img'
    ],
    ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'target', 'rel'],
    FORCE_BODY: true,
  });
}

4. Production Engineering & Content Pipeline Architecture

Content Delivery Pipeline in Enterprise CMS

Integrating client-side rich text authoring into an automated headless publishing workflow:

+---------------------------+
| Visual Authoring Canvas   |
| (Client-Side WYSIWYG)     |
+-------------+-------------+
              |
              v (Prettier-Beautified HTML)
+-------------+-------------+
| Client-Side DOMPurify     |
| (Strict Allowlist Sanit.) |
+-------------+-------------+
              |
              v (Encrypted JSON Payload over TLS)
+-------------+-------------+
| REST / GraphQL API Server |
| (Backend Secondary Sanit.)|
+-------------+-------------+
              |
              +---> PostgreSQL (JSONB / text storage)
              |
              v
+-------------+-------------+
| Static Site Generator     |
| (Next.js / Nuxt / Astro)  |
+-------------+-------------+
              |
              v (Optimized Edge Caching)
+---------------------------+
| Global CDN Edge Nodes     |
+---------------------------+

Clipboard Paste Parsing & Normalization

One of the most complex challenges in WYSIWYG engineering is handling pasted content from applications like Microsoft Word or Google Docs. These suites embed thousands of lines of proprietary XML, mso-style annotations, and inline CSS wrappers (e.g., <o:p>, mso-pagination). Modern editors intercept the paste event:

  1. Access the text/html and text/plain types from the ClipboardEvent.clipboardData.
  2. Apply regex filters to strip Microsoft Office namespace prefixes and CSS classes (MsoNormal).
  3. Transform raw semantic structures into clean document AST nodes before committing the transaction to state.

5. Frequently Asked Questions (FAQs)

Q1: Why is raw document.execCommand() deprecated by the W3C?

document.execCommand() is formally deprecated because it was never uniformly standardized across browser engines. Internet Explorer, Gecko (Firefox), and WebKit (Safari/Chrome) implemented incompatible tag generation rules, style inlining, and selection management. Modern web applications require deterministic document state trees, which execCommand cannot provide.

Q2: How does a WYSIWYG editor prevent Cross-Site Scripting (XSS)?

Preventing XSS requires strict sanitization. Malicious users can paste payloads containing hidden vector tags like <img src="x" onerror="alert(1)">. Modern editors reject unauthorized DOM nodes through schema validation upon transaction dispatch, followed by client-side filtering libraries such as DOMPurify before any HTML string is rendered or persisted.

Q3: What is the difference between Markdown editors and WYSIWYG HTML editors?

Markdown editors manipulate plain text with lightweight syntax markers (e.g., # Heading, **bold**). They offer simplicity and portability for technical documentation. WYSIWYG HTML editors manipulate the DOM directly, supporting complex layouts, custom inline styles, embedded tables, and visual element sizing required by non-technical content creators and marketing teams.

Q4: Why does formatted HTML improve SEO and accessibility?

Search engine web crawlers (such as Googlebot) and assistive technologies (screen readers) rely on semantic HTML hierarchies (<h1>, <h2>, <p>, <ul>) to parse document intent. Well-formed, cleanly indented HTML generated by AST-aware editors eliminates parse ambiguities, improves page indexing speed, and satisfies WCAG accessibility criteria.

6. Client-Side Privacy & Security Guarantee

This HTML WYSIWYG editor operates entirely within the isolated sandbox of your web browser. Neither your authored text, pasted documents, nor generated HTML markup are ever uploaded, analyzed, or stored on external servers. All rendering, AST transformations, and Prettier code formatting execute locally in client memory.