ai-agent

markstream-vue: Real‑time Markdown UI for AI Apps with 3.0k+ GitHub stars

Name: markstream-vue: Real‑time Markdown UI for AI Apps with 3.0k+ GitHub stars
Author: Simon-He95

Instantly stream rich Markdown—incl. Mermaid diagrams, KaTeX math, and syntax‑highlighted code—into Vue/Nuxt, React, Svelte, or Angular apps. Ideal for founders building AI‑driven interfaces that need low‑jitter, safe HTML updates.

From the repo · “Multi-framework streaming Markdown renderers for AI apps: Vue/Nuxt, React/Next.js, Svelte, and Angular, with Mermaid, KaTeX, Shiki, Monaco, safe HTML, and low-jitter updates.”

3,031 stars+9★ this week189 forksVueGuide quality 8/10 · reviewed Oct 7Updated 10/19/2026100% free · open source

What it does

Markstream-vue renders Markdown with multi-framework support, including Vue, React, Svelte, and Angular, and integrates with tools like Mermaid, KaTeX, and Monaco for AI-powered applications.

When to use it

•Building a Vue-based AI app that requires dynamic Markdown rendering
•Integrating Markdown rendering across multiple frameworks in a single project
•Creating interactive, real-time Markdown updates with low jitter

Ready-to-paste prompt

`const markstream = new MarkstreamVue('#markdown-container', '# Heading
## Subheading
Hello **World**!')` to render a simple Markdown heading and paragraph

Heads up: Make sure to include the `markstream-vue.css` file in your project for proper styling, as markstream-vue does not include default styles

Saves to your device

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/markstream-vue && curl -fsSL https://workflowstacks.com/api/skills/markstream-vue/claude-skill -o ~/.claude/skills/markstream-vue/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How markstream-vue: Real‑time Markdown UI for AI Apps with 3.0k+ GitHub stars works

Codeflow

Free to inspect

Markstream-vue: Real‑time Markdown UI for AI Apps with 3.0k+ GitHub stars is a very large Vue project (~180k lines across 1170 code files, plus 432 test files). Setup is light: installs like a normal app. Reading the code is optional. Last commit this month, MIT license, has a test suite.

Size

Very large codebase

~180k lines · 1170 code files · days to read — use, don't read

Setup

One-command install

Installs like a normal app. Reading the code is optional.

Runs on

Node.js

No API keys detected

Vue 46%JavaScript 29%TypeScript 20%Svelte 5%HTML 1%

Where to start reading

1
README.md
Start here — what it does and how to install it
2
AGENTS.md
The instructions the AI actually follows
3
bin/skills-lib.mjs
Where the program starts running
4
package.json
Dependencies and the commands it exposes
5
src/icon-themes/index.ts
Inside src/ — the main logic begins here

What's in each folder

src/Core code — the actual logic259 files

prompts/Prompts, skills & agent definitions5 files

packages/Sub-packages / plugins1009 files

bin/Command-line entry points3 files

docs/Documentation346 files

playground/Examples you can copy62 files

scripts/Helper scripts104 files

themes/Themes & styling55 files

READMEHas testsDocumentedCI checksMIT licenseUpdated this month

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/markstream-vue && curl -fsSL https://workflowstacks.com/api/skills/markstream-vue/claude-skill -o ~/.claude/skills/markstream-vue/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

Quick Actions

Details

Creator

Simon-He95

Language

Vue