@styloviz/streaming-markdown

Safe Markdown renderer built for token-by-token output. Renders a parsed token model through Angular bindings — no innerHTML and no bypassSecurityTrust, so untrusted content can never become markup. Headings, lists (incl. tasks), tables with alignment, blockquotes and inline emphasis; fenced code delegates to sv-code-block.

Part of the Styloviz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/icons @styloviz/code-block @styloviz/streaming-markdown

Requires @angular/core and @angular/common >= 21. Also needs @styloviz/icons, @styloviz/code-block — listed above so no extra step is required on npm (on pnpm/yarn, list them yourself). Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvStreamingMarkdownComponent } from '@styloviz/streaming-markdown';

@Component({
  standalone: true,
  imports: [SvStreamingMarkdownComponent],
  template: `
    <sv-streaming-markdown [content]="markdown" [headingOffset]="2" />
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | content | string | '' | Markdown source. Safe to update on every streamed token. | | streaming | boolean | false | Render a blinking caret after the last block, for in-flight responses. | | density | MarkdownDensity | 'md' | Text density. | | headingOffset | number | 0 | Added to every heading level, so # becomes <h3> at an offset of 2. Use it to keep document headings from competing with the surrounding page. | | codeLineNumbers | boolean | false | Show line numbers in fenced code blocks. | | codeMaxHeight | string | '20rem' | Max height of a fenced code block, as a CSS length. | | ariaLabel | string | '' | Accessible label for the rendered region. |

Outputs

| Output | Type | Description | | --- | --- | --- | | linkClick | MarkdownLinkClick | Emits when a rendered link is activated. Call preventDefault upstream to intercept. | | codeCopied | string | Emits the copied text when a fenced code block is copied. |

Documentation

Full API reference and live demos: https://styloviz.dev/docs/streaming-markdown

License

MIT