Vue Stream Markdown

Appearance

GitHub Flavored Markdown ​

vue-stream-markdown includes full support for GitHub Flavored Markdown (GFM) through mdast-util-gfm. This extends standard Markdown with powerful features commonly used on GitHub and other modern Markdown platforms.

Tables ​

Create formatted tables with Table options:

markdown
| Feature | Supported | Notes |
|---------|-----------|-------|
| Tables | ✅ | Full support |
| Task Lists | ✅ | Interactive |
| Strikethrough | ✅ | ~~Like this~~ |

Feature

Supported

Notes

Tables

✅

Full support

Task Lists

✅

Interactive

Strikethrough

✅

Like this

Column Alignment ​

Control text alignment using colons in the separator row:

markdown
| Left | Center | Right |
|:-----|:------:|------:|
| A | B | C |
| 1 | 2 | 3 |

Left

Center

Right

A

B

C

1

2

3

Alignment Syntax:

  • :--- - Left-aligned (default)
  • :---: - Center-aligned
  • ---: - Right-aligned

vue-stream-markdown enhances tables with:

  • Responsive scrolling - Tables scroll horizontally on narrow screens
  • Download button - Export tables as CSV or JSON
  • Proper spacing - Optimized cell padding

Complex Tables ​

Tables support inline formatting:

markdown
| Name | Description | Status |
|------|-------------|--------|
| **Streamdown** | A `react-markdown` replacement | ✅ Active |
| *Feature X* | Under development | 🚧 WIP |
| ~~Old Package~~ | Deprecated | ❌ Removed |

Name

Description

Status

Streamdown

A react-markdown replacement

✅ Active

Feature X

Under development

🚧 WIP

Old Package

Deprecated

❌ Removed

Interactive Features ​

Table include interactive buttons such as copy and download. To configure these controls, see the Controls documentation.

Task Lists ​

Create interactive todo lists:

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

Renders as:

  • Setup project structure

  • Install dependencies

  • Write documentation

  • Deploy to production

Task List Syntax ​

  • - [ ] - Unchecked task (whitespace in brackets)
  • - [x] - Checked task (lowercase x)
  • - [X] - Also checked (uppercase X)

Nested Task Lists ​

Task lists can be nested:

markdown
- [ ] Phase 1: Setup
  - [x] Initialize repository
  - [x] Configure build tools
  - [ ] Setup CI/CD
- [ ] Phase 2: Development
  - [ ] Implement features
  - [ ] Write tests

Renders as:

  • Phase 1: Setup

    • Initialize repository

    • Configure build tools

    • Setup CI/CD

  • Phase 2: Development

    • Implement features

    • Write tests

Task Lists in Different Contexts ​

Task lists work in various contexts:

markdown
## Shopping List
- [ ] Milk
- [ ] Eggs
- [x] Bread

> **Note**: Here's a quote with tasks:
> - [x] Complete quote formatting
> - [ ] Add more examples

Renders as:

Shopping List

  • Milk

  • Eggs

  • Bread

Note: Here's a quote with tasks:

  • Complete quote formatting

  • Add more examples

Strikethrough ​

Mark text as deleted or outdated:

markdown
**Before:** ~~500ms response time~~
**After:** 50ms response time ⚡

Result:

Before: 500ms response time After: 50ms response time ⚡

URLs and email addresses are automatically converted to links:

markdown
Visit https://streamdown.ai for more info.

Contact us at hello@streamdown.ai

Visit https://streamdown.ai for more info.

Contact us at hello@streamdown.ai