Phoenix Streamdown

https://hexdocs.pm/phoenix_streamdown/1.0.0-beta.4/
Admin
PhoenixStreamdown is a streaming markdown renderer for Phoenix LiveView that renders LLM-streamed...
Tokens:1,392
Snippets:19
Trust Score:9
Update:3 months ago
Show doc for...
Tokens:
Raw
### Rendering Basic Markdown Content

Source: https://hexdocs.pm/phoenix_streamdown/PhoenixStreamdown.html

A simple example demonstrating how to render a static markdown string using the `PhoenixStreamdown.markdown/1` function.

```heex
<PhoenixStreamdown.markdown content="# Hello **world**" />
```

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

### Importing PhoenixStreamdown Component in LiveView

Source: https://hexdocs.pm/phoenix_streamdown/PhoenixStreamdown.html

This example shows how to import the `PhoenixStreamdown` module within a LiveView module to use the `<.markdown />` component.

```elixir
defmodule MyAppWeb.ChatLive do
  use MyAppWeb, :live_view
  use PhoenixStreamdown

  def render(assigns) do
    ~H"""
    <.markdown content={@response} streaming={@streaming?} />
    """
  end
end
```

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

### Rendering Markdown with Streaming and Customization

Source: https://hexdocs.pm/phoenix_streamdown/PhoenixStreamdown.html

An example showcasing the `PhoenixStreamdown.markdown/1` component with multiple attributes for streaming, animation, CSS classes, and theme.

```heex
<PhoenixStreamdown.markdown
  content={@response}
  streaming
  animate="blurIn"
  class="prose"
  theme="github_dark"
/>
```

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

### Usage Without Importing Component

Source: https://hexdocs.pm/phoenix_streamdown/PhoenixStreamdown.html

Alternatively, you can use the fully qualified module name if you haven't imported the component. This is useful in scenarios where direct import might conflict or is not desired.

```heex
<PhoenixStreamdown.markdown content={@response} streaming={@streaming?} />
```

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

### Customizing Syntax Highlighting Theme

Source: https://hexdocs.pm/phoenix_streamdown/PhoenixStreamdown.html

Apply a custom syntax highlighting theme to the rendered markdown using the `theme` attribute. A wide variety of themes are supported.

```heex
<.markdown content={@md} theme="catppuccin_mocha" />
```

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

### Basic Usage of PhoenixStreamdown Component

Source: https://hexdocs.pm/phoenix_streamdown/PhoenixStreamdown.html

Import and use the markdown component directly within your LiveView render function. This is the recommended way to integrate PhoenixStreamdown.

```heex
<.markdown content={@response} streaming={@streaming?} />
```

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

### Passing Custom MDEx Options

Source: https://hexdocs.pm/phoenix_streamdown/PhoenixStreamdown.html

Override or extend default MDEx rendering options by passing a list of options to the `mdex_opts` attribute. These are deep-merged with the defaults.

```heex
<.markdown content={@md} mdex_opts={[extension: [shortcodes: true]]} />
```

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

### Including PhoenixStreamdown CSS

Source: https://hexdocs.pm/phoenix_streamdown/PhoenixStreamdown.html

Include the provided CSS file in your application's main CSS entry point to enable animations and styling.

```css
@import "../../deps/phoenix_streamdown/priv/static/phoenix_streamdown.css";
```

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

### Applying Custom CSS Classes

Source: https://hexdocs.pm/phoenix_streamdown/PhoenixStreamdown.html

Add custom CSS classes to the main wrapper div and individual block divs using the `class` and `block_class` attributes respectively.

```heex
<.markdown content={@md} class="prose" block_class="mb-4" />
```

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

### Enabling Streaming Animations

Source: https://hexdocs.pm/phoenix_streamdown/PhoenixStreamdown.html

To enable word-level streaming animations, use the `animate` attribute. Ensure the necessary CSS is included in your application's assets.

```heex
<.markdown content={@response} streaming animate="fadeIn" />
```

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

### PhoenixStreamdown.markdown/1

Source: https://hexdocs.pm/phoenix_streamdown/PhoenixStreamdown.html

Renders markdown content with streaming support. This component can be used directly or imported via `use PhoenixStreamdown`.

```APIDOC
## PhoenixStreamdown.markdown/1

### Description
Renders markdown content with streaming support. This component can be used directly or imported via `use PhoenixStreamdown`.

### Attributes

* `content` (string) - The markdown string to render. Defaults to `""`.
* `streaming` (boolean) - Whether content is still being streamed. Defaults to `false`.
* `animate` (string) - Animation type for streaming: `"fadeIn"`, `"blurIn"`, `"slideUp"`, or `nil` to disable. Defaults to `nil`.
* `class` (any) - CSS class for the wrapper `<div>`. Defaults to `nil`.
* `block_class` (any) - CSS class for each block `<div>`. Defaults to `nil`.
* `id` (string) - Unique ID prefix (auto-generated; pass explicitly for stable IDs across re-renders).
* `theme` (string) - Syntax highlighting theme name. Defaults to `"onedark"`.
* `mdex_opts` (list) - Options passed to `MDEx.to_html!/2` (merged with defaults). Defaults to `[]`.

### Examples

```html
<PhoenixStreamdown.markdown content="# Hello **world" />

<PhoenixStreamdown.markdown
  content={@response}
  streaming
  animate="blurIn"
  class="prose"
  theme="github_dark"
/>
```
```

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

### Providing Stable IDs for Completed Blocks

Source: https://hexdocs.pm/phoenix_streamdown/PhoenixStreamdown.html

For completed messages in a list, pass a stable `id` to preserve blocks across re-renders. The streaming component itself does not require an explicit ID.

```heex
<.markdown content={msg.content} id={\"msg-\\
```
Tokens:
Raw