Lightweight typewriter effect for React.

A zero-dependency, TypeScript-first package that adds dynamic text animations to React and Next.js applications.

Overview

react-simple-typewriter-vb is an open-source npm package I created to solve a common need: adding engaging typewriter-style text effects to React projects without heavyweight dependencies or complex setup.

I own the full lifecycle: API design, implementation, build pipeline, documentation, and ongoing maintenance.

View on npm →

Problem

Developers often want typewriter effects for hero sections, landing pages, or terminal-style UIs. Popular solutions either:

• Pull in heavy dependencies
• Lack TypeScript support
• Break with Next.js server-side rendering
• Offer limited customization (speed, pause, loop behavior)

I wanted a focused, modern alternative that “just works” across the React ecosystem.

Goals

• Zero runtime dependencies
• Simple, intuitive API
• Full TypeScript support out of the box
• Next.js and SSR compatible
• Customizable typing speed, delete speed, and loop behavior
• Small bundle size (~4.4KB)

Solution

I built a TypeWriter component that accepts an options object with:

• strings — array of text to cycle through
• speed — typing speed in milliseconds
• deleteSpeed — deletion speed (added in v1.1)
• pause — pause between strings
• loop — whether to loop continuously

The component handles the animation logic internally, uses useRef for performance, and works seamlessly with server-side rendering when used with Next.js 'use client'.

Tech highlights

Architecture

• Rollup for bundling ESM and CJS outputs
• Babel for transpilation and React/JSX support
• TypeScript definitions included in the package
• Peer dependencies: React 16.8+, React DOM, prop-types

Key decisions

• Zero dependencies — keeps the package small and avoids version conflicts
• useRef for animation — avoids unnecessary re-renders during typing
• Proper loop completion — ensures full words are typed/deleted before moving to the next string
• Next.js support — compatible with App Router and 'use client' directive

Outcomes

• Package published and available on npm
• TypeScript support for better DX
• Improved loop behavior and delete animation in v1.1
• Server-side rendering fix for Next.js
• Solid foundation for future enhancements

Challenges

1) Last word deletion when loop is false

When loop was false, the last word could be cut off during deletion. I fixed this by ensuring the component completes the full delete sequence before stopping.

2) Next.js SSR compatibility

Initial versions had issues with server-side rendering. I addressed this by testing with Next.js and ensuring proper handling of the 'use client' directive and hydration.

3) Keeping the API simple

It was tempting to add many options. I focused on the core use case: type strings, delete, optionally loop, with configurable speeds. The API stayed minimal and easy to adopt.

What I’d improve next

• Add support for custom cursor/blink styling
• Optional callback hooks (onType, onDelete, onComplete)
• Animation presets (e.g., “terminal”, “hero”, “subtle”)
• More examples in the README and a small demo site

Final takeaway

react-simple-typewriter-vb reflects my approach to open-source: solve a real need with a focused, lightweight solution, ship it with good DX (TypeScript, modern tooling), and keep it maintainable for the long term.