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

Live Preview

WysiwygRenderer — sample rich-text output

Autumn Collection 2026

This season we're embracing earthy tones and textured fabrics. Our designers worked with sustainable mills across Europe.

"Fashion is not something that exists in dresses only."
— Coco Chanel

New pieces are available now. Use code AUTUMN20 for 20% off.

Usage 

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

No props parsed — ensure the .lite.tsx interface matches the naming convention.

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