Dashboards, chat windows, and admin panels frequently need to render rich content — markdown from a CMS, HTML from a server — but raw dangerouslySetInnerHTML is unsafe (allows scripts, iframes, event handlers), lacks typography defaults, and breaks when you need custom components. Rolling your own sanitizer, markdown parser, and tag-to-component router repeats work across projects.

ContentRenderer is a controlled component that accepts a value string, auto-detects HTML or Markdown format, sanitizes against injection attacks by default, applies built-in prose typography (headings, links, lists, blockquotes, code), and renders custom tag extensions via a global or per-instance RenderExtension registry. Props: format (auto | html | markdown), lineSpacing (line-height CSS), className (Tailwind), extensions (per-instance handlers), unsafe (skip sanitization for trusted content).

Import ContentRenderer from @particle-academy/react-fancy and render with value={markdown}. For custom components, define RenderExtension with tag and component, register globally via registerExtension({ tag: "thinking", component: Box }), then wrap content in matching tags. The component parses attributes and passes content and attributes to your extension component.