Streamdown

https://streamdown.ai/docs
Admin
Streamdown is a React component library designed for AI-powered streaming, which seamlessly renders...
Tokens:64,884
Snippets:759
Trust Score:7.4
Update:4 weeks ago
Show doc for...
Tokens:
Raw
### Install @streamdown/math with bun

Source: https://streamdown.ai/docs/plugins/math

Install the plugin using bun.

```bash
bun add @streamdown/math
```

--------------------------------

### Install @streamdown/mermaid with bun

Source: https://streamdown.ai/docs/plugins/mermaid

Install the plugin using bun.

```bash
bun add @streamdown/mermaid
```

--------------------------------

### Install @streamdown/math with pnpm

Source: https://streamdown.ai/docs/plugins/math

Install the plugin using pnpm.

```bash
pnpm add @streamdown/math
```

--------------------------------

### Install @streamdown/math with yarn

Source: https://streamdown.ai/docs/plugins/math

Install the plugin using yarn.

```bash
yarn add @streamdown/math
```

--------------------------------

### Install @streamdown/code with bun

Source: https://streamdown.ai/docs/plugins/code

Install the plugin using bun.

```bash
bun add @streamdown/code
```

--------------------------------

### Install @streamdown/mermaid with yarn

Source: https://streamdown.ai/docs/plugins/mermaid

Install the plugin using yarn.

```bash
yarn add @streamdown/mermaid
```

--------------------------------

### Install @streamdown/mermaid with pnpm

Source: https://streamdown.ai/docs/plugins/mermaid

Install the plugin using pnpm.

```bash
pnpm add @streamdown/mermaid
```

--------------------------------

### Install @streamdown/cjk with bun

Source: https://streamdown.ai/docs/plugins/cjk

Install the plugin using bun. Run this command in your project directory.

```bash
bun add @streamdown/cjk
```

--------------------------------

### Install only @streamdown/math for math rendering

Source: https://streamdown.ai/docs/usage

Install just the math plugin for math rendering.

```bash
# Just math
npm install @streamdown/math
```

--------------------------------

### Install Vega-Lite dependencies

Source: https://streamdown.ai/docs/custom-renderers

Install the required packages to enable Vega-Lite chart rendering.

```bash
npm install vega vega-lite vega-embed
```

--------------------------------

### Install @streamdown/mermaid with npm

Source: https://streamdown.ai/docs/plugins/mermaid

Install the plugin using npm. This is the default package manager shown in the installation tabs.

```bash
npm install @streamdown/mermaid
```

--------------------------------

### Install plugins with npm, pnpm, yarn, and bun

Source: https://streamdown.ai/docs/usage

Install all optional plugins: @streamdown/code, @streamdown/mermaid, @streamdown/math, and @streamdown/cjk. Choose your package manager.

```bash
npm install @streamdown/code @streamdown/mermaid @streamdown/math @streamdown/cjk
```

```bash
pnpm add @streamdown/code @streamdown/mermaid @streamdown/math @streamdown/cjk
```

```bash
yarn add @streamdown/code @streamdown/mermaid @streamdown/math @streamdown/cjk
```

```bash
bun add @streamdown/code @streamdown/mermaid @streamdown/math @streamdown/cjk
```

--------------------------------

### Install @streamdown/code with pnpm

Source: https://streamdown.ai/docs/plugins/code

Install the plugin using pnpm.

```bash
pnpm add @streamdown/code
```

--------------------------------

### Install @streamdown/code with yarn

Source: https://streamdown.ai/docs/plugins/code

Install the plugin using yarn.

```bash
yarn add @streamdown/code
```

--------------------------------

### Install @streamdown/cjk with npm

Source: https://streamdown.ai/docs/plugins/cjk

Install the plugin using npm. Run this command in your project directory.

```bash
npm install @streamdown/cjk
```

--------------------------------

### Install @streamdown/cjk with pnpm

Source: https://streamdown.ai/docs/plugins/cjk

Install the plugin using pnpm. Run this command in your project directory.

```bash
pnpm add @streamdown/cjk
```

--------------------------------

### Install @streamdown/cjk with yarn

Source: https://streamdown.ai/docs/plugins/cjk

Install the plugin using yarn. Run this command in your project directory.

```bash
yarn add @streamdown/cjk
```

--------------------------------

### Install only @streamdown/mermaid for diagrams

Source: https://streamdown.ai/docs/usage

Install just the mermaid plugin for diagrams.

```bash
# Just diagrams
npm install @streamdown/mermaid
```

--------------------------------

### Install Streamdown with bun

Source: https://streamdown.ai/docs/migrate

Install the Streamdown package using bun.

```bash
bun add streamdown
```

--------------------------------

### Install @streamdown/code with npm

Source: https://streamdown.ai/docs/plugins/code

Install the plugin using npm.

```bash
npm install @streamdown/code
```

--------------------------------

### Minimal Gray Theme configuration

Source: https://streamdown.ai/docs/styling

A quick theme example for a minimal gray aesthetic.

```css
:root {
  --primary: 0 0% 20%;
  --muted: 0 0% 96%;
  --border: 0 0% 90%;
  --radius: 0.25rem;
}
```

--------------------------------

### Install @streamdown/math with npm

Source: https://streamdown.ai/docs/plugins/math

Install the plugin using npm. This is the default package manager shown in the tabs.

```bash
npm install @streamdown/math
```

--------------------------------

### Install only @streamdown/code for syntax highlighting

Source: https://streamdown.ai/docs/usage

Install just the code plugin for syntax highlighting.

```bash
# Just syntax highlighting
npm install @streamdown/code
```

--------------------------------

### Install Streamdown with yarn

Source: https://streamdown.ai/docs/migrate

Install the Streamdown package using yarn.

```bash
yarn add streamdown
```

--------------------------------

### Install only @streamdown/cjk for CJK support

Source: https://streamdown.ai/docs/usage

Install just the cjk plugin for CJK support.

```bash
# Just CJK support
npm install @streamdown/cjk
```

--------------------------------

### Flowchart Example

Source: https://streamdown.ai/docs/plugins/mermaid

Creates a flowchart to visualize a process. The example shows a simple decision tree with nodes and edges. Use this as a template for basic flowcharts.

```mermaid
graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]
```

--------------------------------

### Install AntV Infographic package

Source: https://streamdown.ai/docs/custom-renderers

Install the AntV Infographic package to support infographic rendering.

```bash
npm install @antv/infographic
```

--------------------------------

### Git Graph Example

Source: https://streamdown.ai/docs/plugins/mermaid

Visualizes Git workflows with commits, branches, and merges. The example shows a typical feature branch workflow. Use this to illustrate version control processes.

```mermaid
gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
```

--------------------------------

### Gantt Chart Example

Source: https://streamdown.ai/docs/plugins/mermaid

Plans and tracks project timelines with sections and tasks. The example shows a project schedule with design, development, and testing phases. Use this for project management visualization.

```mermaid
gantt
    title Project Schedule
    dateFormat YYYY-MM-DD
    section Design
    Wireframes       :2024-01-01, 7d
    Mockups         :2024-01-08, 7d
    section Development
    Frontend        :2024-01-15, 14d
    Backend         :2024-01-15, 14d
    section Testing
    QA Testing      :2024-01-29, 7d
```

--------------------------------

### Install Streamdown with pnpm

Source: https://streamdown.ai/docs/migrate

Install the Streamdown package using pnpm.

```bash
pnpm add streamdown
```

--------------------------------

### Install Streamdown with npm

Source: https://streamdown.ai/docs/migrate

Install the Streamdown package using npm.

```bash
npm i streamdown
```

--------------------------------

### Vega-Lite chart output example

Source: https://streamdown.ai/docs/custom-renderers

Example of a Vega-Lite JSON specification that can be output by the AI once the renderer is registered.

```markdown
```vega-lite
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": "container",
  "height": 200,
  "data": {
    "values": [
      {"month": "Jan", "revenue": 28},
      {"month": "Feb", "revenue": 55},
      {"month": "Mar", "revenue": 43}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "month", "type": "nominal"},
    "y": {"field": "revenue", "type": "quantitative"}
  }
}
```
```

--------------------------------

### Pie Chart Example

Source: https://streamdown.ai/docs/plugins/mermaid

Displays proportional data as a pie chart. The example shows project time distribution across categories. Use this to visualize percentages or shares.

```mermaid
pie title Project Time Distribution
    "Development" : 45
    "Testing" : 20
    "Documentation" : 15
    "Meetings" : 20
```

--------------------------------

### State Diagram Example

Source: https://streamdown.ai/docs/plugins/mermaid

Models a state machine with transitions. The example shows states like Idle, Loading, Success, and Error with transitions. Use this to document state-dependent behavior.

```mermaid
stateDiagram-v2
    [*] --> Idle
    Idle --> Loading: start
    Loading --> Success: data received
    Loading --> Error: failed
    Success --> Idle: reset
    Error --> Loading: retry
    Success --> [*]
```

--------------------------------

### Sequence Diagram Example

Source: https://streamdown.ai/docs/plugins/mermaid

Visualizes interactions between actors and systems. The example shows a user, browser, server, and database exchanging messages. Use this to model request-response flows.

```mermaid
sequenceDiagram
    participant User
    participant Browser
    participant Server
    participant Database

    User->>Browser: Enter URL
    Browser->>Server: HTTP Request
    Server->>Database: Query data
    Database-->>Server: Return results
    Server-->>Browser: HTTP Response
    Browser-->>User: Display page
```

--------------------------------

### Vibrant Blue Theme configuration

Source: https://streamdown.ai/docs/styling

A quick theme example for a vibrant blue aesthetic.

```css
:root {
  --primary: 217 91% 60%;
  --muted: 214 100% 97%;
  --border: 214 32% 91%;
  --radius: 0.75rem;
}
```

--------------------------------

### Class Diagram Example

Source: https://streamdown.ai/docs/plugins/mermaid

Documents object-oriented designs with classes and relationships. The example shows User and Post classes with attributes and methods, and a one-to-many relationship. Use this to model class structures.

```mermaid
classDiagram
    class User {
        +String name
        +String email
        +login()
        +logout()
    }
    class Post {
        +String title
        +String content
        +Date createdAt
        +publish()
    }
    User "1" --> "*" Post: creates
```

--------------------------------

### Install AI Elements message component with npm, pnpm, yarn, or bun

Source: https://streamdown.ai/docs/getting-started

Install the `message` component from AI Elements using your preferred package manager. The commands are equivalent alternatives for npm, pnpm, yarn, and bun.

```bash
npx ai-elements@latest add message
```

```bash
pnpm dlx ai-elements@latest add message
```

```bash
yarn dlx ai-elements@latest add message
```

```bash
bun x ai-elements@latest add message
```

--------------------------------

### Example markdown for link restriction

Source: https://streamdown.ai/docs/security

Example markdown input for the link restriction configuration. The safe link works normally, while the unsafe link renders as `[blocked]`.

```markdown
[Safe link](https://github.com/vercel/streamdown)
[Unsafe link](https://malicious-site.com)
```

--------------------------------

### Install @streamdown/code with npm, pnpm, yarn, or bun

Source: https://streamdown.ai/docs/code-blocks

Provides the package manager commands to install the @streamdown/code plugin for syntax highlighting.

```bash
npm install @streamdown/code
```

```bash
pnpm add @streamdown/code
```

```bash
yarn add @streamdown/code
```

```bash
bun add @streamdown/code
```

--------------------------------

### Adding Context to Equations

Source: https://streamdown.ai/docs/plugins/math

Explain your equations with surrounding text. The example shows the Pythagorean theorem with a description of the variables.

```markdown
The Pythagorean theorem states that for a right triangle:

$$
a^2 + b^2 = c^2
$$

where $$a$$ and $$b$$ are the legs and $$c$$ is the hypotenuse.
```

--------------------------------

### Install Streamdown with npm, pnpm, yarn, or bun

Source: https://streamdown.ai/docs/getting-started

Install the Streamdown package directly using your preferred package manager. The commands are equivalent alternatives for npm, pnpm, yarn, and bun.

```bash
npm i streamdown
```

```bash
pnpm add streamdown
```

```bash
yarn add streamdown
```

```bash
bun add streamdown
```

--------------------------------

### Example usage: custom heading, link, code block, table, and blockquote styles

Source: https://streamdown.ai/docs/styling

Practical CSS example showing how to customize headings, links, code blocks, tables, and blockquotes using the data-streamdown attribute. Includes hover states and gradient backgrounds.

```css
/* Custom heading styles */
[data-streamdown="heading-1"] {
  color: #1a202c;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 0.5rem;
}

[data-streamdown="heading-2"] {
  color: #2d3748;
  margin-top: 2rem;
}

/* Custom link appearance */
[data-streamdown="link"] {
  color: #3182ce;
  text-decoration: none;
  border-bottom: 1px solid #90cdf5;
  transition: border-color 0.2s;
}

[data-streamdown="link"]:hover {
  border-bottom-color: #3182ce;
}

/* Custom code block styling */
[data-streamdown="code-block"] {
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Custom table styling */
[data-streamdown="table"] {
  border-radius: 0.5rem;
  overflow: hidden;
}

[data-streamdown="table-header"] {
  background: linear-gradient(to bottom, #f7fafc, #edf2f7);
}

/* Custom blockquote styling */
[data-streamdown="blockquote"] {
  background-color: #f7fafc;
  border-left-color: #4299e1;
  border-radius: 0.25rem;
}
```

--------------------------------

### TypeScript example: User interface and fetchUser function

Source: https://streamdown.ai/docs/code-blocks

Example TypeScript code showing an interface and an async function that fetches user data. Useful for demonstrating Streamdown's TypeScript syntax highlighting.

```typescript
interface User {
  id: number;
  name: string;
  email: string;
}

async function fetchUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}
```

--------------------------------

### blurIn animation example

Source: https://streamdown.ai/docs/animation

Uses the blurIn animation, which combines opacity with a blur-to-sharp transition. Recommended for fast-streaming models.

```tsx
<Streamdown animated={{ animation: "blurIn" }} isAnimating={status === "streaming"}>
  {markdown}
</Streamdown>
```

--------------------------------

### No Borders Theme configuration

Source: https://streamdown.ai/docs/styling

A quick theme example that removes borders and sets a zero radius.

```css
:root {
  --border: transparent;
  --muted: 0 0% 98%;
  --radius: 0rem;
}
```

--------------------------------

### remark-gfm Example

Source: https://streamdown.ai/docs/plugins

Shows GitHub Flavored Markdown features enabled by remark-gfm, including tables, task lists, and strikethrough.

```markdown
| Feature | Supported |
|---------|-----------|
| Tables  | ✓         |
| Tasks   | ✓         |

- [x] Completed task
- [ ] Pending task

~~Strikethrough text~~
```

--------------------------------

### Breaking Complex Equations into Steps

Source: https://streamdown.ai/docs/plugins/math

Break complex equations into steps to keep them readable. The example shows starting with the equation and then completing the square.

```markdown
Start with the equation:

$$
f(x) = ax^2 + bx + c
$$

Complete the square:

$$
f(x) = a\left(x + \frac{b}{2a}\right)^2 + c - \frac{b^2}{4a}
$$
```

--------------------------------

### List Item Detection: Markdown Example

Source: https://streamdown.ai/docs/termination

Shows a markdown list item with an opening bold marker that should not be closed prematurely. The parser avoids closing formatting markers at the start of list items to preserve intentional list structure.

```markdown
- **
- Item with bold marker only
```

--------------------------------

### Configuration example with animated options

Source: https://streamdown.ai/docs/animation

Shows how to pass an options object to the animated prop to customize animation behavior. Includes all available options: animation, duration, easing, and sep.

```tsx
import { Streamdown } from "streamdown";
import "streamdown/styles.css";

export default function Page() {
  return (
    <Streamdown
      animated={{
        animation: "blurIn",  // "fadeIn" | "blurIn" | "slideUp" | custom string
        duration: 200,         // milliseconds (default: 150)
        easing: "ease-out",    // CSS timing function (default: "ease")
        sep: "word",           // "word" | "char" (default: "word")
      }}
      isAnimating={status === "streaming"}
    >
      {markdown}
    </Streamdown>
  );
}
```

--------------------------------

### rehype-raw Example

Source: https://streamdown.ai/docs/plugins

Demonstrates raw HTML preserved by rehype-raw, allowing mixed Markdown and HTML with a collapsible details element.

```markdown
This is **Markdown** with <span style="color: red">raw HTML</span>.

<details>
  <summary>Click to expand</summary>
  Hidden content here
</details>
```

--------------------------------

### Tailwind v4: Add optional plugin source directive (e.g., code plugin)

Source: https://streamdown.ai/docs/getting-started

Example of adding the `@source` line for an optional plugin, such as the code plugin, to `globals.css`. Adjust the relative path as needed. Only add lines for packages you've installed.

```css
@source "../node_modules/@streamdown/code/dist/*.js";
```

--------------------------------

### Best Practice: Add Context

Source: https://streamdown.ai/docs/plugins/mermaid

Shows how to provide a description before a Mermaid sequence diagram. The diagram illustrates user authentication and the server returning a JWT token.

```markdown
Here's the authentication flow for our application:

```mermaid
sequenceDiagram
    User->>App: Enter credentials
    App->>Server: Authenticate
    Server-->>App: Token
    App-->>User: Success
```

The server validates credentials and returns a JWT token.
```

--------------------------------

### Inline vs Block Math Example

Source: https://streamdown.ai/docs/plugins/math

Demonstrates the difference between inline and block math. Inline math is on the same line, while block math is on separate lines with newlines.

```markdown
This is inline $$E = mc^2$$ math.

$$
E = mc^2
$$

This is block math.
```

--------------------------------

### AntV Infographic DSL output example

Source: https://streamdown.ai/docs/custom-renderers

Example of the AntV Infographic DSL that can be output by the AI.

```markdown
```infographic
infographic list-row-horizontal-icon-arrow
data
  title Product Development Lifecycle
  desc Complete process from requirements to launch
  items
    - label Research
      value 15
      desc User interviews and competitive analysis
      icon mdi/account-search
    - label Design
      value 42
      desc Interaction prototype and visual design
      icon mdi/palette
    - label Development
      value 65
      desc Implementation and testing
      icon mdi/code-tags
    - label Launch
      value 100
      desc Official release and user feedback
      icon mdi/rocket-launch
```
```

--------------------------------

### Create a task list with checkboxes

Source: https://streamdown.ai/docs/gfm

Creates an interactive todo list with checked and unchecked items. Use `- [x]` for completed tasks and `- [ ]` for pending ones.

```markdown
- [x] Setup project structure
- [x] Install dependencies
- [ ] Write documentation
- [ ] Deploy to production
```

--------------------------------

### Example: Logging Errors

Source: https://streamdown.ai/docs/plugins/mermaid

Example of a custom error component that logs Mermaid rendering errors to an error tracking service.

```APIDOC
## Example: Logging Errors

### Description
A custom error component that logs Mermaid rendering failures to an error tracking service like Sentry or LogRocket.

### Props
- **error** (`string`) - The error message from Mermaid.
- **chart** (`string`) - The original Mermaid diagram code.
- **retry** (`() => void`) - Function to retry rendering the diagram.

### Example
```tsx
const ErrorWithLogging = ({
  error,
  chart,
  retry,
}: MermaidErrorComponentProps) => {
  useEffect(() => {
    // Log to your error tracking service
    console.error("Mermaid rendering failed:", error);
    // Could also send to Sentry, LogRocket, etc.
  }, [error]);

  return (
    <div className="text-center p-4">
      <p className="text-muted-foreground">Unable to display diagram</p>
      <button onClick={retry} className="mt-2 text-primary text-sm underline">
        Retry
      </button>
    </div>
  );
};
```
```

--------------------------------

### Complete Configuration Example (chat.tsx)

Source: https://streamdown.ai/docs/plugins/math

Shows all configuration options for the math plugin, including enabling single dollar text math and setting a custom error color. The default for singleDollarTextMath is false, and the default error color is 'var(--color-muted-foreground)'.

```tsx
import { Streamdown } from 'streamdown';
import { createMathPlugin } from '@streamdown/math';
import 'katex/dist/katex.min.css';

const math = createMathPlugin({
  singleDollarTextMath: true, // Enable $...$ syntax (default: false)
  errorColor: '#dc2626',      // Custom error color (default: "var(--color-muted-foreground)")
});

export default function Page() {
  return (
    <Streamdown plugins={{ math }}>
      {markdown}
    </Streamdown>
  );
}
```

--------------------------------

### Inline code example with backticks

Source: https://streamdown.ai/docs/code-blocks

Shows how to use inline code in Markdown with backticks. The example uses the `useState` hook in React.

```markdown
Use the `useState` hook to manage state in React.
```

--------------------------------

### Basic Static Mode Usage (app/blog/[slug]/page.tsx)

Source: https://streamdown.ai/docs/usage

Enable static mode by setting the mode prop to "static" for rendering pre-generated markdown content like blog posts or docs. This example uses the code plugin.

```tsx
import { Streamdown } from 'streamdown';
import { code } from '@streamdown/code';

export default function BlogPost({ content }: { content: string }) {
  return (
    <Streamdown
      mode="static"
      plugins={{ code: code }}
    >
      {content}
    </Streamdown>
  );
}
```

--------------------------------

### Set custom start line with startLine meta

Source: https://streamdown.ai/docs/code-blocks

Use `startLine=N` in the code fence meta to set the starting line number. The value must be a positive integer (>= 1).

```markdown
```typescript startLine=10
const user = await getUser(id);
const profile = await getProfile(user);
```
```

--------------------------------

### Integrals in math expressions

Source: https://streamdown.ai/docs/plugins/math

Shows the syntax for definite integrals.

```markdown
$$\int_{a}^{b} f(x) \, dx$$
```

--------------------------------

### Best Practice: Keep Diagrams Focused

Source: https://streamdown.ai/docs/plugins/mermaid

Shows the recommended approach of using multiple small diagrams instead of one large one. Includes two separate Mermaid flowcharts for user authentication and data fetching.

```markdown
✅ Good: Multiple small diagrams

## User Authentication Flow

```mermaid
graph LR
    A[Login] --> B{Valid?}
    B -->|Yes| C[Dashboard]
    B -->|No| D[Error]
```

## Data Fetching Flow

```mermaid
graph LR
    A[Request] --> B[API]
    B --> C[Database]
    C --> B
    B --> D[Response]
```

❌ Avoid: One massive diagram with everything
```

--------------------------------

### Entity Relationship Diagram Example

Source: https://streamdown.ai/docs/plugins/mermaid

Models database relationships with entities and attributes. The example shows USER, POST, and COMMENT entities with primary/foreign keys and relationships. Use this to design database schemas.

```mermaid
erDiagram
    USER ||--o{ POST : creates
    USER {
        int id PK
        string email
        string name
    }
    POST {
        int id PK
        int userId FK
        string title
        text content
    }
    POST ||--o{ COMMENT : has
    COMMENT {
        int id PK
        int postId FK
        string content
    }
```

--------------------------------

### Rust example: Sum of vector elements

Source: https://streamdown.ai/docs/code-blocks

Example Rust code that creates a vector of numbers, calculates their sum using the iterator method, and prints the result. Demonstrates Streamdown's Rust syntax highlighting.

```rust
fn main() {
    let numbers = vec![1, 2, 3, 4, 5];
    let sum: i32 = numbers.iter().sum();
    println!("Sum: {}", sum);
}
```

--------------------------------

### Code Block Awareness: Python Example

Source: https://streamdown.ai/docs/termination

Demonstrates that formatting within complete code blocks is left untouched. The bold markers inside the Python code block are not treated as incomplete formatting.

```markdown
```python
def foo():
    # This **won't** be treated as incomplete bold
    return "bar"
```
```

--------------------------------

### Setup Streamdown with math plugin in chat.tsx

Source: https://streamdown.ai/docs/plugins/math

Imports the math plugin and KaTeX CSS, then wraps markdown with the Streamdown component using the plugins prop. Requires the @streamdown/math package and katex CSS.

```tsx
import { math } from '@streamdown/math';
import 'katex/dist/katex.min.css';

<Streamdown plugins={{ math }}>
  {markdown}
</Streamdown>
```

--------------------------------

### React to animation start and end with callbacks

Source: https://streamdown.ai/docs/animation

Use onAnimationStart and onAnimationEnd to react to animation state changes. These fire when isAnimating transitions from false to true and vice versa. Both callbacks are suppressed in mode="static". Memoize callbacks with useCallback to avoid unnecessary effect re-runs.

```tsx
import { Streamdown } from "streamdown";
import "streamdown/styles.css";
import { useCallback } from "react";

export default function Page() {
  const handleAnimationStart = useCallback(() => {
    console.log("Streaming started");
  }, []);

  const handleAnimationEnd = useCallback(() => {
    console.log("Streaming ended");
  }, []);

  return (
    <Streamdown
      animated
      isAnimating={status === "streaming"}
      onAnimationStart={handleAnimationStart}
      onAnimationEnd={handleAnimationEnd}
    >
      {markdown}
    </Streamdown>
  );
}
```

--------------------------------

### Best Practice: Use Descriptive Labels

Source: https://streamdown.ai/docs/plugins/mermaid

Compares clear labels versus cryptic labels in Mermaid flowcharts. The good example uses descriptive text for nodes and edges, while the bad example uses generic placeholders.

```markdown
✅ Good: Clear labels

```mermaid
graph TD
    A[User clicks 'Submit'] --> B{Form valid?}
    B -->|Yes| C[Send to server]
    B -->|No| D[Show validation errors]
```

❌ Avoid: Cryptic labels

```mermaid
graph TD
    A[Step 1] --> B{Check}
    B -->|OK| C[Next]
    B -->|Bad| D[Err]
```
```

--------------------------------

### Fractions in math expressions

Source: https://streamdown.ai/docs/plugins/math

Shows the syntax for fractions using \frac{numerator}{denominator}.

```markdown
$$\frac{numerator}{denominator}$$
```

--------------------------------

### Python example: Fibonacci sequence generator

Source: https://streamdown.ai/docs/code-blocks

Example Python code defining a function to generate the Fibonacci sequence up to n terms and printing the result for 10 terms. Demonstrates Streamdown's Python syntax highlighting.

```python
def fibonacci(n: int) -> list[int]:
    """Generate Fibonacci sequence up to n terms."""
    fib = [0, 1]
    for i in range(2, n):
        fib.append(fib[i-1] + fib[i-2])
    return fib

print(fibonacci(10))
```

--------------------------------

### Markdown example of CJK emphasis issue

Source: https://streamdown.ai/docs/plugins/cjk

This markdown example demonstrates the CommonMark/GFM limitation where emphasis markers adjacent to ideographic punctuation fail to be recognized. Without CJK-friendly parsing, the text renders as plain text instead of bold.

```markdown
**この文は太字になりません（This won't be bolded）。**この文のせいで（It is due to this sentence）。
```
Tokens:
Raw