Configuration

Configure the plugin with global default options. To override settings for individual code blocks, see the Per-Block Options page.

Global Options

Pass an options object to pluginTypewriter() in your Expressive Code config:

astro.config.mjs

import starlight from '@astrojs/starlight'
import { defineConfig } from 'astro/config'
import { pluginTypewriter } from 'expressive-code-typewriter'

export default defineConfig({
  integrations: [
    starlight({
      expressiveCode: {
        plugins: [
          pluginTypewriter({
            speed: 50,
            prompt: '$',
            trigger: 'visible',
            startDelay: 500,
            lineDelay: 300,
            showReplayButton: true,
            replayButtonText: 'Replay',
            showSkipButton: false,
            cursorChar: '█',
            outputDelay: 0,
            loop: false,
            loopDelay: 1000,
            typingVariance: 0,
            stepMode: false,
          }),
        ],
      },
      title: 'My Docs',
    }),
  ],
})

speed

Type: number Default: 50

Milliseconds per character for the typing animation. Lower values = faster typing.

prompt

Type: string Default: "$"

Character(s) that identify command/input lines. Lines starting with this prompt (after trimming whitespace) will type character-by-character. All other lines appear instantly.

Common prompts:

• $ - Unix shell (default)
• # - Root user
• > - Windows CMD
• >>> - Python REPL
• PS> - PowerShell

trigger

Type: 'visible' | 'click' | 'load' Default: "visible"

When to start the typing animation:

• visible - Start when the code block scrolls into view (uses IntersectionObserver)
• click - Require user to click a play button overlay
• load - Start immediately when the page loads

startDelay

Type: number Default: 500

Initial delay in milliseconds before the animation starts (after trigger fires).

lineDelay

Type: number Default: 300

Delay in milliseconds between lines during the animation.

showReplayButton

Type: boolean Default: true

Whether to show a replay button after the animation completes, allowing users to re-run the animation.

replayButtonText

Type: string Default: "Replay"

Text for the replay button.

showSkipButton

Type: boolean Default: false

Whether to show a skip button during the animation, allowing users to immediately complete the animation and see all content. The skip button appears at the bottom-right corner of the code block while typing is in progress.

When to enable

Enable skip for longer code blocks or when users may want to quickly see the final result without waiting for the full animation.

cursorChar

Type: string Default: "█"

Character to use for the blinking cursor during typing.

outputDelay

Type: number Default: 0

Delay in milliseconds before output lines appear. This simulates command execution time, adding a pause after an input line finishes typing before the output is revealed.

loop

Type: boolean Default: false

Enable continuous replay. When enabled, the animation automatically restarts after completing. The replay button is hidden in loop mode.

loopDelay

Type: number Default: 1000

Delay in milliseconds before the animation restarts when loop is enabled.

typingVariance

Type: number Default: 0

Random speed variance per character, making the typing feel more natural. Value should be between 0 and 1, where 0.3 means ±30% variance from the base speed. For example, with speed: 50 and typingVariance: 0.3, each character will take between 35ms and 65ms.

stepMode

Type: boolean Default: false

Enable step-through mode. When enabled, the animation pauses after each line completes, waiting for user interaction to continue. A “Click to continue” hint appears when paused. Users can advance by clicking on the code block or pressing Space, Enter, or Arrow keys.

Accessibility

The plugin respects the user’s prefers-reduced-motion preference. When reduced motion is enabled:

• All text is immediately visible (no animation)
• The cursor is hidden
• The click overlay is removed
• The replay and skip buttons are hidden

Screen readers have full access to the text content at all times since the text is always present in the DOM (we use CSS clip-path to reveal text progressively, not JavaScript text insertion).

Browser Compatibility

The plugin uses modern browser APIs and is supported in all current browsers:

Browser	Minimum Version
Chrome	51+
Firefox	55+
Safari	12.1+
Edge	79+

Not supported: Internet Explorer (requires IntersectionObserver and CSS clip-path).

See the Per-Block Options page for meta string overrides, or view live demos on the Examples page.