Examples / LLM Streaming

LLM Streaming Simulation

Simulate real-time AI response streaming and measure render performance. Adjust speed, jitter, and chunking to test how SvelteMarkdown handles token-by-token updates from LLMs like ChatGPT, Claude, and Gemini.

How LLM Streaming Works

LLMs stream tokens via Server-Sent Events. Each token appends to the markdown source.
SvelteMarkdown re-parses and re-renders on every source update, keeping output in sync.
Render times stay under 16ms (one frame budget) for typical LLM speeds of 30-80 tokens/sec.
Track token costs across providers with ModelPricing.ai.

Stream Controls

Configuration

Speed 30 chunks/sec

Jitter 50%

Chunk mode

character word sentence

Live Metrics

Last render <1ms

Average render <1ms

Peak render <1ms

Dropped frames 0

Markdown Source

2247 chars

Edit or paste your own markdown below. This content will be streamed token-by-token when you click Start.

# Understanding Reactive Systems

Reactive programming is a **declarative paradigm** concerned with _data streams_ and the propagation of change. Let's explore the key concepts.

## Core Principles

There are three fundamental ideas:

1. **Observables** — represent a stream of data over time
2. **Operators** — transform, filter, and combine streams
3. **Subscribers** — consume the final output

> "The best way to predict the future is to invent it." — Alan Kay

### A Simple Example

Here's a basic reactive counter in JavaScript:

```javascript
import { writable } from 'svelte/store'

const count = writable(0)

count.subscribe(value => {
    console.log(`Count is now: ${value}`)
})

count.update(n => n + 1)
count.set(42)
```

The `writable` store automatically notifies all subscribers when the value changes.

## Comparison Table

| Feature | Svelte | React | Vue |
|---------|--------|-------|-----|
| Reactivity | Compile-time | Runtime (hooks) | Runtime (proxy) |
| Bundle Size | Small | Medium | Medium |
| Learning Curve | Low | Medium | Low |
| Performance | Excellent | Good | Good |

## Advanced Patterns

Sometimes you need to combine multiple streams. Consider this scenario:

- User types in a search box
- Each keystroke triggers an API call
- Results should be **debounced** and *deduplicated*
- Errors must be handled gracefully

### Error Handling

Always wrap async operations:

```typescript
async function fetchResults(query: string): Promise<Result[]> {
    try {
        const response = await fetch(`/api/search?q=${query}`)
        if (!response.ok) throw new Error('Search failed')
        return response.json()
    } catch (error) {
        console.error('Search error:', error)
        return []
    }
}
```

### Nested Lists

- Reactive primitives
  - Signals
  - Computed values
  - Effects
- State management
  - Local state
  - Global stores
  - Context API

## Conclusion

Reactive systems are the backbone of modern UI frameworks. By understanding these patterns, you can build applications that are both **performant** and **maintainable**.

For more information, visit the [Svelte documentation](https://svelte.dev/docs) or check out the [tutorial](https://learn.svelte.dev).

---

*Thanks for reading!*

Rendered Output

Click "Start" to begin streaming the AI response.