Chronos UI/ WYSIWYG Renderer
View Source
✍ Component

WYSIWYG Renderer

Safely renders rich-text HTML from a CMS with scoped typography styles and dark-mode support.

npm install @chronos-ui/core

Interactive Demo Playground

<wysiwyg-renderer> Playground
⚙️ Configure Properties
Raw HTML string to render. Must be sanitized before passing.

Usage Code Generator 

import WysiwygRenderer from '@chronos-ui/core/react/WysiwygRenderer';
import '@chronos-ui/core/theme.css';

// html comes from your CMS API response
const html = `<h2>Autumn Collection</h2><p>...</p>`;

<WysiwygRenderer content={html} />
<script lang="ts">
  import WysiwygRenderer from '@chronos-ui/core/svelte/WysiwygRenderer.svelte';
  const html = '<h2>Hello</h2><p>World</p>';
</script>

<WysiwygRenderer content={html} />
<script type="module"
  src="node_modules/@chronos-ui/core/webcomponents/WysiwygRenderer.js"></script>

<wysiwyg-renderer
  content="<h2>Hello</h2><p>World</p>"
></wysiwyg-renderer>

Props API Reference

No props parsed.

Security: This component renders raw HTML. Always sanitise untrusted CMS content server-side (e.g. with DOMPurify) before passing it to content.