{"id":21672,"date":"2020-01-28T15:05:04","date_gmt":"2020-01-28T15:05:04","guid":{"rendered":"https:\/\/www.arimetrics.com\/glosario-digital\/wysiwyg"},"modified":"2026-09-15T14:06:47","modified_gmt":"2026-09-15T14:06:47","slug":"wysiwyg","status":"publish","type":"encyclopedia","link":"https:\/\/www.arimetrics.com\/en\/digital-glossary\/wysiwyg","title":{"rendered":"WYSIWYG"},"content":{"rendered":"<p><img decoding=\"async\" class=\"boxpad alignright wp-image-13751 size-full\" src=\"http:\/\/www.arimetrics.com\/wp-content\/uploads\/2020\/01\/wysiwyg-1.png\" alt=\"WYSIWYG\" width=\"300\" height=\"300\" style=\"margin-top:0;\" srcset=\"https:\/\/www.arimetrics.com\/wp-content\/uploads\/2020\/01\/wysiwyg-1.png 300w, https:\/\/www.arimetrics.com\/wp-content\/uploads\/2020\/01\/wysiwyg-1-150x150.png 150w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><strong>Definition:<\/strong><\/p>\n<p><strong>WYSIWYG<\/strong> is an acronym for <em>What You See Is What You Get<\/em>. It describes an editing method in which content is displayed during creation with an appearance close to the final output.<\/p>\n<p>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.<\/p>\n<p><strong>The correspondence is not always exact.<\/strong> 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.<\/p>\n\n<h2>How a WYSIWYG editor works<\/h2>\n<p>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.<\/p>\n<p>In a word processor, this model contains pages, styles, margins, and document elements. In a <a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/cms\">CMS<\/a>, it may become blocks, components, or <a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/html5\">HTML<\/a> code that is later interpreted by a browser.<\/p>\n<p><strong>These five functions are common in a WYSIWYG interface:<\/strong><\/p>\n<ul>\n<li><strong>Direct editing:<\/strong> lets a person write, select, and rearrange elements in the content view itself.<\/li>\n<li><strong>Formatting controls:<\/strong> apply headings, emphasis, lists, links, alignment, and other styles without entering their instructions manually.<\/li>\n<li><strong>Element insertion:<\/strong> adds images, tables, buttons, forms, or other components through visual controls.<\/li>\n<li><strong>Immediate preview:<\/strong> shows the approximate effect of each change during editing.<\/li>\n<li><strong>Structured representation:<\/strong> preserves data, blocks, or markup that allow the content to be stored and rendered again.<\/li>\n<\/ul>\n<p>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.<\/p>\n<h2>Uses and examples of WYSIWYG<\/h2>\n<p>The idea became widespread with graphical interfaces and word processors that displayed a document&#8217;s layout on screen. It replaced workflows in which text and formatting instructions were entered first and the result could only be checked afterwards.<\/p>\n<p>It now appears in several environments:<\/p>\n<ul>\n<li><strong>Word processors:<\/strong> Microsoft Word and Google Docs represent styles, pages, images, and tables while a document is edited.<\/li>\n<li><strong>Content management systems:<\/strong> WordPress and Drupal include visual or block-based editors for preparing web content.<\/li>\n<li><strong>Rich-text editors:<\/strong> email, support, and documentation applications allow formatting and links to be applied without writing HTML.<\/li>\n<li><strong>Page builders:<\/strong> arrange sections and components on an approximate view of the published page.<\/li>\n<li><strong>Design tools:<\/strong> display the composition of graphics, presentations, or interfaces during creation.<\/li>\n<\/ul>\n<p>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.<\/p>\n<h2>WYSIWYG compared with code and WYSIWYM<\/h2>\n<p>WYSIWYG describes the relationship between the editing view and the output, not a language or file format. <strong>It may generate HTML, office documents, components, or other internal representations<\/strong>, depending on the application.<\/p>\n<p>These differences distinguish three main approaches:<\/p>\n<ul>\n<li><strong>WYSIWYG editing:<\/strong> the interface prioritises an approximate view of the output.<\/li>\n<li><strong>Code or markup editing:<\/strong> a person works directly with instructions such as HTML, CSS, or Markdown and checks the result in a separate preview.<\/li>\n<li><strong>WYSIWYM:<\/strong> <em>What You See Is What You Mean<\/em> prioritises structural meaning, such as a heading, quotation, or reference, while the system determines its final presentation.<\/li>\n<li><strong>Hybrid editing:<\/strong> combines visual blocks, structured fields, previews, and partial or complete access to code.<\/li>\n<\/ul>\n<p>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.<\/p>\n<h2>Advantages and limitations<\/h2>\n<p>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.<\/p>\n<p>However, <strong>a correct appearance in the editor does not guarantee a correct published result<\/strong>. A website may involve style sheets, scripts, permissions, dynamic content, screen sizes, and browser features that are absent from the editing view.<\/p>\n<p>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. <a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/web-accessibility\">Web accessibility<\/a> requires checking structure and behaviour as well as appearance.<\/p>\n<p>The final review therefore needs to use the relevant output format and contexts. <strong>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.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What WYSIWYG is, how visual editing works, where it is used, and its differences, advantages, and limitations.<\/p>\n","protected":false},"author":7,"featured_media":79675,"template":"","encyclopedia-tag":[1277],"class_list":["post-21672","encyclopedia","type-encyclopedia","status-publish","has-post-thumbnail","hentry","encyclopedia-tag-web-components"],"_links":{"self":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/encyclopedia\/21672","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/encyclopedia"}],"about":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/types\/encyclopedia"}],"author":[{"embeddable":true,"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/users\/7"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/media\/79675"}],"wp:attachment":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/media?parent=21672"}],"wp:term":[{"taxonomy":"encyclopedia-tag","embeddable":true,"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/encyclopedia-tag?post=21672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}