RichText

Rich text component that supports HTML formatting such as bold, italic, links, lists, and headings. All content is sanitized with DOMPurify for security.

Use Cases

• Formatted paragraphs with bold, italic, underline
• Content with links to external pages or sections
• Bulleted or numbered lists
• Multi-paragraph content with headings
• Terms & Conditions, Privacy Policy, legal text

Properties

richtext

HTML content with formatting. Sanitized with DOMPurify before rendering. Type: string. Default: <h2>Heading</h2><p>Body</p>

Tip: All HTML automatically sanitized to prevent XSS attacks. Scripts, iframes, and dangerous attributes are stripped.

Tip: Sanitization uses DOMPurify with allowed tags: p, br, strong, em, u, a, ul, ol, li, h1-h6, blockquote, code, pre, span, div. Allowed attributes: href, class, title, target, rel, style. URLs are restricted to https and mailto.

customCss

Custom CSS styles for advanced styling. Parsed as CSS property-value pairs. Type: string.

Tip: Parsed by cssParser utility. Tenants only affect their own pages (multi-tenant isolation enforced).

Best Practices

• Use RichText for formatted content with HTML – use Text for plain text
• All HTML is sanitized with DOMPurify automatically (XSS protection)
• Allowed tags: p, br, strong, em, u, a, ul, ol, li, h1-h6, blockquote, code, pre, span, div
• Links automatically get target='blank' and rel='noopener noreferrer' for security
• Keep content focused and scannable – use headings and lists for structure

Common Mistakes

Using Text component for formatted content

Why it's a problem: Text only supports plain text - HTML tags will be displayed as raw text

Fix: Use RichText for any content with bold, italic, links, or HTML formatting

Not wrapping content in HTML tags (bare text)

Why it's a problem: HTML requires proper structure - bare text won’t have proper spacing/formatting

Fix: Wrap paragraphs in <p> tags, lists in <ul>/<ol> tags, etc.

Using inline styles or javascript: URLs

Why it's a problem: DOMPurify strips these for security (XSS prevention)

Fix: Use semantic HTML tags and allowed attributes only. No inline styles, no javascript: URLs.

Forgetting that RichText is sanitized

Why it's a problem: Some HTML/attributes will be stripped automatically by DOMPurify

Fix: Stick to allowed tags: p, br, strong, em, u, a, ul, ol, li, h1-h6. Avoid scripts, iframes, onclick.