🌏 Translated with the assistance of DeepSeek and ChatGPT

Typewriter

A component that simulates a typewriter effect, often used for headings, or introductory text.

Basic Usage

Typewriter supports combining multiple commands into a complete typing sequence: the type command outputs text character by character, backspace deletes characters one by one, delay pauses for a set period, and clear clears all the content that has been output.

When the reactive object bound to the text property undergoes a reference change, the Typewriter's internal state will be reset. If only a property within that object is modified, the change will take effect the next time the command is printed.

|

Hide source code

Styling Commands

Use the setTypeColor and setTypeClass commands to set the text color and CSS class of the subsequent output respectively, so different styles can appear within the same piece of text.

|

|

Hide source code

Custom Content

Typewriter provides the default slot to customize the text rendering, receiving the current output text; the caret slot is used to customize the caret, receiving the caret visibility state.

▊

|

Hide source code

Loop

Use the loop prop to make Typewriter play the command sequence repeatedly.

|

Hide source code

Manual Control

Use the autoplay prop to control whether typing starts automatically. The component also exposes the start, pause, resume, and reset methods for manual control over the typing process: start plays from the beginning, pause pauses the current typing, resume continues from where it was paused, and reset resets the playback according to the prop state and continues automatically if autoplay is enabled.

|

Hide source code

API

TypewriterProps

Attribute	Type	Optional	Default	Description	Version
text	TypewriterText[]	True	[]	The typing command sequence of Typewriter.	0.2.0
typeSpeed	number	True	80	The typing speed of Typewriter (ms per character).	0.2.0
deleteSpeed	number	True	40	The backspace deletion speed of Typewriter (ms per character).	0.2.0
startDelay	number	True	0	The delay before Typewriter starts typing.	0.2.0
loop	boolean	True	false	Whether Typewriter loops through the command sequence.	0.2.0
autoplay	boolean	True	true	Whether Typewriter starts typing automatically.	0.2.0
caret	boolean	True	true	Whether the caret of Typewriter is shown.	0.2.0
caretText	string	True	'|'	The text content of the Typewriter caret.	0.2.0
blinkSpeed	number	True	500	Typewriter cursor blink speed (ms interval).	0.2.0

TypewriterEvents

Event	Parameter	Description	Version
start		Triggered when Typewriter starts typing.	0.2.0
end		Triggered when Typewriter finishes all commands.	0.2.0
textChange	text: string	Triggered when the current output text of Typewriter changes.	0.2.0
indexChange	index: number	Triggered when the executing command index of Typewriter changes.	0.2.0

TypewriterSlots

Slot	Parameter	Description	Version
default	text: string	Customize the text rendering of Typewriter.	0.2.0
caret	visible: boolean	Customize the caret of Typewriter.	0.2.0

TypewriterExpose

Attribute	Type	Optional	Default	Description	Version
start	() => void	False		(Re)start the typing process of Typewriter.	0.2.0
pause	() => void	False		Pause the typing process of Typewriter.	0.2.0
resume	() => void	False		Resume the interrupted typing process of Typewriter.	0.2.0
reset	() => void	False		Reset the typing content of Typewriter.	0.2.0

TypewriterText

export type TypewriterText =
	| {
			type: 'type'
			text: string
	  }
	| {
			type: 'backspace'
			count: number
	  }
	| {
			type: 'delay'
			ms: number
	  }
	| {
			type: 'clear'
	  }
	| {
			type: 'setTypeColor'
			color: string
	  }
	| {
			type: 'setTypeClass'
			class: string
	  }