WYSIWYG editor

WYSIWYG (pronounced “wizzy-wig”) stands for “What You See Is What You Get.” A WYSIWYG editor is a content editor that displays content visually as it will appear when published, allowing users to format text, insert images, and arrange elements through a graphical interface rather than by writing markup like HTML or Markdown.

The term originated with desktop publishing and word processing in the 1970s and 1980s, and was later adopted by web content editors.

How a WYSIWYG editor works

A typical WYSIWYG editor:

1. Displays content in a visually formatted view, similar to the final published appearance
2. Provides a toolbar with formatting controls (bold, italic, headings, lists, links)
3. Allows direct manipulation of content (typing, selecting, dragging)
4. Generates the underlying markup (typically HTML) behind the scenes
5. Saves both the rendered view and the underlying code

Common WYSIWYG editors

• TinyMCE, widely used in CMS platforms; powers WordPress’s classic editor
• CKEditor, established editor used in Drupal and many enterprise applications
• Quill, open-source editor for modern web applications
• ProseMirror, toolkit used to build editors (powers Notion, Atlassian, others)
• Lexical, Meta’s editor framework
• Gutenberg / WordPress Block Editor, block-based evolution of WYSIWYG, built into WordPress
• Squarespace, Wix, Webflow editors, proprietary WYSIWYG editors built into hosted platforms

WYSIWYG vs Markdown

Markdown is a plain-text format with simple syntax for formatting. WYSIWYG editors offer a visual interface; Markdown editors are typically text-based.

Aspect	WYSIWYG	Markdown
Editing interface	Visual, formatted	Plain text with syntax
Learning curve	Low for most users	Low to moderate
Output	HTML, often with styling artifacts	Clean, predictable HTML after rendering
Diff readability (Git)	Difficult	Excellent
Portability	Variable; HTML may carry editor-specific attributes	High; plain text
Speed for experienced writers	Moderate	Fast
Suitability for collaboration in version control	Limited	Strong

Many modern editors blend both approaches: rendering Markdown visually as the user types, or providing a WYSIWYG-style interface that produces Markdown output.

WYSIWYG vs page builders

Page builders are a specialized form of WYSIWYG focused on page layout rather than text formatting. A standard WYSIWYG editor handles content within a page (text, images, links); a page builder handles the structure of the page itself (rows, columns, blocks, sections).

Most modern CMS platforms include both: a WYSIWYG editor for content within blocks, and a page builder or block-based system for arranging the blocks.

Strengths

• Accessibility for non-technical users. No syntax to learn
• Immediate visual feedback. Users see formatting as they apply it
• Familiarity. The interaction model resembles word processors most users have used

Limitations

• Output quality. WYSIWYG editors can produce verbose or inconsistent HTML, especially when content is pasted from other sources
• Hidden complexity. Style information that looks consistent in the editor may not appear the same on the published site, depending on theme and CSS rules
• Diff and version control. WYSIWYG output is difficult to review in Git diffs
• Editor lock-in. Content created in one WYSIWYG editor may include attributes specific to that editor, affecting portability

Common misconceptions

• “WYSIWYG and rich text editor mean the same thing.” They are often used interchangeably, but “rich text editor” specifically refers to formatted-text editing, while WYSIWYG can include layout, color, and other visual properties.
• “All WYSIWYG editors produce the same HTML.” Output varies significantly between editors; some produce clean semantic HTML, others produce verbose or attribute-heavy markup.
• “Markdown is harder than WYSIWYG.” Many users find Markdown faster after a short learning period, especially for content-heavy work.

Related terms

• Page builder
• Site builder
• Markdown
• Content management system (CMS)