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