Skip to content
Glyph JS

Markdown in Components

GlyphJS automatically parses inline markdown in component text fields — no flag or option needed. Add bold, italic, code, and links anywhere a text field appears.

Supported Formatting

SyntaxResult
**text** or __text__Bold
*text* or _text_Italic
~~text~~Strikethrough
`text`Code
[text](url)Link

Block-level elements (headings, lists, code fences, blockquotes) are not supported in inline fields. Use the content field of ui:tabs or ui:steps for those — those fields go through full Markdown compilation.

Examples

```ui:callout
type: info
content: "Read the **[Getting Started Guide](../getting-started)** to learn more."
### Chart with formatted axis labels


```md
```ui:chart
title: Revenue by Quarter
type: bar
xAxis:
  key: quarter
  label: "Quarter *(2025)*"
yAxis:
  key: revenue
  label: "Revenue `($k)`"
series:
  - name: Sales
    data:
      - { quarter: Q1, revenue: 120 }
      - { quarter: Q2, revenue: 145 }
### Quiz with formatting


```md
```ui:quiz
questions:
  - type: multiple-choice
    question: "What does `Array.map()` return?"
    options:
      - "A *new* array"
      - "The **same** array"
      - "`undefined`"
    answer: 0
    explanation: "**`Array.map()`** always returns a *new* array with transformed elements."
### Graph with inline code in node labels


```md
```ui:graph
type: dag
nodes:
  - id: input
    label: "`input.md` file"
  - id: compile
    label: "**Compile** step"
  - id: output
    label: "*IR* output"
edges:
  - from: input
    to: compile
  - from: compile
    to: output
## Supported Components


Inline markdown is active in **26 components** across all text fields:


### Text-heavy
- **Callout**: `content`, `title`
- **Card**: `cards[].body`, `cards[].subtitle`
- **Accordion**: `sections[].content`
- **Timeline**: `events[].title`, `events[].description`
- **Tabs**: `tabs[].label`
- **Kanban**: `cards[].title`, `cards[].description`


### Interactive
- **Quiz**: `questions[].question`, `questions[].explanation`, `questions[].options[]`
- **Poll**: `question`, `options[]`
- **Rating**: `items[].label`, `items[].description`
- **Ranker**: `items[].label`
- **Slider**: `parameters[].label`
- **Matrix**: `rows[].label`, `columns[].label`


### Data & Visualization
- **KPI**: `metrics[].label`
- **Comparison**: `options[].description`, `features[].values[]`
- **Infographic**: `sections[].items[].text`, `sections[].items[].description`
- **Annotate**: `annotations[].text`
- **Form**: `description`
- **Table**: `columns[].label`
- **Chart**: `xAxis.label`, `yAxis.label`, `series[].name`
- **Equation**: `label`, `steps[].annotation`
- **CodeDiff**: `beforeLabel`, `afterLabel`


### Diagrams
- **Graph**: `nodes[].label`, `edges[].label`
- **Relation**: `entities[].label`, `relationships[].label`, `entities[].attributes[].name`
- **Flowchart**: `title`, `nodes[].label`, `edges[].label`
- **Sequence**: `title`, `actors[].label`, `messages[].label`


:::note
**Architecture**, **FileTree**, and **MindMap** use SVG rendering and receive plain text via `inlineToText()`. Inline markdown syntax in those fields is stripped to its text content.
:::


## Full Markdown in Container Content


`ui:tabs` and `ui:steps` content fields compile the full Markdown recursively — you can embed any `ui:` component, code fence, list, or blockquote inside a `content:` field:


```md
```ui:steps
steps:
  - title: Install
    content: |
      Run your package manager:


      ```bash
      pnpm add @glyphjs/runtime @glyphjs/components
  • title: Configure content: | 
    type: tip
    content: Copy the starter config from the docs.

TypeScript

Fields with inline markdown support use the string | InlineNode[] union type. The RichText component handles both:

import type { InlineNode } from '@glyphjs/types'
import { RichText } from '@glyphjs/runtime'


interface CalloutData {
  type: 'info' | 'warning' | 'error' | 'tip'
  title?: string | InlineNode[]
  content: string | InlineNode[]
}


<RichText content={data.content} />

Learn More