Components

nstreamdown provides a set of components for rendering markdown. Each component is designed for native rendering with optimal performance.

Main Component

Streamdown

Primary

The main component that parses markdown and renders all sub-components.

Import from: @nstudio/nstreamdown/angular

my-component.ts

import { Component } from '@angular/core';
import { Streamdown } from '@nstudio/nstreamdown/angular';

@Component({
  selector: 'app-my-component',
  template: `
    <Streamdown
      [content]="markdown"
      [config]="{ mode: 'streaming', controls: true }"
    />
  `,
  imports: [Streamdown],
})
export class MyComponent {
  markdown = '# Hello World';
}

Markdown Components

These components are used internally by Streamdown but can also be used individually if needed:

MdHeading

Renders H1-H6 headings with native text styling

Props: level: 1-6, content: string

MdParagraph

Renders paragraph text with inline formatting support

Props: content: string

MdCodeBlock

Syntax-highlighted code blocks with copy/download controls

Props: code: string, language: string, controls: boolean

MdBlockquote

Blockquotes with styled left border

Props: content: string

MdList

Ordered and unordered lists with nesting support

Props: items: ListItem[], ordered: boolean

MdTable

Interactive tables with copy/export functionality

Props: headers: string[], rows: string[][], controls: boolean

MdImage

Images with loading states and error handling

Props: src: string, alt: string

MdHorizontalRule

Horizontal divider line

Props: none

MdMath

LaTeX mathematical expression rendering

Props: expression: string, block: boolean

MdInline

Inline formatted text (bold, italic, code, links)

Props: content: InlineToken[]

Native Views

Low-level native views used for rendering:

NativeCodeView

Custom iOS and Android view optimized for syntax-highlighted code display.

NativeRichTextComponent

Rich text rendering for formatted content.