Components typography

RichText

Rich text component supporting HTML formatting (bold, italic, links, lists, headings). Content is sanitized with DOMPurify for security.

Aggiornato Mar 6, 2026

RichText

Rich text component supporting HTML formatting (bold, italic, links, lists, headings). 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>

customCss

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

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.

Tag

richtext typography formatted paragraphs content with bulleted or

Componenti correlati

RichText

Pronto a costruire?

Inizia a creare la tua app gratuitamente con Qödiak.

Inizia gratis

Articoli correlati

AnimatedGradient

Smooth animated gradient background for modern, premium aesthetics. Supports linear and radial gradients with configurable colors, animation speed, and intensity. GPU‑accelerated for smooth 60fps performance.

Button

Interactive button component that supports link navigation, page data source operations (record navigation, new record, mode switching), form submission, and custom JavaScript execution. Save/Delete actions must use a custom‑script with navigation. Two visual variants are available, and the button can be enabled or disabled dynamically based on data context.

Calendar

A full‑featured calendar component built with react‑big‑calendar. It can display events in month, week, day, or agenda views and includes navigation and view‑switching capabilities, making it suitable for any site that needs scheduling, event management, or date visualization.

Card

Feature card component with an icon, title, description, and entrance animations. Ideal for showcasing features, services, or benefits in grid layouts with animation support.

Checkbox

A checkbox group component that lets users select multiple options from a predefined list. It renders a set of checkboxes with individual labels and can be arranged vertically or horizontally.

CountdownTimer

Real-time countdown timer component that displays the time remaining until a target date/time. It updates every second, offers customizable formatting, and shows a completion message when the countdown ends. Suitable for any site type.