Add typewriter-style typing animations to your code blocks.
npm install expressive-code-typewriterAdd 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, or load
- 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-motion for accessibility
- Works with Starlight, Astro, Next.js, and standalone Expressive Code setups
Install the plugin using your preferred package manager:
``bash`
npm install expressive-code-typewriter
`js
import { pluginTypewriter } from 'expressive-code-typewriter';
// Add to your Expressive Code configuration
plugins: [pluginTypewriter()]
`
Then add typed to any code block:
``md`bash typed`
$ npm install my-package
Installing...
Done!
Customize individual code blocks with meta string options:
``md`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.