nstreamdown

Getting Started

Get up and running with nstreamdown in your NativeScript application in just a few minutes. Supports Angular, React, Solid, Svelte, and Vue.

Prerequisites

Before you begin, make sure you have:

  • A NativeScript project (NativeScript 8.x or later)
  • Environment setup
  • Node.js 22.x or later

Installation

Install nstreamdown using your preferred package manager:

npm install @nstudio/nstreamdown

Choose Your Framework

nstreamdown supports all major NativeScript frameworks. Select your framework below:

Import from: @nstudio/nstreamdown/angular

Basic Usage

Import the Streamdown component and use it in your Angular component:

my-component.ts
import { Component } from '@angular/core';
import { Streamdown } from '@nstudio/nstreamdown/angular';


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


This is **bold** and *italic* text.


\`\`\`typescript
const greeting = 'Hello, NativeScript!';
console.log(greeting);
\`\`\`
  `;
}

Streaming Mode

For AI-powered applications, enable streaming mode to show content as it arrives:

chat.component.ts
import { Component, signal } from '@angular/core';
import { Streamdown } from '@nstudio/nstreamdown/angular';


@Component({
  selector: 'app-chat',
  template: `
    <Streamdown
      [content]="streamingContent()"
      [config]="{
        mode: 'streaming',
        showCaret: true,
        controls: true
      }"
    />
  `,
  imports: [Streamdown],
})
export class ChatComponent {
  streamingContent = signal('');


  async streamFromAI() {
    const response = 'Hello! I am an **AI assistant**...';
    const words = response.split(' ');
    
    for (const word of words) {
      this.streamingContent.update(c => c + word + ' ');
      await this.delay(50);
    }
  }


  private delay(ms: number) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
}

What's Next?