llm-typewriter

0.1.1indexed

Streaming-text typewriter for LLM apps: renders streaming tokens with live progressive Markdown, per-language syntax-highlighted code blocks, human-like speed curves, configurable cursor, tap-to-skip, and accessibility support.

AndroidJVMNativeWasm·NadeemIqbal/llm-typewriter

Stars

—

Used by

dependents

—

Health

/ 100

LlmTypewriter

The streaming-text typewriter built for LLM apps on Compose Multiplatform. Renders a Flow<String> of tokens with live progressive Markdown, syntax-highlighted code blocks that build up as tokens arrive, three speed curves (linear / ease-out / natural), a configurable blinking cursor, tap-to-skip, graceful stop-mid-stream, selectable text, and a screen-reader- friendly live region — on every CMP target.

LlmTypewriter streaming a markdown response with a syntax-highlighted Kotlin code block on iOS

Pairs naturally with prompt-bar — drop both in and you have a ChatGPT-quality chat UI on Android, iOS, Desktop, and Web in ~20 lines. PromptBar's Send/Stop button auto-syncs with state.isStreaming.

Why another typewriter?

Existing CMP typewriters take a static String — they're animations, not stream renderers. LlmTypewriter is built around the AI chatbot streaming-token use case that nobody else has shipped:

Install

// settings.gradle.kts — already on Maven Central, no extra repos.
dependencies {
    implementation("io.github.nadeemiqbal:llm-typewriter:0.1.0")
}

Usage

Stream an LLM response

@Composable
fun ChatBubble(chatViewModel: ChatViewModel) {
    val state = rememberStreamingTypewriterState()
    StreamingTypewriter(
        tokens = chatViewModel.responseFlow,   // Flow<String>
        state = state,
        renderer = rememberMarkdownTypewriterRenderer(),
        cursor = TypewriterCursor.Line,
        speedCurve = SpeedCurve.Natural,
    )
    Button(onClick = { state.stop() }, enabled = state.isStreaming) { Text("Stop") }
}

Static text — banner / hero

TypewriterText(
    text = "Build LLM-powered apps for Android, iOS, Desktop, and Web.",
    cursor = TypewriterCursor.Block,
    speedCurve = SpeedCurve.Natural,
)

Cycling banner

CyclingTypewriterText(
    phrases = listOf("Type", "Stream", "Render", "Anywhere"),
    holdMs = 1200L,
)

Custom cursor

StreamingTypewriter(
    tokens = tokens,
    cursor = TypewriterCursor.Custom {
        Box(Modifier.size(12.dp).background(MaterialTheme.colorScheme.primary, CircleShape))
    },
)

Speed curves

Renderers

Renderer	What it does
`PlainTypewriterRenderer`	Paints raw text in the ambient style. Zero parsing cost.
`rememberMarkdownTypewriterRenderer()`

The Markdown parser is prefix-stable: a **bold mid-stream renders as plain text until the closing ** arrives, but every token before that opening ** stays exactly where it was. Code fences highlight progressively as tokens stream in — no waiting for the closing ```.

Platforms

Target	Status
Android (minSdk 24)	✅
iOS (x64, arm64, simulatorArm64)	✅

State API (headless)

StreamingTypewriterState is fully usable without composition — handy for tests and for hosts that want to drive the typewriter from a background coroutine:

val state = StreamingTypewriterState()
state.appendToken("Hello, ")
state.appendToken("world!")
state.completeSource()
state.skipToEnd()      // flush buffer
state.stop()           // freeze mid-stream
state.resume()         // pick up where we left off
state.reset()          // start fresh

Sample app

./gradlew :sample:desktopApp:run                 # Desktop
./gradlew :sample:androidApp:assembleDebug       # Android
./gradlew :sample:webApp:wasmJsBrowserDevelopmentRun   # Web

The sample includes a fake-LLM that streams pre-canned responses with Markdown + code blocks, a speed-curve switcher, and Stop/Resume/Skip controls.

License

Apache 2.0 — see LICENSE.

Related libraries

Surfaced from shared tags and platforms — no rankings paid for.

compose-shimmer★ 1.0k

valentinilkOffers shimmering animation for UI elements, integrated via a simple modifier. Includes customization options like theming and animation boundaries. Supports advanced usage scenarios and custom modifiers.Shared: wasm, desktop, compose-multiplatform

minabox★ 353

oleksandrbalanDisplays lazy-loaded items on a scrollable 2D plane, allowing registration of items with defined positions and sizes. Supports pinned rows/columns and relative/absolute sizing.Shared: wasm, desktop, compose-multiplatform

Llamatik★ 161

ferranponsOn-device and remote LLM inference via native llama.cpp bindings, offering embeddings, context-aware text generation (streaming & non-streaming), lightweight HTTP client/server and GGUF model support.Shared: llm, desktop, ai

RikkaUi★ 137

rainxchzedBeautiful production-ready UI components and theme system, over 40 customizable primitives, optional CLI copies components into source for full ownership and unlimited customization.Shared: wasm, desktop, compose-multiplatform

MapComposeMP★ 125

p-lrFacilitates efficient display of tiled maps with support for markers, paths, and gestures like flinging, dragging, scaling, and rotating. Features marker clustering and multi-layer capabilities, ensuring responsive and smooth map interactions.Shared: wasm, desktop, compose-multiplatform

latex★ 109

huarangmengHigh-performance LaTeX math parser and renderer supporting full syntax, \newcommand macros, incremental parsing, chemical-formula (\ce{}) support, and extensive style customization (colors, boxes, display modes).Shared: wasm, desktop, compose-multiplatform

`Flow<String>` source	✅	❌ static string	❌ static string	✅ Android-only
Live progressive Markdown	✅	❌	❌	❌
Syntax-highlighted code blocks (live)	✅ Kotlin/JS/Python	❌	❌	❌
Speed curves (linear / easeOut / natural)	✅	❌ linear only	❌ linear only	❌
Tap-to-skip	✅	❌	❌	❌
Graceful stop-mid-stream	✅	❌	❌	partial
Custom `@Composable` cursor	✅	❌	❌ no cursor	❌
Selectable text mid-stream	✅	❌	❌	partial
A11y live-region announcements	✅	❌	❌	partial
CMP target coverage	Android · iOS · Desktop · Wasm	Mostly	Mostly	Android-only
Active maintenance	✅	❌ stale ~2y	⚠️ alpha	locked in chat SDK

`SpeedCurve.Linear`	Constant cadence	Logs, terminals
`SpeedCurve.EaseOut`	Slight stretch on whitespace	Marketing copy
`SpeedCurve.Natural`	Pauses on `.!?,;:\n` — simulates human typing	LLM chat, intros