#

Hero

#

#

Hero

#

#

#

CMS

SC Rich Text Enhanced

SC Rich Text Enhanced

SC Rich Text Enhanced

Aug 28, 2025

0 views

A CMS-friendly rich-text renderer with precise spacing control, optional variable-font axes, scoped per-instance CSS injection, and a built-in HTML sanitizer (toggleable). Great for long-form articles, case-study bodies, and doc pages where you want consistent rhythm for paragraphs, lists, and headings.

Get Component

Get Component

Get Component

Get Component

Preview

Preview

Preview

Preview

Lilac Flower
Lilac Flower
Lilac Flower
Lilac Flower

[MAIN]

{#main}

[MAIN]

{#main}

[MAIN]

{#main}

[MAIN]

{#main}

[OVRV]

Overview

[OVRV]

Overview

[OVRV]

Overview

[OVRV]

Overview

#
Built With
React, CSS, Framer Code Component API
#
Layout Support
Fully Responsive
#
Orientation
Full Width Block
#
Ideal Use Case
Editorial content, documentation, CMS blog bodies
#
Built With
React, CSS, Framer Code Component API
#
Layout Support
Fully Responsive
#
Orientation
Full Width Block
#
Ideal Use Case
Editorial content, documentation, CMS blog bodies
#
Built With
React, CSS, Framer Code Component API
#
Layout Support
Fully Responsive
#
Orientation
Full Width Block
#
Ideal Use Case
Editorial content, documentation, CMS blog bodies

//

Tags

rich text
cms
typography
variable font
spacing
lists
headings
sanitizer
xss

[DEPS]

Dependencies

[DEPS]

Dependencies

[DEPS]

Dependencies

[DEPS]

Dependencies

//
Technologies
None (pure React + inline CSS)
//
Notes
No external libs. Styles are injected per-instance and removed on unmount.
//
Technologies
None (pure React + inline CSS)
//
Notes
No external libs. Styles are injected per-instance and removed on unmount.
//
Technologies
None (pure React + inline CSS)
//
Notes
No external libs. Styles are injected per-instance and removed on unmount.

[CMPLX]

Complexity

[CMPLX]

Complexity

[CMPLX]

Complexity

[CMPLX]

Complexity

#
Logic Level
Low–Medium (style injection + guards)
#
Runtime Cost
Very Low (static render; no heavy effects)
#
Component Size
~3–4 KB (raw TSX)
#
Notes
Sanitization is lightweight; for high-risk content consider a hardened sanitizer.
#
Logic Level
Low–Medium (style injection + guards)
#
Runtime Cost
Very Low (static render; no heavy effects)
#
Component Size
~3–4 KB (raw TSX)
#
Notes
Sanitization is lightweight; for high-risk content consider a hardened sanitizer.
#
Logic Level
Low–Medium (style injection + guards)
#
Runtime Cost
Very Low (static render; no heavy effects)
#
Component Size
~3–4 KB (raw TSX)
#
Notes
Sanitization is lightweight; for high-risk content consider a hardened sanitizer.

[GUIDE]

{#guide}

[GUIDE]

{#guide}

[GUIDE]

{#guide}

[GUIDE]

{#guide}

[STEP]

Instructions

[STEP]

Instructions

[STEP]

Instructions

[STEP]

Instructions

  1. Connect Content: Bind a CMS Rich Text field or paste HTML/markup into Content.

  2. Typography: Choose Font family/size/weight. Enable Variable Font to expose axes and set cssFontWeight fallback.

  3. Spacing: Tune Paragraph Gap, List Spacing (indent, item gaps, nested spacing), and Heading Spacing (H1–H6 top/bottom).

  4. Appearance: Set Background and Radius for the container block.

  5. Security: Leave XSS Protection on for untrusted content.

  6. Multiple Instances: Give each block a unique Section ID (scopes the injected CSS).

[EXMP]

Examples / Presets

[EXMP]

Examples / Presets

[EXMP]

Examples / Presets

[EXMP]

Examples / Presets

  • Article Default: paragraphGap=16, listSpacing.indent=24, heading defaults.

  • Compact Docs: paragraphGap=10, listSpacing.itemGap=4, headings −25% top/bottom.

  • Mono Notes: variableFont=on, MONO=1, wght=450; color=#0f0 on dark bg.

[MECH]

{#mechanics}

[MECH]

{#mechanics}

[MECH]

{#mechanics}

[MECH]

{#mechanics}

[HOW]

How it Works

[HOW]

How it Works

[HOW]

How it Works

[HOW]

How it Works

  • Scoped Styles: A unique class from sectionId is generated; a <style> tag with calculated rules is injected and cleaned up on unmount.

  • Variable Fonts: When enabled, the component builds a font-variation-settings string; if wght not used, falls back to cssFontWeight.

  • Sanitization (optional): Strips <script>, inline on* handlers, and javascript: URLs. If disabled, a subtle “XSS Protection Off” badge appears (non-interactive).

  • Rendering: If content is a string, it is (optionally sanitized and) rendered via dangerouslySetInnerHTML; if it’s React nodes, they’re rendered directly.

[PERF]

Performance & Tuning

[PERF]

Performance & Tuning

[PERF]

Performance & Tuning

[PERF]

Performance & Tuning

  • Most work is one-time (style inject). Keep sectionId stable to avoid unnecessary de-inject/re-inject cycles.

  • Prefer variable axes over many separate font weights to minimize layout shifts.

  • For very large articles, avoid deeply nested lists to keep layout calculations trivial.

[COMP]

Compatibility & Limits

[COMP]

Compatibility & Limits

[COMP]

Compatibility & Limits

[COMP]

Compatibility & Limits

  • Browsers: Modern evergreen (Chrome, Edge, Safari, Firefox).

  • Limits: Built-in sanitizer is intentionally small; for highly untrusted inputs, consider pre-sanitizing at the CMS or using a hardened sanitizer upstream.

  • CMS Quirks: Some editors output empty wrappers (<p class="framer-text"></p>). The component filters common empties.

[QUAL]

{#quality}

[QUAL]

{#quality}

[QUAL]

{#quality}

[QUAL]

{#quality}

[A11Y]

Accessibility

[A11Y]

Accessibility

[A11Y]

Accessibility

[A11Y]

Accessibility

  • Preserves semantic tags from your CMS; ensure headings remain in logical order.

  • Links remain underlined by default; color choices must meet contrast guidelines.

  • Placeholder state announces via aria-live="polite" when no content is connected.

[SEC]

Security & Privacy

[SEC]

Security & Privacy

[SEC]

Security & Privacy

[SEC]

Security & Privacy

  • Data Flow: No network calls; renders the content you provide.

  • Sanitizer: Removes <script>, inline events, and javascript: URLs. Toggle via XSS Protection.

  • Risk Note: Because dangerouslySetInnerHTML is used for string content, keep sanitization on for any untrusted input.

[REF]

{#reference}

[REF]

{#reference}

[REF]

{#reference}

[REF]

{#reference}

[API]

Props

[API]

Props

[API]

Props

[API]

Props

Name

Type

Default

Description

content

richtext/string

””

CMS Rich Text or HTML/JSX to render

sectionId

string

“section1”

Unique id to scope injected styles

font

font

Inter 1rem/400

Base typography for all content

color

string

#111

Text color

align

enum(“left”,“center”,“right”)

“left”

Paragraph alignment

paragraphSpacing

number

16

Gap between adjacent <p> blocks (px)

variableFont

boolean

false

Enable variable font axes

variableAxes

object

(MONO, CASL, CRSV, slnt, wght, cssFontWeight)

Axis values + CSS fallback

listSpacing

object

{indent:24,itemGap:8,blockTop:16,blockBottom:16,nestedTop:8,nestedBottom:8}

List rhythm controls

headingSpacing

object

{h1Top:32,h1Bottom:16,…h6Bottom:8}

Top/bottom margins per heading level

appearance

object

{backgroundColor:“transparent”,borderRadius:0}

Container styling

enableSanitization

boolean

true

Strip scripts/handlers/unsafe URLs

placeholderMinHeight

number

80

Min height for placeholder (px)

name:content
type:richtext/string
default:””
desc:CMS Rich Text or HTML/JSX to render
name:sectionId
type:string
default:“section1”
desc:Unique id to scope injected styles
name:font
type:font
default:Inter 1rem/400
desc:Base typography for all content
name:color
type:string
default:#111
desc:Text color
name:align
type:enum(“left”,“center”,“right”)
default:“left”
desc:Paragraph alignment
name:paragraphSpacing
type:number
default:16
desc:Gap between adjacent <p> blocks (px)
name:variableFont
type:boolean
default:false
desc:Enable variable font axes
name:variableAxes
type:object
default:(MONO, CASL, CRSV, slnt, wght, cssFontWeight)
desc:Axis values + CSS fallback
name:listSpacing
type:object
default:{indent:24,itemGap:8,blockTop:16,blockBottom:16,nestedTop:8,nestedBottom:8}
desc:List rhythm controls
name:headingSpacing
type:object
default:{h1Top:32,h1Bottom:16,…h6Bottom:8}
desc:Top/bottom margins per heading level
name:appearance
type:object
default:{backgroundColor:“transparent”,borderRadius:0}
desc:Container styling
name:enableSanitization
type:boolean
default:true
desc:Strip scripts/handlers/unsafe URLs
name:placeholderMinHeight
type:number
default:80
desc:Min height for placeholder (px)

Name

Type

Default

Description

name:content
type:richtext/string
default:””
desc:CMS Rich Text or HTML/JSX to render
name:sectionId
type:string
default:“section1”
desc:Unique id to scope injected styles
name:font
type:font
default:Inter 1rem/400
desc:Base typography for all content
name:color
type:string
default:#111
desc:Text color
name:align
type:enum(“left”,“center”,“right”)
default:“left”
desc:Paragraph alignment
name:paragraphSpacing
type:number
default:16
desc:Gap between adjacent <p> blocks (px)
name:variableFont
type:boolean
default:false
desc:Enable variable font axes
name:variableAxes
type:object
default:(MONO, CASL, CRSV, slnt, wght, cssFontWeight)
desc:Axis values + CSS fallback
name:listSpacing
type:object
default:{indent:24,itemGap:8,blockTop:16,blockBottom:16,nestedTop:8,nestedBottom:8}
desc:List rhythm controls
name:headingSpacing
type:object
default:{h1Top:32,h1Bottom:16,…h6Bottom:8}
desc:Top/bottom margins per heading level
name:appearance
type:object
default:{backgroundColor:“transparent”,borderRadius:0}
desc:Container styling
name:enableSanitization
type:boolean
default:true
desc:Strip scripts/handlers/unsafe URLs
name:placeholderMinHeight
type:number
default:80
desc:Min height for placeholder (px)

[NOTE]

Notes & Tips

[NOTE]

Notes & Tips

[NOTE]

Notes & Tips

[NOTE]

Notes & Tips

  • Preserves semantic tags from your CMS; ensure headings remain in logical order.

  • Links remain underlined by default; color choices must meet contrast guidelines.

  • Placeholder state announces via aria-live="polite" when no content is connected.

[FAQ]

Troubleshooting / FAQ

[FAQ]

Troubleshooting / FAQ

[FAQ]

Troubleshooting / FAQ

[FAQ]

Troubleshooting / FAQ

  • Data Flow: No network calls; renders the content you provide.

  • Sanitizer: Removes <script>, inline events, and javascript: URLs. Toggle via XSS Protection.

  • Risk Note: Because dangerouslySetInnerHTML is used for string content, keep sanitization on for any untrusted input.

[CRED]

{#credits-legal}

[CRED]

{#credits-legal}

[CRED]

{#credits-legal}

[CRED]

{#credits-legal}

[AUTH]

Credits

[AUTH]

Credits

[AUTH]

Credits

[AUTH]

Credits

Authored by SecretoCho Design. Design patterns informed by common editorial systems and variable-font practices.

SecretoCho Design 2025

[LEGAL]

Disclaimer

[LEGAL]

Disclaimer

[LEGAL]

Disclaimer

[LEGAL]

Disclaimer

Provided “as is” for content/UX rendering. You’re responsible for validating accessibility, performance, and content safety for your project and data sources.

SC Neon Wave Shader

SC Neon Wave Shader

SC Neon Wave Shader

SC Neon Wave Shader

SC Simple Data Display (Pattern)

SC Simple Data Display (Pattern)

SC Simple Data Display (Pattern)

SC Simple Data Display (Pattern)

Stay ahead of the curve with insights into emerging visualization trends and technologies.

SUBSCRIBE

SUBSCRIBE

SUBSCRIBE

SUBSCRIBE

About

Book a Call

Book a Call

Book a Call