lang	en
title	\<type-writer\> docs
css	type-writer.css

Example

Simulate typing out the textContent of the component. The simplest way to use the component is to set the text to be displayed as the text content of the component:

<type-writer>I am being typed out like on a typewriter.</type-writer>

<type-writer>I am being typed out like on a typewriter.</type-writer>

There are three ways to set the text to be displayed in the component:

• textContent: The text to be displayed can be set as the text content of the component.
• value: The text to be displayed can be set as the value of the value attribute.
• .value setter: The text to be displayed can be set using the .value setter method.

Attributes

The text content may also be set as the content of the value attribute:

• value: Sets or retrieves the text to be displayed with the typewriter effect. When this attribute is modified, the text is re-rendered with the typewriter animation.

<type-writer value="I am being typed out like on a typewriter from the value attribute.">

</type-writer>

<type-writer value="I am being typed out like on a typewriter from the value attribute.">
</type-writer>

Methods

• value(value): Update the text to be displayed dynamically. Triggers typing animation.

<form  id=dynamic-input-form>
<input>
</form>
<type-writer id=dynamic value="I am being typed out like on a typewriter from the value attribute.">
</type-writer>
<script>
document.querySelector('#dynamic-input-form')
  .addEventListener('submit', submitEvent => {
    submitEvent.preventDefault()
    const input = submitEvent.target.querySelector('input')
    document.querySelector('type-writer#dynamic').value = input.value
  })
</script>

<script> document.querySelector('#dynamic-input-form') .addEventListener('submit', submitEvent => { submitEvent.preventDefault() const input = submitEvent.target.querySelector('input') document.querySelector('type-writer#dynamic').value = input.value }) </script>

Data

• #value: A private property that holds the current text value to be displayed in the component.

Events

Currently, this component does not emit any custom events.

Layouts

For customizing the layout, refer to the associated CSS file type-writer.css. You can style the individual letters by targeting .letter class in your CSS.

See also

• HTML Custom Elements: MDN Web Docs
• JavaScript Template Literals: MDN Web Docs
• CSS Animations: MDN Web Docs

<script type="module"> import {TypeWriter} from './TypeWriter.js' window.typeWriter = document.querySelector('type-writer') </script>