A Typewriter, but using a New HTML Tag

So last time, I made a typewriter animation without HTML, CSS, nor Javascript. What happens if instead of using nothing, we allow ourselves to use... everything?

All this is achieved with a fancy new HTML tag, <typewritten-text>!

This is a <typewritten-text><strong>typewriter effect!</strong></typewritten-text>

Find out how to install and use it here:

A New HTML Tag?

The HTML standard allows developers to define custom elements through Web Components. Making a new element just requires a handful of Javascript, from there letting you define as much or as little functionality as needed.

class MyElement extends HTMLElement {
  // code for how the element looks and behaves
}

window.customElements.define('my-element', MyElement)

The typewritten-text element is one such web component, designed to provide a semantic, flexible, and reusable typewriter component!

Since web components are native browser technology, they are meant to work with most of our beloved frameworks out of the box (looking at you, React...). That's one of my favorite things about them!

Granted, the developer experience can be... painful sometimes. This innocent little element turned out to be much much harder than I originally thought in order to achieve all my goals for it.

The typewritten-text Element

Once Javascript enters the arena, basically anything becomes possible.

• No need for monospace requirements! The inner text can be of any font or size; in fact, it can mix fonts if you want.
• Built-in multiline support, for if you want to type out a longer sentence or two.
• A very simple interface; you can basically use it like any standard HTML tag.

And of course, I put in the effort to make it as accessible as possible.

• It represents its textual content regardless of current typed state, especially useful for those using Assistive Technologies.
• The blinking cursor animation is disabled for people who prefer reduced motion.
• No content-shifting either! The element's size is always the size of its content.

Perhaps the most interesting feature is its events. The element dispatches events when characters are typed or the phrase is finished. By listening to those events, you can use the magic of code to make the typewriter do any custom behaviour that's desired!

For example, starting another typewritten text:

first.addEventListener('typewritten-text:phrasetyped', () => {
    second.start()
})

Showcasing

Here's a couple of nifty things you can do with the typewritten-text component!

Typewriter Cycle

Using events, it's simple to cycle through different texts to type out.

The typewritten-text element is designed to be very basic so it can be used in as many ways as possible, which is why the cycle effect is not built-in. A different web component could be made to encapsulate the effect, though!

Character Dialog

Characters tend to talk with a typewriter animation also!

Hit Rerun at the bottom of the frame to see the animation again.

Find out more

All information on how to install and use the typewritten-text component can be found on github!

I may soon write a little more about the process of actually making (and testing) a web component.