Note

This documentation describes the HtmlViewer Vue component for native UI views for Xml templates see html-viewer.

HtmlViewer

Renders sanitized HTML content. Optionally injects custom CSS into the document <head> for the duration the component is mounted.

Import

import { HtmlViewer } from '@neos/design-system'

Props

Prop	Type	Default	Description
`html`	`string`	—	Required. Raw HTML string to render. Sanitized via DOMPurify before insertion
`css`	`string`	`undefined`	Optional CSS rules injected as a `<style>` tag into `<head>` (removed on component unmount)

Notes

HTML is sanitized using DOMPurify to prevent XSS. Dangerous elements and attributes are stripped.
When css is provided, a unique <style> tag is injected into <head> on mount and removed on unmount.

Usage Examples

Render rich text content from a property

<HtmlViewer :html="viewModel.current.description" />

Render content with custom scoped styles

<HtmlViewer
  :html="reportContent"
  css=".highlight { background-color: yellow; font-weight: bold; }"
/>

Bound display inside a form

<GroupBox>
  <template #header><Text>Notes</Text></template>
  <template #content>
    <HtmlViewer :html="viewModel.current.notes" />
  </template>
</GroupBox>

Table of Contents