T-Writer Demo

T-Writer.js is a native typewriter-effect library, designed to be:

Below are a few demos, accompanied by the code you need to make it happen. These demos do not cover the full range of functionality built in. For a complete list of methods, please see the documentation on GitHub.

const writer = new Typewriter(target, {
  loop: true,
  typeColor: 'blue'
})

writer
  .type('A simple syntax makes it easy.')
  .rest(500)
  .start()

const writer = new Typewriter(target, {
  loop: true,
  typeSpeed: 80,
  deleteSpeed: 80,
  typeColor: 'red'
})

writer
  .type('You can type')
  .rest(500)
  .changeOps({ deleteSpeed: 80 })
  .remove(4)
  .type('edit')
  .rest(500)
  .remove(4)
  .type('synchronize callbacks')
  .rest(500)
  .changeOps({ deleteSpeed: 20 })
  .remove(21)
  .type('change options on the go')
  .rest(500)
  .clear()
  .start()

const writer = new Typewriter(target, {
  loop: true, 
  typeColor: 'red' 
})

writer
  .strings(
    400,
    "Set many strings",
    "In just one call", 
    "Using the 'strings' method"
  )
  .start()

const writer1 = new Typewriter(target1, {
  typeSpeed: 60 
})

const writer2 = new Typewriter(target2, { 
  typeSpeed: 60 
})

writer1
  .type('Combo typewriters to')
  .removeCursor()
  .then(writer2.start.bind(writer2))
  .start()

writer2
  .type("create complex effects")
  .rest(500)
  .clear()
  .changeTypeColor('red')
  .type("defy user expectations")
  .rest(500)
  .clear()
  .changeTypeColor('blue')
  .type("generate a custom loop")
  .rest(500)
  .clear()
  .changeTypeColor('black')
  .then(writer1.start.bind(writer1))