# Markstream Solid

Integrate markstream-solid in SolidJS 1.9 or SolidStart apps.

- Repository: https://github.com/Simon-He95/markstream-vue (3046 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Simon-He95/markstream-vue --skill markstream-solid -g -a claude-code -y`
Codex: `npx skills add Simon-He95/markstream-vue --skill markstream-solid -g -a codex -y`
Cursor: `npx skills add Simon-He95/markstream-vue --skill markstream-solid -g -a cursor -y`
Gemini CLI: `npx skills add Simon-He95/markstream-vue --skill markstream-solid -g -a gemini-cli -y`

## Description

Integrate markstream-solid in SolidJS 1.9 or SolidStart apps. Use for reactive TSX, SSR and hydration, Markdown streaming/restoration, emitted KaTeX/Mermaid workers, scoped components and translations, virtual timelines, or standalone component/API usage.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Markstream Solid

Read the [Solid guide](https://markstream.simonhe.me/guide/solid) for setup and the [Solid component/API reference](https://markstream.simonhe.me/guide/solid-api) for exact contracts. The [repository source](https://github.com/Simon-He95/markstream-vue/tree/main/packages/markstream-solid) contains workspace commands and validation records. Check the selected package's actual version and publication status before installing it.

## Setup

1. Detect `solid-js` / `@solidjs/start` in the host. TSX alone does not imply React. Require Solid 1.9 and the Solid compiler; SolidStart owns its compiler setup.
2. While the package is a workspace preview, build and pack the parser, core and Solid packages together. For npm releases, use the package's declared dependency versions; never substitute an older published core/parser for the workspace build.
3. Add only required peers: `katex`, `mermaid`, `stream-diffs`, `@terrastruct/d2` or `@antv/infographic`. Math also requires `katex/dist/katex.min.css`.
4. Load resets before exactly one `markstream-solid/index.css`, `index.px.css` or `index.tailwind.css`. Use `.markstream-solid` around standalone basic nodes.
5. Keep props reactive: read `props.content` in JSX/accessors. Avoid destructuring reactive props or treating signals as Vue refs.

## Streaming and restoration

```tsx
import MarkdownRender from 'markstream-solid'
import 'markstream-solid/index.css'

export function Message(props: { content: string, done: boolean }) {
  return <MarkdownRender mode="chat" content={props.content} final={props.done} />
}
```

The rest: https://github.com/Simon-He95/markstream-vue/blob/HEAD/.agents/skills/markstream-solid/SKILL.md