WYSIWYG stands for “What You See Is What You Get”. It means an editor in which content is displayed during editing exactly the way it will later reach the reader. Instead of juggling tags, Markdown or commands, the editor sees directly: this heading is 32 px, this image is left-aligned, this paragraph is italic. Exactly for this reason, WYSIWYG editors are the standard tool in almost every content management system, in email marketing tools and in modern page builders: they drastically lower the entry barrier and make content maintenance possible without HTML knowledge.
How it works
Behind the scenes, every WYSIWYG editor works with two layers:
- An editable presentation layer (usually an HTML
contenteditablearea or a dedicated render layer) in which the user can format - A structured storage form (HTML, block JSON or a proprietary format) maintained behind the scenes
On clicking “Bold”, the selected text is internally wrapped in <strong>…</strong> (or a block token) but immediately displayed visually as bold in the interface. On saving, the structured form lands in the database; on rendering, it becomes HTML again via the CMS theme.
Well-known WYSIWYG editors
| Editor | Used in | Characteristic |
|---|---|---|
| Gutenberg | WordPress (since 5.0) | Block-based, every piece of content is its own block |
| TinyMCE | Drupal, Joomla, Confluence | The classic “Word-style” toolbar editor |
| CKEditor 5 | Atlassian, many SaaS tools | Modular, capable of real-time collaboration |
| Quill | Slack, LinkedIn posts | Lean, good for embedding in your own apps |
| ProseMirror | Notion, the New York Times | Very flexible, schema-driven document model |
| Elementor / Divi | WordPress page builders | Drag and drop of entire page layouts |
| Block Kit / Editor.js | modern headless CMS | JSON-based block model |
Pros and cons
Advantages
- A low entry barrier: editors without HTML knowledge can start right away
- Fast visualisation: layout decisions become visible immediately
- Template work: reusable blocks and templates accelerate maintenance
- Consistency: when the CMS theme prescribes the block styles, fonts, colours and spacing stay on-brand
- A media workflow: images, videos and embeds can be added via drag and drop
Disadvantages
- The hidden HTML can get dirty: inline styles, empty
<span>tags and needless<br>sequences accumulate with intensive use - Code-block tinkerers hit limits: anyone needing complex semantic structures usually switches to source mode after all
- Vendor lock-in: proprietary block formats (Elementor, Divi) are hard to migrate to other systems later
- A performance risk: heavyweight editors like Elementor can burden frontend performance when their render output is too generic
- Style drift: when editors format individually instead of using predefined blocks, visual consistency suffers
WYSIWYG vs. Markdown vs. block editors
| Approach | Strength | Weakness |
|---|---|---|
| WYSIWYG (classic) | Fast visual editing | “Dirty” HTML, style drift |
| Markdown | Plain text, versionable, clear | A learning curve for non-techies |
| Block editors (Gutenberg, Notion) | Structured blocks + visual feedback | More complex, more clicks |
Modern CMS worlds are clearly moving towards block editors – a hybrid of Markdown cleanliness and WYSIWYG comfort.
Tips for productive use
- Define block and style templates: binding blocks (hero, CTA, quote, accordion) rather than free inline formatting
- Reduce the toolbar: offer only options the editor genuinely needs – every additional option is a potential style deviation
- Enforce a style whitelist: hide inline
color,font-familyand arbitrary font sizes so the corporate identity holds - Allow source mode, but sparingly: experienced editors value it, new users quickly wreak havoc there
- Audit the output regularly: some editors produce superfluous tags; a cleanup job or a DOM linter helps
Frequently asked questions about WYSIWYG
Is Gutenberg a WYSIWYG editor? In the broader sense yes – the preview is close to the end result. Technically, Gutenberg is a block editor combining WYSIWYG principles with structured blocks.
Can WYSIWYG editors also be accessible?
Yes, if they produce semantically clean HTML (a correct headline hierarchy, alt texts for images, keyboard operability). Editors like CKEditor 5 or Gutenberg deliver solid defaults here; a page builder like Elementor easily produces problematic markup without careful theme configuration.
What happens when I switch from the WYSIWYG editor to source mode? With most editors the content is preserved, but some normalise the HTML (reformatting, removing unknown attributes). Always save a backup state before switching between the modes.
Are WYSIWYG editors SEO-capable? Yes; they’re just a tool. What’s decisive is whether the CMS theme renders correct HTML (heading structure, schema markup, metadata). The editor itself doesn’t influence SEO directly.
Do I still need HTML knowledge if the editor is visual? Not for standard maintenance. For troubleshooting (a bent layout, broken lists, unclean nesting), HTML basics remain helpful at all times.
Conclusion
WYSIWYG editors are the link between editorial teams and technology – configured right, they enable fast, consistent publishing without HTML knowledge. Configured wrong (too many degrees of freedom, no style corset), they quickly produce style sprawl and SEO problems. In every CMS project we deliver, we define the editor configuration in the interest of the editorial team and maintainability – feel free to reach out for a no-obligation consultation.