Build rich typewriter animations with a composable timeline, full Unicode support, and a renderer-agnostic architecture that works in the browser and on the server.
pnpm add eo-typewriterjs- Composable timeline: chain type, delete, wait, move, select, unselect, style, unstyle, and call commands in any order.
- Flexible advance modes: type by character, word, line, grapheme, or custom chunk size.
- Rich text support: apply styles to ranges during playback.
- Full Unicode: handles emoji, accented characters, and complex grapheme clusters correctly.
- Renderer-agnostic: built-in DOM and string renderers; implement
IRendererto target anything. - TypeScript-first: fully typed public API with no
any. - Playback controls: play, pause, stop, replay, and cancel from any point.
import { createTypewriter, domRenderer } from "eo-typewriterjs";
const el = document.getElementById("output")!;
const tw = createTypewriter({
renderer: domRenderer(el),
});
tw.timeline
.type("Hello, ")
.type("world!", { by: "word", interval: 120 })
.wait(400)
.delete(6)
.type("EO TypewriterJS.");
await tw.play();Full documentation, guides, and the API reference are available on the docs site.
Try the library live in the interactive sandbox, write timelines, run them, and see output in real time without any setup.
The library is covered by two test layers:
- Unit tests (
pnpm test): Vitest suite covering core logic, reducers, renderers, and edge cases. - End-to-end tests (
pnpm e2e): Playwright suite running real playback scenarios in a browser harness, including typing flows, waiting, multiline output, cursor movement, selection, editing, and callbacks.
pnpm dev # start dev server
pnpm build # build the library
pnpm test # run unit tests
pnpm e2e # run end-to-end tests
pnpm lint # lint
pnpm sandbox # start the sandbox
pnpm docs:dev # start the docs siteMIT
