Add typewriter-style typing animations to your code blocks.
- Terminal-style typing animation with character-by-character reveal
- Blinking cursor that follows the typing position
- Input lines (with prompt) type out, output lines appear instantly
- Multiple trigger modes:
visible,click, orload - Configurable typing speed, delays, and natural variance
- Step-through mode for user-controlled progression
- Loop mode for continuous replay
- Replay button to re-run animations
- Respects
prefers-reduced-motionfor accessibility - Works with Starlight, Astro, Next.js, and standalone Expressive Code setups
Install the plugin using your preferred package manager:
npm install expressive-code-typewriterimport { pluginTypewriter } from 'expressive-code-typewriter';
// Add to your Expressive Code configuration
plugins: [pluginTypewriter()]Then add typed to any code block:
```bash typed
$ npm install my-package
Installing...
Done!
```Customize individual code blocks with meta string options:
```bash typed speed="30" variance="0.3" outputDelay="500"
$ npm run build
Compiling...
Done!
```Available options: speed, prompt, trigger, delay, lineDelay, outputDelay, loop, loopDelay, variance, stepMode
For comprehensive documentation, configuration options, and live examples, visit the plugin documentation.
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
Licensed under the MIT License, Copyright © frostybee.
See LICENSE for more information.