Files
boos e0a5f57793 feat(desktop): embed BoosAPI Desktop client as a subproject
Vendor the rebranded BoosAPI Desktop client (Tauri + Vue) into metapi as
a monorepo subdirectory under desktop/. Source only — node_modules,
dist, Cargo target and the upstream .git history are excluded.

desktop/ keeps its own independent Cargo workspace (desktop/src-tauri
with crates/*); it is not part of the backend boosapi crate, so a
`cargo check` at the metapi root still compiles only the backend. Build
the desktop app from desktop/src-tauri per desktop/README.md.

Note: app icons are still placeholder assets pending the final BoosAPI
logo. The updater signing keys live outside the repo and are not
included.
2026-06-22 11:32:57 +08:00

2.6 KiB

markstream-angular

Angular version of Markstream: a streaming-friendly Markdown renderer with KaTeX, Mermaid, Monaco code blocks, D2, infographic blocks, custom HTML tags, and cross-framework playground parity.

Install

pnpm add markstream-angular @angular/core @angular/common

Optional peer dependencies:

  • stream-monaco for Monaco-powered code blocks
  • mermaid for Mermaid diagrams
  • katex for math rendering
  • @terrastruct/d2 for D2 diagrams
  • @antv/infographic for infographic blocks

Example:

pnpm add stream-monaco mermaid katex @terrastruct/d2 @antv/infographic

Quick Start

Import the stylesheet once in your Angular app entry:

import 'markstream-angular/index.css'
import 'katex/dist/katex.min.css'

Use the standalone component directly:

import { Component, signal } from '@angular/core'
import { bootstrapApplication } from '@angular/platform-browser'
import { MarkstreamAngularComponent } from 'markstream-angular'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MarkstreamAngularComponent],
  template: `
    <markstream-angular
      [content]="markdown()"
      [final]="true"
      [codeBlockStream]="true"
    />
  `,
})
class AppComponent {
  readonly markdown = signal(`# Hello Angular

- streaming markdown
- code blocks
- Mermaid / KaTeX / D2`)
}

bootstrapApplication(AppComponent)

TypeScript

markstream-angular exports the same public props/context helpers you use at runtime:

import type {
  AngularRenderContext,
  CodeBlockMonacoOptions,
  CustomComponentMap,
  MarkstreamAngularComponentProps,
  NodeRendererProps,
} from 'markstream-angular'

Workers

KaTeX and Mermaid can use the same off-thread worker path as the React/Vue packages:

import { setKaTeXWorker, setMermaidWorker } from 'markstream-angular'
import KatexWorker from 'markstream-angular/workers/katexRenderer.worker?worker'
import MermaidWorker from 'markstream-angular/workers/mermaidParser.worker?worker'

setKaTeXWorker(new KatexWorker())
setMermaidWorker(new MermaidWorker())

Playground

In this monorepo:

  • Angular playground: pnpm play:angular
  • Angular regression lab: http://127.0.0.1:4175/test
  • Angular version sandbox: http://127.0.0.1:4175/test-sandbox

Status

This package is still tagged alpha, but the current direction is already aligned with markstream-react / markstream-vue2 for:

  • node-component renderer structure
  • streaming code block behavior
  • shared /test fixtures and cross-framework comparison
  • KaTeX / Mermaid worker integration

Issue tracker and source: Simon-He95/markstream-vue