FIG-001/ STREAMING

llm streaming.

Stream markdown the way real models actually deliver it — { value, offset } patches that can arrive out of order. Toggle speed, jitter, and granularity to stress-test ChatGPT / Claude / Gemini delivery patterns.

LLMs stream tokens via SSE. SvelteMarkdown re-parses and re-renders on each update, keeping output in sync — even when patches arrive out of order.
Render times stay under one frame budget (16ms) for typical LLM speeds of 30–80 tokens/sec.
Track token costs across providers with ModelPricing.ai.
Building a chat UI? Pair with @humanspeak/svelte-virtual-chat for a virtualized chat viewport purpose-built for LLM conversations.

↩ all examples

mode · offset · jumbled mode · live running source

file · llm-streaming.svelte avg 0ms peak 0ms chunks 0/— ○ IDLE

SRC / STREAMING 1779 chars

# 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 |

## Advanced Patterns

- 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

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

## 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).

---

*Thanks for reading!*

OUT / RENDERED idle

category · streaming

sheet · sheet 01 / 01

⟳ to re-run

llm streaming.

LLM Streaming