Contra - A professional network for the jobs and skills of the futureSafely Render Rich Text from Directus Using Tanstack Start
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Wade's avatar
Wade Thomas
• Mar 30
Rendering Rich Text Safely from Directus in Tanstack Start
If you're using Directus as your headless CMS, the WYSIWYG editor outputs raw HTML — and you need a safe, styled way to render it on the frontend without reaching for dangerouslySetInnerHTML.
Here's the stack I use:
DOMPurify sanitizes the HTML output before it touches the DOM, stripping any XSS vectors while preserving legitimate markup.
html-react-parser converts the sanitized HTML string directly into React elements — no unsafe HTML injection needed.
Tailwind CSS v4 Typography handles all the visual formatting automatically. Headings, lists, bold text, spacing — all styled to match your design system, with full dark mode support via prose-invert.
export const sanitizeHtml = (html: string) => {
  if (typeof window === 'undefined') return html;
  return DOMPurify.sanitize(html);
};
<div className="prose dark:prose-invert prose-ul:text-foreground
  prose-li:marker:text-foreground prose-strong:text-foreground max-w-none">
  {parse(sanitizeHtml(product.description))}
</div>
The result is rich, formatted content that's XSS-safe, dark mode ready, and fully integrated with your design tokens — pulled straight from the Directus editor with no extra effort.
DirectusTailwind CSSReact
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started