Definition:
WYSIWYG is an acronym for What You See Is What You Get. It describes an editing method in which content is displayed during creation with an appearance close to the final output.
The term applies to word processors, content editors, design tools, and page builders. Instead of working only with instructions or code, a person directly modifies a visual representation of the document or interface.
The correspondence is not always exact. The output may change when it is printed, displayed at another screen size, opened in a different browser, rendered with another font, or affected by styles and data that the editor does not reproduce completely.
Table of contents
How a WYSIWYG editor works
A WYSIWYG editor combines a visual surface with an internal content model. When a heading, list, image, or table is added, the tool also records the structure and properties required to represent it.
In a word processor, this model contains pages, styles, margins, and document elements. In a CMS, it may become blocks, components, or HTML code that is later interpreted by a browser.
These five functions are common in a WYSIWYG interface:
- Direct editing: lets a person write, select, and rearrange elements in the content view itself.
- Formatting controls: apply headings, emphasis, lists, links, alignment, and other styles without entering their instructions manually.
- Element insertion: adds images, tables, buttons, forms, or other components through visual controls.
- Immediate preview: shows the approximate effect of each change during editing.
- Structured representation: preserves data, blocks, or markup that allow the content to be stored and rendered again.
An editor may provide a code view as well as a visual view. Both modify the same content, but expose different levels: one represents the output and the other shows some of the instructions used to build it.
Uses and examples of WYSIWYG
The idea became widespread with graphical interfaces and word processors that displayed a document’s layout on screen. It replaced workflows in which text and formatting instructions were entered first and the result could only be checked afterwards.
It now appears in several environments:
- Word processors: Microsoft Word and Google Docs represent styles, pages, images, and tables while a document is edited.
- Content management systems: WordPress and Drupal include visual or block-based editors for preparing web content.
- Rich-text editors: email, support, and documentation applications allow formatting and links to be applied without writing HTML.
- Page builders: arrange sections and components on an approximate view of the published page.
- Design tools: display the composition of graphics, presentations, or interfaces during creation.
These tools do not all provide the same degree of correspondence. A document intended for a fixed page size may resemble its printed output more closely than a responsive website, whose presentation changes with the device and context.
WYSIWYG compared with code and WYSIWYM
WYSIWYG describes the relationship between the editing view and the output, not a language or file format. It may generate HTML, office documents, components, or other internal representations, depending on the application.
These differences distinguish three main approaches:
- WYSIWYG editing: the interface prioritises an approximate view of the output.
- Code or markup editing: a person works directly with instructions such as HTML, CSS, or Markdown and checks the result in a separate preview.
- WYSIWYM: What You See Is What You Mean prioritises structural meaning, such as a heading, quotation, or reference, while the system determines its final presentation.
- Hybrid editing: combines visual blocks, structured fields, previews, and partial or complete access to code.
No approach is universally superior. Visual editing supports composition and immediate review; code provides explicit control; and structured editing helps reuse content across channels. Many applications combine all three.
Advantages and limitations
WYSIWYG reduces the distance between a modification and its visual representation. This makes editorial work accessible to people who do not need to know the underlying syntax and helps identify composition problems earlier.
However, a correct appearance in the editor does not guarantee a correct published result. A website may involve style sheets, scripts, permissions, dynamic content, screen sizes, and browser features that are absent from the editing view.
Generated code may also contain unnecessary elements or a weak semantic structure. Text that looks like a heading because of its size is not necessarily an HTML heading, and a visual composition does not ensure reading order, keyboard navigation, or compatibility with assistive technologies. Web accessibility requires checking structure and behaviour as well as appearance.
The final review therefore needs to use the relevant output format and contexts. WYSIWYG brings the editing experience closer to the result, but it does not remove the need to validate rendered content, its structure, and its variants.