Table of Contents

HTML viewer

Live demo

Node name: html-viewer

Embeds CSS and HTML code in the application:

  • the CSS is automatically added in a <style> tag in the <head> element of the document,
  • the HTML code is directly embedded in the page, on the site of the component (which acts as a slot).

Both CSS and HTML codes should be "pure":

  • The CSS content should be like the one you would find in a ".css" file (i.e. without any surrounding HTML tags)
  • and the HTML content should be like a snippet that you would find inside the <body> tag of an HTML page (i.e. without any surrounding <html> or <body> tags).

The HTML code is purified using the DOMPurify library: as a result, some cross-site attack vectors are disabled (scripts, javascript "onclick" events, hyperlinks, etc.).

Warning

The CSS code is not processed and may break the application if it is invalid or if it uses the !important rule while targeting pre-existing styles of the application.

Usage guidance

html-viewer is useful, but it should not be the preferred way to build application UI.

Prefer the following order of choice:

  1. Use standard FMK components when the expected result can be expressed with the existing UI abstraction.
  2. If the need is more specific but still belongs to the application UI, prefer a dedicated native UIComponent to isolate the custom rendering and keep the rest of the screen aligned with Neos patterns.
  3. Use html-viewer for controlled rich-content scenarios, such as rendering stored HTML snippets, CMS-like content, or externally produced markup that must be displayed as-is.

Why this guidance matters:

  • Standard FMK components are easier to maintain, theme, evolve, and keep consistent across the application.
  • A dedicated UIComponent localizes native HTML/CSS usage instead of spreading it across business screens.
  • Overusing html-viewer for layout or application structure weakens the Neos UI abstraction and makes long-term maintenance harder.

If the content is markdown rather than raw HTML, prefer markdown-viewer because it is simpler to author and safer to expose.

Attributes

Attribute Type Required Default value Description
html string true The HTML content.
css string false The CSS content.

The attributes of the component should be bound to fields. It is not possible to provide a static string directly in the template: for instance, <html-viewer html="Hello, <b>World</b>!" /> is invalid.

The use of the CSS attribute is not mandatory. It is actually possible to provide CSS content directly within the HTML, via the <style> element, or using inline styles.

Examples

<html-viewer html="@Fields.HtmlSource" />

<html-viewer html="@Fields.HtmlSource" css="@Fields.CssSource" />