typewriterjs

A simple yet powerful native javascript plugin for a cool typewriter effect.

2,457

220

2,457

View on GitHub View on NPM

Top Related Projects

typed.js

15,508

A JavaScript Typing Animation Library

ityped

2,330

Dead simple Javascript animated typing, with no dependencies.

typeit

3,068

The most versatile JavaScript typewriter effect library on the planet.

slate

29,779

A completely customizable framework for building rich text editors. (Currently in beta.)

Quick Overview

TypewriterJS is a lightweight JavaScript library that creates a typewriter effect on web pages. It simulates the appearance of text being typed out character by character, with customizable speed, delays, and cursor styles. This library is ideal for adding dynamic and engaging text animations to websites and web applications.

Pros

Easy to use and implement with minimal setup
Highly customizable with various options for speed, delays, and cursor styles
Lightweight and dependency-free, ensuring fast loading times
Supports both vanilla JavaScript and jQuery implementations

Cons

Limited to text-based animations only
May not be suitable for complex text manipulations or advanced typography effects
Potential accessibility issues if not implemented carefully
Limited browser support for older versions (IE11 and below)

Code Examples

Basic usage:

const typewriter = new Typewriter('#element', {
  loop: false,
  delay: 75,
});

typewriter
  .typeString('Hello, World!')
  .pauseFor(1000)
  .deleteAll()
  .typeString('Welcome to TypewriterJS')
  .start();

Using callbacks:

const typewriter = new Typewriter('#element', {
  loop: true,
  delay: 75,
});

typewriter
  .typeString('First sentence')
  .callFunction(() => {
    console.log('String typed out!');
  })
  .pauseFor(2500)
  .deleteAll()
  .callFunction(() => {
    console.log('All deleted!');
  })
  .start();

Changing options on the fly:

const typewriter = new Typewriter('#element', {
  loop: true,
  delay: 75,
});

typewriter
  .typeString('This is a slow sentence')
  .pauseFor(1000)
  .deleteAll()
  .changeDelay(10)
  .typeString('This is a fast sentence!')
  .start();

Getting Started

Install TypewriterJS using npm:

npm install typewriter-effect

Include the library in your project:

<script src="node_modules/typewriter-effect/dist/core.js"></script>

Create an HTML element for the typewriter effect:

<div id="typewriter"></div>

Initialize and use TypewriterJS in your JavaScript:

const typewriter = new Typewriter('#typewriter', {
  loop: false,
  delay: 75,
});

typewriter
  .typeString('Hello, World!')
  .pauseFor(1000)
  .deleteAll()
  .typeString('Welcome to TypewriterJS')
  .start();

Competitor Comparisons

typed.js

15,508

A JavaScript Typing Animation Library

Pros of Typed.js

More mature project with a larger community and longer history
Supports backspacing and deleting text
Offers more customization options and callbacks

Cons of Typed.js

Larger file size (16.2 KB vs 9.5 KB for Typewriter.js)
More complex API, which may be overkill for simple use cases
Requires more setup code for basic functionality

Code Comparison

Typed.js:

var typed = new Typed('#element', {
  strings: ['First sentence.', 'Second sentence.'],
  typeSpeed: 30
});

Typewriter.js:

const typewriter = new Typewriter('#element', {
  loop: false,
  delay: 75,
});

typewriter
  .typeString('First sentence.')
  .pauseFor(300)
  .typeString('Second sentence.')
  .start();

Summary

Both Typed.js and Typewriter.js are popular libraries for creating typewriter effects in web applications. Typed.js offers more features and customization options, making it suitable for complex scenarios. However, it comes with a larger file size and a steeper learning curve. Typewriter.js, on the other hand, provides a simpler API and smaller file size, making it ideal for basic typewriter effects and quick implementation. The choice between the two depends on the specific requirements of your project and the level of complexity you need.

ityped

2,330

Dead simple Javascript animated typing, with no dependencies.

Pros of ityped

Smaller file size (2.4KB vs 9.5KB for Typewriter.js)
Simpler API with fewer options, making it easier to use for basic typing animations
Built-in support for backspace effect without additional configuration

Cons of ityped

Less customizable compared to Typewriter.js
Fewer features and animation options
No built-in support for cursor customization

Code Comparison

ityped:

import { init } from 'ityped'

init(document.querySelector("#element"), { 
  showCursor: true,
  strings: ['Hello, World!', 'Welcome to ityped']
})

Typewriter.js:

import Typewriter from 'typewriter-effect/dist/core';

new Typewriter('#element', {
  strings: ['Hello, World!', 'Welcome to Typewriter.js'],
  autoStart: true,
  loop: true
});

Both libraries offer simple ways to create typing animations, but Typewriter.js provides more options for customization and complex animations. ityped is more lightweight and straightforward, making it suitable for simpler use cases. The choice between the two depends on the specific requirements of your project and the level of control you need over the typing animation.

typeit

3,068

The most versatile JavaScript typewriter effect library on the planet.

Pros of TypeIt

More comprehensive documentation and examples
Supports a wider range of customization options
Actively maintained with regular updates

Cons of TypeIt

Larger file size, which may impact page load times
Steeper learning curve due to more complex API

Code Comparison

TypeIt:

new TypeIt("#element", {
  strings: "This is a string.",
  speed: 50,
  waitUntilVisible: true
}).go();

TypewriterJS:

var typewriter = new Typewriter('#element', {
  loop: false,
  delay: 75,
});

typewriter
  .typeString('This is a string.')
  .start();

Both libraries offer similar basic functionality for creating typewriter effects. TypeIt provides more advanced features and configuration options, while TypewriterJS offers a simpler API that may be easier for beginners to use.

TypeIt's documentation is more extensive, making it easier to implement complex animations. However, this comes at the cost of a larger file size and potentially longer implementation time for simple use cases.

TypewriterJS, being lighter and more straightforward, might be preferable for projects with simpler requirements or where minimizing file size is crucial. However, it lacks some of the advanced features and customization options that TypeIt offers.

Ultimately, the choice between these libraries depends on the specific needs of your project and your preference for simplicity versus feature richness.

emojilib

1,660

Emoji keyword library.

Pros of emojilib

Comprehensive emoji database with keywords and categories
Lightweight and easy to integrate into various projects
Regular updates to keep up with new emoji releases

Cons of emojilib

Limited functionality (only provides emoji data)
Requires additional implementation for advanced features
No built-in typing or animation effects

Code Comparison

emojilib usage:

const emoji = require('emojilib')
console.log(emoji.lib['😄'])
// Output: {keywords: ['smile', 'happy', 'joy', 'funny'], char: '😄', category: 'people'}

TypewriterJS usage:

import Typewriter from 'typewriter-effect/dist/core';

new Typewriter('#typewriter', {
  strings: ['Hello, World!'],
  autoStart: true,
});

Summary

emojilib is a comprehensive emoji database library, while TypewriterJS is a typing animation library. emojilib excels in providing extensive emoji data, making it ideal for projects requiring emoji information. TypewriterJS, on the other hand, offers dynamic typing animations for text display.

emojilib is more suitable for applications needing emoji search, filtering, or display functionality. TypewriterJS is better for creating engaging text animations and simulating typing effects on websites or applications.

The choice between these libraries depends on the specific requirements of your project: emoji data management or text animation effects.

slate

29,779

A completely customizable framework for building rich text editors. (Currently in beta.)

Pros of Slate

More comprehensive and feature-rich for building complex rich text editors
Supports collaborative editing and real-time updates
Highly customizable and extensible with plugins

Cons of Slate

Steeper learning curve due to its complexity
Heavier in terms of bundle size and performance impact
Requires more setup and configuration for basic use cases

Code Comparison

TypewriterJS:

new Typewriter('#typewriter', {
  strings: ['Hello, World!', 'Welcome to TypewriterJS'],
  autoStart: true,
  loop: true
});

Slate:

const editor = withReact(createEditor())
const [value, setValue] = useState([
  { type: 'paragraph', children: [{ text: 'A line of text in Slate.' }] },
])

Summary

Slate is a powerful rich text editor framework, offering advanced features and customization options. It's ideal for complex editing needs but may be overkill for simple typewriter effects. TypewriterJS, on the other hand, is lightweight and focused solely on creating typewriter animations, making it easier to implement for basic use cases but lacking in advanced editing capabilities.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

TypewriterJS v2

NPM Repository JSFiddle Example Emoji Example

CDN

You can use the CDN version of this plugin for fast and easy setup.

<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>

Installation

You can install Typewriterjs with just one command and you're good to go


# with npm
npm i typewriter-effect

# with yarn
yarn add typewriter-effect

Building

You will need to bundle the javascript before it can be used, this can be done using npm run build:dev for development or npm run build:prod for production.

Core

This is the base version of the typewriter effect. It will need a the bundled version of the javascript to work correctly.

See examples in the 'examples' folder.

import Typewriter from 'typewriter-effect/dist/core';

new Typewriter('#typewriter', {
  strings: ['Hello', 'World'],
  autoStart: true,
});

Options

Name	Type	Default value	Description
strings	String or Array	null	Strings to type out when using `autoStart` option
cursor	String	Pipe character	String value to use as the cursor.
delay	'natural' or Number	'natural'	The delay between each key when typing.
deleteSpeed	'natural' or Number	'natural'	The delay between deleting each character.
loop	Boolean	false	Whether to keep looping or not.
autoStart	Boolean	false	Whether to autostart typing strings or not. You are required to provide `strings` option.
pauseFor	Number	1500	The pause duration after a string is typed when using autostart mode
devMode	Boolean	false	Whether or not to display console logs.
skipAddStyles	Boolean	Skip adding default typewriter css styles.
wrapperClassName	String	'Typewriter__wrapper'	Class name for the wrapper element.
cursorClassName	String	'Typewriter__cursor'	Class name for the cursor element.
stringSplitter	Function	String splitter function, can be used to split emoji's
onCreateTextNode	Function	null	Callback function to replace the internal method which creates a text node for the character before adding it to the DOM. If you return null, then it will not add anything to the DOM and so it is up to you to handle it.
onRemoveNode	Function	null	Callback function when a node is about to be removed. First param will be an object `{ node: HTMLNode, charater: string }`

Methods

All methods can be chained together.

Name	Params	Description
start	-	Start the typewriter effect.
stop	-	Stop the typewriter effect.
pauseFor	`ms` Time to pause for in milliseconds	Pause for milliseconds
typeString	`string` String to type out, it can contain HTML tags	Type out a string using the typewriter effect.
pasteString	`string` String to paste out, it can contain HTML tags	Paste out a string.
deleteAll	`speed` Speed to delete all visibles nodes, can be number or 'natural'	Delete everything that is visible inside of the typewriter wrapper element.
deleteChars	`amount` Number of characters	Delete and amount of characters, starting at the end of the visible string.
callFunction	`cb` Callback, `thisArg` this Object to bind to the callback function	Call a callback function. The first parameter to the callback `elements` which contains all DOM nodes used in the typewriter effect.
changeDeleteSpeed	`speed` Number or 'natural'	The speed at which to delete the characters, lower number is faster.
changeDelay	`delay` Number or 'natural'	Change the delay when typing out each character

Examples

Basic example

var app = document.getElementById('app');

var typewriter = new Typewriter(app, {
  loop: true,
  delay: 75,
});

typewriter
  .pauseFor(2500)
  .typeString('A simple yet powerful native javascript')
  .pauseFor(300)
  .deleteChars(10)
  .typeString('<strong>JS</strong> plugin for a cool typewriter effect and ')
  .typeString('<strong>only <span style="color: #27ae60;">5kb</span> Gzipped!</strong>')
  .pauseFor(1000)
  .start();

Custom text node creator using callback

var app = document.getElementById('app');

var customNodeCreator = function(character) {
  return document.createTextNode(character);
}

var typewriter = new Typewriter(app, {
  loop: true,
  delay: 75,
  onCreateTextNode: customNodeCreator,
});

typewriter
  .typeString('A simple yet powerful native javascript')
  .pauseFor(300)
  .start();

Custom handling text insert using input placeholder

var input = document.getElementById('input')

var customNodeCreator = function(character) {
  // Add character to input placeholder
  input.placeholder = input.placeholder + character;

  // Return null to skip internal adding of dom node
  return null;
}

var onRemoveNode = function({ character }) {
  if(input.placeholder) {
    // Remove last character from input placeholder
    input.placeholder = input.placeholder.slice(0, -1)
  }
}

var typewriter = new Typewriter(null, {
  loop: true,
  delay: 75,
  onCreateTextNode: customNodeCreator,
  onRemoveNode: onRemoveNode,
});

typewriter
  .typeString('A simple yet powerful native javascript')
  .pauseFor(300)
  .start();

React

This includes a React component which can be used within your project. You can pass in a onInit function which will be called with the instance of the typewriter so you can use the typewriter core API.

import Typewriter from 'typewriter-effect';

<Typewriter
  onInit={(typewriter) => {
    typewriter.typeString('Hello World!')
      .callFunction(() => {
        console.log('String typed out!');
      })
      .pauseFor(2500)
      .deleteAll()
      .callFunction(() => {
        console.log('All strings were deleted');
      })
      .start();
  }}
/>

Alternatively you can also pass in options to use auto play and looping for example:

import Typewriter from 'typewriter-effect';

<Typewriter
  options={{
    strings: ['Hello', 'World'],
    autoStart: true,
    loop: true,
  }}
/>

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of Typed.js

Cons of Typed.js

Code Comparison

Summary

Pros of ityped

Cons of ityped

Code Comparison

Pros of TypeIt

Cons of TypeIt

Code Comparison

Pros of emojilib

Cons of emojilib

Code Comparison

Summary

Pros of Slate

Cons of Slate

Code Comparison

Summary

Convert designs to code with AI

README

TypewriterJS v2

CDN

Installation

Building

Core

Options

Methods

Examples

Basic example

Custom text node creator using callback

Custom handling text insert using input placeholder

React

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days