Rich Text & Inline Styling

This is critical for industries like pharmaceutical, legal, nutraceutical, and scientific publishing where precise typographic control is a compliance and communication requirement.

Why Rich Text Matters#

Most image generation tools treat text as a flat string with uniform styling. If you need "DRUGNAME**®** — 25 mg/m²" with the registered trademark as superscript and the dosage exponent as superscript, you'd need multiple separate text elements carefully positioned to simulate mixed formatting.

RenderStack's rich text system handles this natively in a single text frame, making it possible to:

• Bold drug names while keeping dosages in normal weight
• Add superscript for trademarks (™, ®), dosage notations (mg/m²), and footnote markers (¹²³)
• Add subscript for chemical formulas (H₂O, CO₂, Na₂SO₄)
• Mix font families within a single text block
• Apply per-word colors and highlights
• Combine strikethrough with other styles for superseded information

Three Ways to Provide Rich Text#

RenderStack offers three properties for text content, each with a different level of formatting control:

Property	Format	Use Case
text	Plain string	Simple text with no inline formatting -- every character is literal
richText	Markdown-like shorthand	Quick formatting using familiar syntax
textRuns	Structured JSON array	Full control over every character's styling

Priority: textRuns > richText > text. If multiple properties are provided, the highest-priority one is used. The property name declares intent -- no ambiguity between markup and literal text.

Using the On-Canvas Inline Editor#

Entering Edit Mode#

1. Double-click any text element on the canvas to enter inline editing mode
2. The text becomes editable directly on the canvas
3. A floating formatting toolbar appears above the selection

Selecting and Formatting Text#

1. Select the text you want to format by clicking and dragging
2. Use the floating toolbar to apply styles:
   • B -- Bold
   • I -- Italic
   • U -- Underline
   • S -- Strikethrough
   • x² -- Superscript
   • x₂ -- Subscript
   • Color picker -- Text color
   • Highlight picker -- Background highlight color
   • Font selector -- Change font for selected text
   • Size selector -- Change font size for selected text
3. Click outside the text element to exit edit mode

Tips for On-Canvas Editing#

• You can apply multiple styles to the same selection (e.g., bold + italic + colored)
• Superscript and subscript are mutually exclusive -- enabling one disables the other
• Font and size changes apply only to the selected text, not the entire element
• The element's base styles (set in the properties panel) apply to any text without explicit overrides

Properties Panel: Visual and Markdown Modes#

The properties panel offers two modes for editing rich text content:

Visual Mode#

The Visual mode provides a WYSIWYG editor in the properties panel with a formatting toolbar. This is the same editing experience as the on-canvas editor, but within the side panel. Use this when you want to see formatting as you type.

Markdown Mode#

The Markdown mode lets you type richText shorthand syntax directly. This is useful for developers who prefer typing formatting codes or for pasting pre-formatted content. The preview updates in real-time as you type.

textRuns Structure#

The textRuns property is a JSON array of "run" objects. Each run is a segment of text with its own style overrides. Styles inherit from the element's base properties unless explicitly set.

Run Properties#

Property	Type	Description
text	string (required)	The text content for this run
bold	boolean	Bold weight
italic	boolean	Italic style
underline	boolean	Underline decoration
strikethrough	boolean	Strikethrough decoration
color	string (hex)	Text color (e.g., "#FF0000")
highlight	string (hex)	Background highlight color
font	string	Font family name (must be available in the org's assets or system fonts)
fontSize	number	Font size in pixels
superscript	boolean	Render as superscript (raised, smaller)
subscript	boolean	Render as subscript (lowered, smaller)

Basic Example#

{
  "textRuns": [
    { "text": "Hello ", "bold": true },
    { "text": "World", "color": "#FF5733", "italic": true }
  ]
}

This renders "Hello World" with "World" in orange-red italic.

Pharmaceutical Label Example#

{
  "textRuns": [
    { "text": "ZYRTEC", "bold": true, "fontSize": 28 },
    { "text": "®", "superscript": true, "fontSize": 28 },
    { "text": "\n" },
    { "text": "Active ingredient: ", "color": "#666666" },
    { "text": "cetirizine HCl 10 mg", "bold": true },
    { "text": "\nDosage: 25 mg/m" },
    { "text": "2", "superscript": true },
    { "text": " body surface area" }
  ]
}

Legal Disclosure Example#

{
  "textRuns": [
    { "text": "Annual Rate: ", "fontSize": 24 },
    { "text": "4.99% APR", "bold": true, "fontSize": 28, "color": "#1a6b3c" },
    { "text": "1", "superscript": true, "fontSize": 28 },
    { "text": "\n" },
    { "text": "Was ", "fontSize": 14, "color": "#666666" },
    { "text": "6.49% APR", "strikethrough": true, "fontSize": 14, "color": "#999999" },
    { "text": "\n" },
    { "text": "1", "superscript": true, "fontSize": 10, "color": "#999999" },
    { "text": "Rate effective as of 01/01/2026. Subject to change.", "fontSize": 10, "color": "#999999" }
  ]
}

Scientific Notation Example#

{
  "textRuns": [
    { "text": "E=mc" },
    { "text": "2", "superscript": true },
    { "text": "  |  H" },
    { "text": "2", "subscript": true },
    { "text": "O  |  CO" },
    { "text": "2", "subscript": true }
  ]
}

Limits#

• Maximum 100 runs per text element
• Each run must have a non-empty text property
• Use "\n" for line breaks within runs

richText Markdown Shorthand#

The richText property accepts a Markdown-like syntax for common formatting. This is more concise than textRuns and useful for simpler formatting needs.

Syntax Reference#

Syntax	Effect	Example
**text**	Bold	**Important**
*text*	Italic	*emphasis*
__text__	Underline	__defined term__
~~text~~	Strikethrough	~~old price~~
{color:#hex}text{/color}	Text color	{color:#FF0000}red text{/color}
{hl:#hex}text{/hl}	Highlight	{hl:#FFFF00}highlighted{/hl}
{sup}text{/sup}	Superscript	E=mc{sup}2{/sup}
{sub}text{/sub}	Subscript	H{sub}2{/sub}O
{font:Name}text{/font}	Font family	{font:Georgia}serif text{/font}

Combining Styles#

Styles can be nested:

**{color:#1a6b3c}4.99% APR{/color}**{sup}1{/sup}

This renders "4.99% APR" in bold green with a superscript footnote marker.

richText Example#

**DRUGNAME**{sup}®{/sup}
Active ingredient: **loratadine 10 mg**
Dosage: 25 mg/m{sup}2{/sup} body surface area

Priority Rules#

When multiple text properties are provided on the same layer override, RenderStack uses this priority:

1. textRuns (highest priority) -- If present, richText and text are ignored
2. richText -- If present and textRuns is not, text is ignored
3. text (lowest priority) -- Used only if neither textRuns nor richText is provided

This design ensures no ambiguity: the property name tells RenderStack whether the content is plain text, Markdown shorthand, or structured runs.

Superscript and Subscript#

Superscript#

Superscript renders text raised and smaller relative to the baseline. Common uses:

Use Case	Example
Trademark symbols	Brand™, Product®
Dosage notations	25 mg/m²
Footnote markers	See terms¹
Mathematical exponents	E=mc², x²
Ordinals	1st, 2nd, 3rd

Subscript#

Subscript renders text lowered and smaller relative to the baseline. Common uses:

Use Case	Example
Chemical formulas	H₂O, CO₂, Na₂SO₄
Mathematical indices	x₁, x₂, x₃
Scientific notation	Cₘₐₓ, Tₘₐₓ

Important Notes#

• Superscript and subscript are mutually exclusive on the same run
• They can be combined with bold, italic, color, and other styles
• Font size inheritance: superscript/subscript text is automatically scaled smaller; if you set an explicit fontSize on a superscript/subscript run, that size is used as the base before scaling

Font Mixing#

You can use different font families within a single text frame by setting the font property on individual runs:

{
  "textRuns": [
    { "text": "Product Name", "font": "Montserrat", "bold": true, "fontSize": 24 },
    { "text": "\n" },
    { "text": "Clinical description in a serif font for readability.", "font": "Georgia", "fontSize": 14 }
  ]
}

The fonts referenced must be available -- either as uploaded assets in your organization or as system fonts. If a font is not found, the element's base font is used as a fallback.

API Usage#

POST Render with textRuns#

curl -X POST https://your-app.replit.app/api/v1/renders/sync \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "pharma-card",
    "layers": {
      "drug_info": {
        "textRuns": [
          { "text": "DRUGNAME", "bold": true, "fontSize": 28 },
          { "text": "®", "superscript": true },
          { "text": "\nDosage: 25 mg/m" },
          { "text": "2", "superscript": true }
        ]
      }
    },
    "format": "png"
  }'

POST Render with richText#

curl -X POST https://your-app.replit.app/api/v1/renders/sync \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "pharma-card",
    "layers": {
      "drug_info": {
        "richText": "**DRUGNAME**{sup}®{/sup}\nDosage: 25 mg/m{sup}2{/sup}"
      }
    },
    "format": "png"
  }'

GET URL with richText (Markdown in Query Parameter)#

For dynamic image URLs via GET, use the richText property in the query string:

https://your-app.replit.app/api/v1/render/pharma-card.png?drug_info.richText=**DRUGNAME**{sup}®{/sup}

URL-encode the value as needed for special characters.

Industry-Specific Examples#

Pharmaceutical#

Generate compliant drug labels and product cards with proper dosage notation:

{
  "drug_info": {
    "textRuns": [
      { "text": "METFORMIN", "bold": true, "fontSize": 24 },
      { "text": "®", "superscript": true },
      { "text": " HCl Tablets", "fontSize": 20 },
      { "text": "\n500 mg, 850 mg, 1000 mg", "fontSize": 16, "color": "#444444" },
      { "text": "\nMax daily dose: 2550 mg/m" },
      { "text": "2", "superscript": true }
    ]
  }
}

Legal & Financial#

Generate disclosure images with footnote markers and rate comparisons:

{
  "rate_card": {
    "textRuns": [
      { "text": "Fixed Rate: ", "fontSize": 20 },
      { "text": "3.75% APR", "bold": true, "fontSize": 24, "color": "#0a5c36" },
      { "text": "*", "superscript": true },
      { "text": "\nPrevious: ", "fontSize": 12, "color": "#888888" },
      { "text": "5.25% APR", "strikethrough": true, "fontSize": 12, "color": "#888888" },
      { "text": "\n" },
      { "text": "*", "superscript": true, "fontSize": 9, "color": "#999999" },
      { "text": "Subject to credit approval. See disclosures.", "fontSize": 9, "color": "#999999" }
    ]
  }
}

Scientific & Academic#

Generate social cards and abstract images with proper notation:

{
  "abstract_title": {
    "textRuns": [
      { "text": "Relationship between CO" },
      { "text": "2", "subscript": true },
      { "text": " concentration and temperature" },
      { "text": "\n" },
      { "text": "Published in ", "italic": true, "fontSize": 14, "color": "#666666" },
      { "text": "Nature Climate Change", "italic": true, "bold": true, "fontSize": 14, "color": "#666666" },
      { "text": " (2026)", "italic": true, "fontSize": 14, "color": "#666666" }
    ]
  }
}

Nutraceutical & Supplements#

Generate product cards with supplement facts formatting:

{
  "product_info": {
    "textRuns": [
      { "text": "OMEGA-3 PLUS", "bold": true, "fontSize": 22 },
      { "text": "™", "superscript": true },
      { "text": "\nEPA 500 mg / DHA 250 mg", "fontSize": 14 },
      { "text": "\n" },
      { "text": "Daily Value: 125%", "fontSize": 12 },
      { "text": "†", "superscript": true, "fontSize": 12 },
      { "text": "\n" },
      { "text": "†", "superscript": true, "fontSize": 9, "color": "#999999" },
      { "text": "Percent Daily Values based on a 2,000 calorie diet.", "fontSize": 9, "color": "#999999" }
    ]
  }
}

Related Documentation#

• Template Editor Guide -- Full editor documentation
• Layer Management -- Managing dynamic and static layers
• Rendering -- Render API reference
• API Reference -- Complete API endpoint documentation