Rendering Rich Text Safely in TanStack Start with Directus, DOMPurify & Tailwind Typography

If you're using Directus as a headless CMS, the built-in WYSIWYG editor outputs raw HTML. The challenge is rendering it in React safely, with proper styling, and without reaching for dangerouslySetInnerHTML . Here's how to solve it with three packages working together. The Stack DOMPurify — sanitizes HTML, stripping XSS vectors before they touch the DOM html-react-parser — converts sanitized HTML into React elements Tailwind CSS v4 Typography — styles everything automatically with the prose class Installing the Packages npm install dompurify html-react-parser npm install @tailwindcss/typography Step 1 — Sanitize the HTML Create a reusable utility function that runs DOMPurify on any HTML string coming from Directus. The typeof window === 'undefined' guard handles SSR — DOMPurify is browser-only. export const sanitizeHtml = ( html : string ) => { if ( typeof window === ' undefined ' ) return html ; return DOMPurify . sanitize ( html ); }; Step 2 — Parse and Render Pass the sanitized HTML