### start()

Source: https://github.com/mattboldt/typed.js/blob/main/docs/file/src/typed.js.html

Starts the typing or backspacing animation after it has been stopped.

```APIDOC
## start()

### Description
Start typing / backspacing after being stopped.

### Method
`public`
```

--------------------------------

### start

Source: https://github.com/mattboldt/typed.js/blob/main/docs/class/src/typed-using-raf.js~Typed.html

Starts or resumes the typing/backspacing animation.

```APIDOC
## start

### Description
Start typing / backspacing after being stopped.

### Method
start()

### Parameters
This method does not accept any parameters.
```

--------------------------------

### start()

Source: https://github.com/mattboldt/typed.js/blob/main/docs/class/src/typed.js~Typed.html

Starts the typing animation. If the animation was previously stopped, this method will resume it.

```APIDOC
## start()

### Description
Start typing / backspacing after being stopped.

### Method
public start()

### Parameters
None
```

--------------------------------

### onStart

Source: https://github.com/mattboldt/typed.js/blob/main/docs/index.html

Callback function that is triggered after the typing process has started.

```APIDOC
## onStart(arrayPos, self)

### Description
After start.

### Parameters
- **arrayPos** (number) - Description not provided.
- **self** (Typed) - Description not provided.
```

--------------------------------

### start()

Source: https://github.com/mattboldt/typed.js/blob/main/docs/file/src/typed-using-raf.js.html

Starts or resumes the typing or backspacing animation after it has been stopped. If the instance was stopped with a specific typewrite or backspace action pending, it resumes that action.

```APIDOC
## start()

### Description
Starts or resumes the typing or backspacing animation after it has been stopped. If the instance was stopped with a specific typewrite or backspace action pending, it resumes that action.

### Method
public
```

--------------------------------

### Install Typed.js with NPM

Source: https://github.com/mattboldt/typed.js/blob/main/README.md

Use this command to install Typed.js using NPM for build tools or React applications.

```bash
npm install typed.js
```

--------------------------------

### Install Typed.js with Yarn

Source: https://github.com/mattboldt/typed.js/blob/main/README.md

Use this command to install Typed.js using Yarn for build tools or React applications.

```bash
yarn add typed.js
```

--------------------------------

### Setup Typed.js Animation with CDN

Source: https://github.com/mattboldt/typed.js/blob/main/README.md

After including the Typed.js library via CDN, set up the animation by targeting an HTML element and providing the strings and typing speed.

```html
<!-- Element to contain animated typing -->
<span id="element"></span>

<!-- Load library from the CDN -->
<script src="https://unpkg.com/typed.js@3.0.0/dist/typed.umd.js"></script>

<!-- Setup and start animation! -->
<script>
  var typed = new Typed('#element', {
    strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
    typeSpeed: 50,
  });
</script>
```

--------------------------------

### toggle()

Source: https://github.com/mattboldt/typed.js/blob/main/docs/file/src/typed.js.html

Toggles the start and stop states of the Typed instance. If typing is active, it stops; if stopped, it starts.

```APIDOC
## toggle()

### Description
Toggle start() and stop() of the Typed instance.

### Method
`public`
```

--------------------------------

### Begin Typing Animation

Source: https://github.com/mattboldt/typed.js/blob/main/docs/file/src/typed.js.html

Starts the typing animation sequence. It shuffles strings if needed, inserts the cursor, and sets the initial timeout for typing or backspacing.

```javascript
/**
     * Begins the typing animation
     * @private
     */
    begin() {
      this.options.onBegin(this);
      this.typingComplete = false;
      this.shuffleStringsIfNeeded(this);
      this.insertCursor();
      if (this.bindInputFocusEvents) this.bindFocusEvents();
      this.timeout = setTimeout(() => {
        // If the strPos is 0, we're starting from the beginning of a string
        // else, we're starting with a previous string that needs to be backspaced first
        if (this.strPos === 0) {
          this.typewrite(this.strings[this.sequence[this.arrayPos]], this.strPos);
        } else {
          this.backspace(this.strings[this.sequence[this.arrayPos]], this.strPos);
        }
      }, this.startDelay);
    }
    
```

--------------------------------

### Typed Class Constructor

Source: https://github.com/mattboldt/typed.js/blob/main/docs/file/src/typed-using-raf.js.html

Initializes a new Typed instance. Loads options and starts the typing animation.

```javascript
import raf from 'raf';
import { initializer } from './initializer.js';
import { htmlParser } from './html-parser.js';

/**
 * Welcome to Typed.js!
 * @param {string} elementId HTML element ID _OR_ HTML element
 * @param {object} options options object
 * @returns {object} a new Typed object
 */
export default class Typed {
  constructor(elementId, options) {
    // Initialize it up
    initializer.load(this, options, elementId);
    // All systems go!
    this.begin();
  }

  /**
   * Toggle start() and stop() of the Typed instance
   * @public
   */
  toggle() {
    this.pause.status ? this.start() : this.stop();
  }

  /**
   * Stop typing / backspacing and enable cursor blinking
   * @public
   */
  stop() {
    if (this.typingComplete) return;
    if (this.pause.status) return;
    this.toggleBlinking(true);
    this.pause.status = true;
    this.options.onStop(this.arrayPos, this);
  }

  /**
   * Start typing / backspacing after being stopped
   * @public
   */
  start() {
    if (this.typingComplete) return;
    if (!this.pause.status) return;
    this.pause.status = false;
    if (this.pause.typewrite) {
      this.typewrite(this.pause.curString, this.pause.curStrPos);
    } else {
      this.backspace(this.pause.curString, this.pause.curStrPos);
    }
    this.options.onStart(this.arrayPos, this);
  }

  /**
   * Destroy this instance of Typed
   * @public
   */
  destroy() {
    this.reset(false);
    this.options.onDestroy(this);
  }

  /**
   * Reset Typed and optionally restarts
   * @param {boolean} restart
   * @public
   */
  reset(restart = true) {
    clearInterval(this.timeout);
    this.replaceText('');
    if (this.cursor && this.cursor.parentNode) {
      this.cursor.parentNode.removeChild(this.cursor);
      this.cursor = null;
    }
    this.strPos = 0;
    this.arrayPos = 0;
    this.curLoop = 0;
    if (restart) {
      this.insertCursor();
      this.options.onReset(this);
      this.begin();
    }
  }

  /**
   * Sets up the typing animation
   * @private
   */
  begin() {
    this.options.onBegin(this);
    this.typingComplete = false;
    this.shuffleStringsIfNeeded(this);
    this.insertCursor();
    if (this.bindInputFocusEvents) this.bindFocusEvents();
    raf((timestamp) => this.beginAnimation(timestamp));
  }

  /**
   * Begins the typing animation
   * @private
   */
  beginAnimation(timestamp) {
    if (this._beginAnimationStart === undefined) {
      this._beginAnimationStart = timestamp;
    }

    if (this.startDelay > 0) {
      const elapsed = timestamp - this._beginAnimationStart;
      if (elapsed < this.startDelay) {
        raf((timestamp) => this.beginAnimation(timestamp));
        return;
      }
    }

    this._beginAnimationStart = undefined;

    // Check if there is some text in the element, if yes start by backspacing the default message
    if (!this.currentElContent || this.currentElContent.length === 0) {
      this.typewrite(this.strings[this.sequence[this.arrayPos]], this.strPos);
    } else {
      // Start typing
      this.backspace(this.currentElContent, this.currentElContent.length);
    }
  }

  /**
   * Called for each character typed
   * @param {string} curString the current string in the strings array
   * @param {number} curStrPos the current position in the curString
   * @private
   */
  typewrite(curString, curStrPos) {
    if (this.fadeOut && this.el.classList.contains(this.fadeOutClass)) {
      this.el.classList.remove(this.fadeOutClass);
      if (this.cursor) this.cursor.classList.remove(this.fadeOutClass);
    }

    if (this.pause.status === true) {
      this.setPauseStatus(curString, curStrPos, true);
      return;
    }

    raf((timestamp) => this.typewriteStep(curString, curStrPos, timestamp));
  }

```

--------------------------------

### Typed.js Full Customization Example

Source: https://github.com/mattboldt/typed.js/blob/main/README.md

Configure all available options for Typed.js, including strings, typing and backspacing speeds, looping, cursor behavior, and various callback functions. This snippet demonstrates extensive customization.

```javascript
var typed = new Typed('#element', {
  /**
   * @property {array} strings strings to be typed
   * @property {string} stringsElement ID of element containing string children
   */
  strings: [
    'These are the default values...', 
    'You know what you should do?',
    'Use your own!',
    'Have a great day!',
  ],
  stringsElement: null,

  /**
   * @property {number} typeSpeed type speed in milliseconds
   */
  typeSpeed: 0,

  /**
   * @property {number} startDelay time before typing starts in milliseconds
   */
  startDelay: 0,

  /**
   * @property {number} backSpeed backspacing speed in milliseconds
   */
  backSpeed: 0,

  /**
   * @property {boolean} smartBackspace only backspace what doesn't match the previous string
   */
  smartBackspace: true,

  /**
   * @property {boolean} shuffle shuffle the strings
   */
  shuffle: false,

  /**
   * @property {number} backDelay time before backspacing in milliseconds
   */
  backDelay: 700,

  /**
   * @property {boolean} fadeOut Fade out instead of backspace
   * @property {string} fadeOutClass css class for fade animation
   * @property {boolean} fadeOutDelay Fade out delay in milliseconds
   */
  fadeOut: false,
  fadeOutClass: 'typed-fade-out',
  fadeOutDelay: 500,

  /**
   * @property {boolean} loop loop strings
   * @property {number} loopCount amount of loops
   */
  loop: false,
  loopCount: Infinity,

  /**
   * @property {boolean} showCursor show cursor
   * @property {string} cursorChar character for cursor
   * @property {boolean} autoInsertCss insert CSS for cursor and fadeOut into HTML <head>
   */
  showCursor: true,
  cursorChar: '|',
  autoInsertCss: true,

  /**
   * @property {string} attr attribute for typing
   * Ex: input placeholder, value, or just HTML text
   */
  attr: null,

  /**
   * @property {boolean} bindInputFocusEvents bind to focus and blur if el is text input
   */
  bindInputFocusEvents: false,

  /**
   * @property {string} contentType 'html' or 'null' for plaintext
   */
  contentType: 'html',

  /**
   * Before it begins typing
   * @param {Typed} self
   */
  onBegin: (self) => {},

  /**
   * All typing is complete
   * @param {Typed} self
   */
  onComplete: (self) => {},

  /**
   * Before each string is typed
   * @param {number} arrayPos
   * @param {Typed} self
   */
  preStringTyped: (arrayPos, self) => {},

  /**
   * After each string is typed
   * @param {number} arrayPos
   * @param {Typed} self
   */
  onStringTyped: (arrayPos, self) => {},

  /**
   * During looping, after last string is typed
   * @param {Typed} self
   */
  onLastStringBackspaced: (self) => {},

  /**
   * Typing has been stopped
   * @param {number} arrayPos
   * @param {Typed} self
   */
  onTypingPaused: (arrayPos, self) => {},

  /**
   * Typing has been started after being stopped
   * @param {number} arrayPos
   * @param {Typed} self
   */
  onTypingResumed: (arrayPos, self) => {},

  /**
   * After reset
   * @param {Typed} self
   */
  onReset: (self) => {},

  /**
   * After stop
   * @param {number} arrayPos
   * @param {Typed} self
   */
  onStop: (arrayPos, self) => {},

  /**
   * After start
   * @param {number} arrayPos
   * @param {Typed} self
   */
  onStart: (arrayPos, self) => {},

  /**
   * After destroy
   * @param {Typed} self
   */
  onDestroy: (self) => {},
});

```

--------------------------------

### Typed.js with Initial Strings

Source: https://github.com/mattboldt/typed.js/blob/main/index.html

Initialize Typed.js with a starting set of strings. This snippet also shows how to add strings dynamically later, though the addition mechanism is not shown here.

```javascript
var typed6 = new Typed('#typed7', {
    strings: ['First string...'],
    typeSpeed: 40,
    backSpeed: 0,
    loop: true
  });
```

--------------------------------

### Basic Typed.js Initialization

Source: https://context7.com/mattboldt/typed.js/llms.txt

Instantiate Typed.js with a CSS selector or DOM element and an options object. Animation starts automatically. Configure strings, typing speed, backspacing, and looping behavior.

```javascript
import Typed from 'typed.js';

// Basic usage with CSS selector
const typed = new Typed('#typed-output', {
  strings: ['Hello, world!', 'Welcome to Typed.js.', 'Enjoy the animation.'],
  typeSpeed: 50,       // ms per character when typing
  backSpeed: 30,       // ms per character when backspacing
  backDelay: 1000,     // ms to wait before backspacing
  loop: true,          // loop through strings indefinitely
  showCursor: true,
  cursorChar: '|',
});

// Using a direct DOM element reference (e.g., inside a React component)
const el = document.getElementById('typed-output');
const typed2 = new Typed(el, {
  strings: ['Typed with a DOM reference.'],
  typeSpeed: 60,
});
```

--------------------------------

### Control Animation with `stop()`, `start()`, `toggle()`

Source: https://context7.com/mattboldt/typed.js/llms.txt

Programmatically control the animation playback using `stop()`, `start()`, and `toggle()` methods. `toggle()` switches between running and stopped states. Event callbacks like `onStop` and `onStart` can be used for custom logic.

```javascript
import Typed from 'typed.js';

const typed = new Typed('#element', {
  strings: ['Pausable animation...'],
  typeSpeed: 60,
  loop: true,
  onStop: (arrayPos, self) => console.log('Stopped at string index', arrayPos),
  onStart: (arrayPos, self) => console.log('Resumed at string index', arrayPos),
});

document.getElementById('pause-btn').addEventListener('click', () => typed.stop());
document.getElementById('resume-btn').addEventListener('click', () => typed.start());
document.getElementById('toggle-btn').addEventListener('click', () => typed.toggle());
```

--------------------------------

### Initialize Typed.js Instance

Source: https://github.com/mattboldt/typed.js/blob/main/docs/file/src/typed.js.html

The constructor initializes the Typed.js instance, loading options and starting the typing animation. It requires an HTML element ID or element and an options object.

```javascript
import { initializer } from './initializer.js';
    import { htmlParser } from './html-parser.js';
    
    /**
     * Welcome to Typed.js!
     * @param {string} elementId HTML element ID _OR_ HTML element
     * @param {object} options options object
     * @returns {object} a new Typed object
     */
    export default class Typed {
      constructor(elementId, options) {
        // Initialize it up
        initializer.load(this, options, elementId);
        // All systems go!
        this.begin();
      }
    
```

--------------------------------

### Start Typing Animation

Source: https://github.com/mattboldt/typed.js/blob/main/docs/file/src/typed.js.html

Resumes the typing or backspacing animation after it has been stopped. Handles resuming from a paused state.

```javascript
/**
     * Start typing / backspacing after being stopped
     * @public
     */
    start() {
      if (this.typingComplete) return;
      if (!this.pause.status) return;
      this.pause.status = false;
      if (this.pause.typewrite) {
        this.typewrite(this.pause.curString, this.pause.curStrPos);
      } else {
        this.backspace(this.pause.curString, this.pause.curStrPos);
      }
      this.options.onStart(this.arrayPos, this);
    }
    
```

--------------------------------

### Typed Control Methods

Source: https://github.com/mattboldt/typed.js/blob/main/docs/API.md

Methods to control the typing animation, such as starting, stopping, toggling, and resetting.

```APIDOC
## start()

### Description
Starts typing or backspacing after being stopped. Enables cursor blinking.

### Method
`start()`
```

```APIDOC
## stop()

### Description
Stops typing or backspacing and enables cursor blinking.

### Method
`stop()`
```

```APIDOC
## toggle()

### Description
Toggles between starting and stopping the Typed instance.

### Method
`toggle()`
```

```APIDOC
## reset(restart)

### Description
Resets the Typed instance. Optionally restarts the typing animation.

### Parameters
- `restart` (boolean) - Optional - If true, restarts the typing animation after resetting.
```

```APIDOC
## destroy()

### Description
Destroys the current Typed instance.

### Method
`destroy()`
```

--------------------------------

### stop()

Source: https://github.com/mattboldt/typed.js/blob/main/docs/class/src/typed.js~Typed.html

Stops the typing animation and enables cursor blinking. The animation can be resumed later using the `start()` method.

```APIDOC
## stop()

### Description
Stop typing / backspacing and enable cursor blinking.

### Method
public stop()

### Parameters
None
```

--------------------------------

### load

Source: https://github.com/mattboldt/typed.js/blob/main/docs/class/src/initializer.js~Initializer.html

Loads default settings and user-provided options onto a Typed instance.

```APIDOC
### private load(self: Typed, options: object, elementId: string)

Load up defaults & options on the Typed instance

#### Params:

Name | Type | Attribute | Description
-----|------|-----------|------------
self | Typed |  | instance of Typed
options | object |  | options object
elementId | string |  | HTML element ID _OR_ instance of HTML element
```

--------------------------------

### toggle()

Source: https://github.com/mattboldt/typed.js/blob/main/docs/class/src/typed.js~Typed.html

Toggles the state of the Typed.js animation between starting and stopping.

```APIDOC
## toggle()

### Description
Toggle start() and stop() of the Typed instance.

### Method
public toggle()

### Parameters
None
```

--------------------------------

### Initializer Class

Source: https://github.com/mattboldt/typed.js/blob/main/docs/class/src/initializer.js~Initializer.html

You can directly use an instance of this class to initialize the Typed object with specific configurations.

```APIDOC
## Initializer

You can directly use an instance of this class. [initializer](variable/index.html#static-variable-initializer)

Initialize the Typed object
```

--------------------------------

### Toggle Typing Animation

Source: https://github.com/mattboldt/typed.js/blob/main/docs/file/src/typed.js.html

Toggles between starting and stopping the typing animation. Useful for pausing and resuming the effect.

```javascript
/**
     * Toggle start() and stop() of the Typed instance
     * @public
     */
    toggle() {
      this.pause.status ? this.start() : this.stop();
    }
    
```

--------------------------------

### CDN / Browser Usage

Source: https://context7.com/mattboldt/typed.js/llms.txt

Instructions on how to use Typed.js directly in a browser via a CDN, without the need for a build tool.

```APIDOC
## CDN / Browser Usage (No Build Tool)

For direct browser use without a bundler, load the UMD build from a CDN. The global `Typed` constructor is available immediately.

### Example HTML
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Typed.js CDN Demo</title>
</head>
<body>
  <h1><span id="typed"></span></h1>

  <script src="https://unpkg.com/typed.js@3.0.0/dist/typed.umd.js"></script>
  <script>
    var typed = new Typed('#typed', {
      strings: [
        'A JavaScript typing animation library.',
        'Zero dependencies.',
        'Works everywhere.',
      ],
      typeSpeed: 50,
      backSpeed: 30,
      backDelay: 1000,
      loop: true,
    });
  </script>
</body>
</html>
```
```

--------------------------------

### Typed Class Constructor

Source: https://github.com/mattboldt/typed.js/blob/main/docs/file/src/typed-using-raf.js.html

Initializes a new Typed instance. It takes an HTML element ID or element and an options object, then loads the configuration and begins the typing animation.

```APIDOC
## new Typed(elementId, options)

### Description
Initializes a new Typed instance. It takes an HTML element ID or element and an options object, then loads the configuration and begins the typing animation.

### Parameters
#### Parameters
- **elementId** (string | HTMLElement) - Required - The ID of the HTML element or the HTML element itself where the text will be typed.
- **options** (object) - Optional - Configuration options for the Typed instance.
```

--------------------------------

### Basic Typed.js Initialization

Source: https://github.com/mattboldt/typed.js/blob/main/index.html

Initialize Typed.js with strings from an element and various callback functions. Useful for setting up the core typing animation with event hooks.

```javascript
var typed = new Typed("#typed", {
    stringsElement: "#typed-strings",
    typeSpeed: 0,
    backSpeed: 0,
    backDelay: 500,
    startDelay: 1000,
    loop: false,
    onBegin: function(self) { prettyLog('onBegin ' + self) },
    onComplete: function(self) { prettyLog('onCmplete ' + self) },
    preStringTyped: function(pos, self) { prettyLog('preStringTyped ' + pos + ' ' + self); },
    onStringTyped: function(pos, self) { prettyLog('onStringTyped ' + pos + ' ' + self) },
    onLastStringBackspaced: function(self) { prettyLog('onLastStringBackspaced ' + self) },
    onTypingPaused: function(pos, self) { prettyLog('onTypingPaused ' + pos + ' ' + self) },
    onTypingResumed: function(pos, self) { prettyLog('onTypingResumed ' + pos + ' ' + self) },
    onReset: function(self) { prettyLog('onReset ' + self) },
    onStop: function(pos, self) { prettyLog('onStop ' + pos + ' ' + self) },
    onStart: function(pos, self) { prettyLog('onStart ' + pos + ' ' + self) },
    onDestroy: function(self) { prettyLog('onDestroy ' + self) }
  });
```

--------------------------------

### Typed Constructor

Source: https://github.com/mattboldt/typed.js/blob/main/docs/class/src/typed-using-raf.js~Typed.html

Initializes a new instance of the Typed class.

```APIDOC
## constructor

### Description
Initializes a new instance of the Typed class.

### Method
constructor

### Parameters
This constructor does not accept any parameters.
```

--------------------------------

### Typed.js CDN Usage (No Build Tool)

Source: https://context7.com/mattboldt/typed.js/llms.txt

Load the UMD build of Typed.js from a CDN for direct browser use without a bundler. The global `Typed` constructor becomes immediately available.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Typed.js CDN Demo</title>
</head>
<body>
  <h1><span id="typed"></span></h1>

  <script src="https://unpkg.com/typed.js@3.0.0/dist/typed.umd.js"></script>
  <script>
    var typed = new Typed('#typed', {
      strings: [
        'A JavaScript typing animation library.',
        'Zero dependencies.',
        'Works everywhere.',
      ],
      typeSpeed: 50,
      backSpeed: 30,
      backDelay: 1000,
      loop: true,
    });
  </script>
</body>
</html>
```

--------------------------------

### Get Current Element Content - JavaScript

Source: https://github.com/mattboldt/typed.js/blob/main/docs/file/src/initializer.js.html

Retrieves the current content of the target element based on its type (attribute, input value, innerHTML, or textContent). This is used to determine the initial text to be typed.

```javascript
getCurrentElContent(self) {
        let elContent = '';
        if (self.attr) {
          elContent = self.el.getAttribute(self.attr);
        } else if (self.isInput) {
          elContent = self.el.value;
        } else if (self.contentType === 'html') {
          elContent = self.el.innerHTML;
        } else {
          elContent = self.el.textContent;
        }
        return elContent;
      }
```

--------------------------------

### Initialize Typed Instance

Source: https://github.com/mattboldt/typed.js/blob/main/docs/file/src/initializer.js.html

Loads default and custom options onto the Typed instance. It determines the target element, sets up input-specific properties, and initializes various typing and cursor-related configurations.

```javascript
import defaults from './defaults.js';
/**
 * Initialize the Typed object
 */

export default class Initializer {
  /**
   * Load up defaults & options on the Typed instance
   * @param {Typed} self instance of Typed
   * @param {object} options options object
   * @param {string} elementId HTML element ID _OR_ instance of HTML element
   * @private
   */

  load(self, options, elementId) {
    // chosen element to manipulate text
    if (typeof elementId === 'string') {
      self.el = document.querySelector(elementId);
    } else {
      self.el = elementId;
    }

    self.options = { ...defaults, ...options };

    // attribute to type into
    self.isInput = self.el.tagName.toLowerCase() === 'input';
    self.attr = self.options.attr;
    self.bindInputFocusEvents = self.options.bindInputFocusEvents;

    // show cursor
    self.showCursor = self.isInput ? false : self.options.showCursor;

    // custom cursor
    self.cursorChar = self.options.cursorChar;

    // Is the cursor blinking
    self.cursorBlinking = true;

    // text content of element
    self.elContent = self.attr
      ? self.el.getAttribute(self.attr)
      : self.el.textContent;

    // html or plain text
    self.contentType = self.options.contentType;

    // typing speed
    self.typeSpeed = self.options.typeSpeed;

    // add a delay before typing starts
    self.startDelay = self.options.startDelay;

    // backspacing speed
    self.backSpeed = self.options.backSpeed;

    // only backspace what doesn't match the previous string
    self.smartBackspace = self.options.smartBackspace;

    // amount of time to wait before backspacing
    self.backDelay = self.options.backDelay;

    // Fade out instead of backspace
    self.fadeOut = self.options.fadeOut;
    self.fadeOutClass = self.options.fadeOutClass;
    self.fadeOutDelay = self.options.fadeOutDelay;

    // variable to check whether typing is currently paused
    self.isPaused = false;

    // input strings of text
    self.strings = self.options.strings.map((s) => s.trim());

    // div containing strings
    if (typeof self.options.stringsElement === 'string') {
      self.stringsElement = document.querySelector(self.options.stringsElement);
    } else {
      self.stringsElement = self.options.stringsElement;
    }

    if (self.stringsElement) {
      self.strings = [];
      self.stringsElement.style.cssText =
        'clip: rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;';

      const strings = Array.prototype.slice.apply(self.stringsElement.children);
      const stringsLength = strings.length;

      if (stringsLength) {
        for (let i = 0; i < stringsLength; i += 1) {
          const stringEl = strings[i];
          self.strings.push(stringEl.innerHTML.trim());
        }
      }
    }

    // character number position of current string
    self.strPos = 0;

    // If there is some text in the element
    self.currentElContent = this.getCurrentElContent(self);

    if (self.currentElContent && self.currentElContent.length > 0) {
      self.strPos = self.currentElContent.length - 1;
      self.strings.unshift(self.currentElContent);
    }

    // the order of strings
    self.sequence = [];

    // Set the order in which the strings are typed
    for (let i in self.strings) {
      self.sequence[i] = i;
    }

    // current array position
    self.arrayPos = 0;

    // index of string to stop backspacing on
    self.stopNum = 0;

    // Looping logic
    self.loop = self.options.loop;
    self.loopCount = self.options.loopCount;
    self.curLoop = 0;

    // shuffle the strings
    self.shuffle = self.options.shuffle;

    self.pause = {
      status: false,
      typewrite: true,
      curString: '',
      curStrPos: 0,
    };

    // When the typing is complete (when not looped)
  }
}
```

--------------------------------

### Bind Focus Events for Input Elements

Source: https://github.com/mattboldt/typed.js/blob/main/docs/file/src/typed-using-raf.js.html

Attaches event listeners to input elements to control typing animation based on focus. Stops animation on focus and starts it when the input loses focus and has content.

```javascript
bindFocusEvents() {
        if (!this.isInput) return;
        this.el.addEventListener('focus', (e) => {
          this.stop();
        });
        this.el.addEventListener('blur', (e) => {
          if (this.el.value && this.el.value.length !== 0) {
            return;
          }
          this.start();
        });
      }
```

--------------------------------

### Typed Class Constructor

Source: https://github.com/mattboldt/typed.js/blob/main/docs/identifiers.html

Initializes a new Typed.js instance. This is the primary way to use the library.

```APIDOC
## Typed Class Constructor

### Description
Initializes a new Typed.js instance, targeting a specific HTML element and applying configuration options.

### Signature
`Typed(elementId: string, options: object): object`

### Parameters
*   **elementId** (string) - Required - The ID of the HTML element where the typing effect will be applied.
*   **options** (object) - Optional - An object containing configuration settings for the Typed instance.
```

--------------------------------

### Typed Constructor

Source: https://github.com/mattboldt/typed.js/blob/main/docs/index.html

Initializes a new Typed instance. You can provide either an HTML element ID or the HTML element itself, along with an options object to configure the typing behavior.

```APIDOC
## Typed Constructor

### Description
Initializes a new Typed instance. You can provide either an HTML element ID or the HTML element itself, along with an options object to configure the typing behavior.

### Parameters

- **elementId** (string) - The ID of the HTML element or the HTML element itself where the text will be typed.
- **options** (object) - An object containing configuration options for Typed.js.

### Returns

- **object**: A new Typed object instance.
```

--------------------------------

### Typed Defaults and Options

Source: https://github.com/mattboldt/typed.js/blob/main/docs/index.html

Provides an overview of the default configuration options available for Typed.js, allowing for customization of typing behavior.

```APIDOC
## defaults

### Description
Defaults & options for Typed.js.

### Returns
`object`: Typed defaults & options.

### Properties

#### strings
- **strings** (array) - strings to be typed
- **stringsElement** (string) - ID of element containing string children

#### typeSpeed
- **typeSpeed** (number) - type speed in milliseconds

#### startDelay
- **startDelay** (number) - time before typing starts in milliseconds

#### backSpeed
- **backSpeed** (number) - backspacing speed in milliseconds

#### smartBackspace
- **smartBackspace** (boolean) - only backspace what doesn't match the previous string

#### shuffle
- **shuffle** (boolean) - shuffle the strings

#### backDelay
- **backDelay** (number) - time before backspacing in milliseconds

#### shouldBackspace
- **shouldBackspace** (boolean) - Backspace or just keep typing the next string

#### fadeOut
- **fadeOut** (boolean) - Fade out instead of backspace
- **fadeOutClass** (string) - css class for fade animation
- **fadeOutDelay** (boolean) - Fade out delay in milliseconds

#### loop
- **loop** (boolean) - loop strings
- **loopCount** (number) - amount of loops

#### showCursor
- **showCursor** (boolean) - show cursor
- **cursorChar** (string) - character for cursor
- **autoInsertCss** (boolean) - insert CSS for cursor and fadeOut into HTML

#### attr
- **attr** (string) - attribute for typing Ex: input placeholder, value, or just HTML text

#### bindInputFocusEvents
- **bindInputFocusEvents** (boolean) - bind to focus and blur if el is text input

#### contentType
- **contentType** (string) - 'html' or 'null' for plaintext
```

--------------------------------

### keepTyping

Source: https://github.com/mattboldt/typed.js/blob/main/docs/class/src/typed-using-raf.js~Typed.html

Continues to the next string and begins typing.

```APIDOC
## keepTyping(curString: string, curStrPos: number)

### Description
Continues to the next string and begins typing.

### Parameters
#### Path Parameters
- **curString** (string) - Required - The current string being typed.
- **curStrPos** (number) - Required - The current position within the string.

### Method
Instance Method

### Endpoint
N/A (JavaScript Method)
```

--------------------------------

### HTMLParser Instance

Source: https://github.com/mattboldt/typed.js/blob/main/docs/file/src/html-parser.js.html

Creates and exports a singleton instance of the HTMLParser class.

```javascript
export let htmlParser = new HTMLParser();
```

--------------------------------

### insertCursor

Source: https://github.com/mattboldt/typed.js/blob/main/docs/class/src/typed-using-raf.js~Typed.html

On init, inserts the cursor element.

```APIDOC
## insertCursor()

### Description
On init, inserts the cursor element.

### Method
Instance Method

### Endpoint
N/A (JavaScript Method)
```

--------------------------------

### Typed.js Defaults

Source: https://github.com/mattboldt/typed.js/blob/main/docs/API.md

Provides an overview of the default configuration options for Typed.js.

```APIDOC
## defaults

Defaults & options

Returns **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Typed defaults & options

### strings

**Properties**

-   `strings` **[array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)** strings to be typed
-   `stringsElement` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** ID of element containing string children

### typeSpeed

**Properties**

-   `typeSpeed` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** type speed in milliseconds

### startDelay

**Properties**

-   `startDelay` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** time before typing starts in milliseconds

### backSpeed

**Properties**

-   `backSpeed` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** backspacing speed in milliseconds

### smartBackspace

**Properties**

-   `smartBackspace` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** only backspace what doesn't match the previous string

### shuffle

**Properties**

-   `shuffle` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** shuffle the strings

### backDelay

**Properties**

-   `backDelay` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** time before backspacing in milliseconds

### fadeOut

**Properties**

-   `fadeOut` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Fade out instead of backspace
-   `fadeOutClass` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** css class for fade animation
-   `fadeOutDelay` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Fade out delay in milliseconds

### loop

**Properties**

-   `loop` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** loop strings
-   `loopCount` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** amount of loops

### showCursor

**Properties**

-   `showCursor` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** show cursor
-   `cursorChar` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** character for cursor
-   `autoInsertCss` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** insert CSS for cursor and fadeOut into HTML <head>

### attr

**Properties**

-   `attr` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** attribute for typing
    Ex: input placeholder, value, or just HTML text

### bindInputFocusEvents

**Properties**

-   `bindInputFocusEvents` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** bind to focus and blur if el is text input

### contentType

**Properties**

-   `contentType` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** 'html' or 'null' for plaintext
```

--------------------------------

### initFadeOut

Source: https://github.com/mattboldt/typed.js/blob/main/docs/class/src/typed-using-raf.js~Typed.html

Adds a CSS class to fade out the current string.

```APIDOC
## initFadeOut()

### Description
Adds a CSS class to fade out the current string.

### Method
Instance Method

### Endpoint
N/A (JavaScript Method)
```

--------------------------------

### Typed.js for Bulk Typing with Delays

Source: https://github.com/mattboldt/typed.js/blob/main/index.html

Simulate bulk typing with explicit delays between lines using newline characters and `^` notation. Suitable for command-line interface simulations.

```javascript
var typed6 = new Typed('#typed6', {
    strings: ['npm install^1000\n `installing components...` ^1000\n `Fetching from source...`'],
    typeSpeed: 40,
    backSpeed: 0,
    loop: true
  });
```

--------------------------------

### Defaults and Options

Source: https://github.com/mattboldt/typed.js/blob/main/docs/file/src/defaults.js.html

This section outlines the default configuration object for Typed.js, which includes properties for strings, typing speeds, looping behavior, cursor customization, and various callback functions that can be used to hook into the typing process.

```APIDOC
## Defaults & Options

This object contains the default configuration settings for Typed.js. Users can override these defaults when initializing the Typed instance.

### Properties:

*   **strings** (array): An array of strings to be typed. Defaults to a predefined set of example strings.
*   **stringsElement** (string | null): The ID of an HTML element that contains the strings to be typed. If provided, this overrides the `strings` array.
*   **typeSpeed** (number): The speed at which characters are typed, in milliseconds. Defaults to 0.
*   **startDelay** (number): The delay before typing begins, in milliseconds. Defaults to 0.
*   **backSpeed** (number): The speed at which characters are backspaced, in milliseconds. Defaults to 0.
*   **smartBackspace** (boolean): If true, only backspaces characters that do not match the previous string. Defaults to true.
*   **shuffle** (boolean): If true, the order of strings will be shuffled. Defaults to false.
*   **backDelay** (number): The delay before backspacing starts, in milliseconds. Defaults to 700.
*   **fadeOut** (boolean): If true, the text will fade out instead of backspacing. Defaults to false.
*   **fadeOutClass** (string): The CSS class applied for the fade-out animation. Defaults to 'typed-fade-out'.
*   **fadeOutDelay** (number): The delay before the fade-out animation starts, in milliseconds. Defaults to 500.
*   **loop** (boolean): If true, the typing will loop through the strings indefinitely. Defaults to false.
*   **loopCount** (number | boolean): The number of times to loop. Set to `Infinity` for infinite looping. Defaults to `Infinity`.
*   **showCursor** (boolean): If true, the cursor will be displayed. Defaults to true.
*   **cursorChar** (string): The character to use for the cursor. Defaults to '|'.
*   **autoInsertCss** (boolean): If true, CSS for the cursor and fade-out animation will be automatically inserted into the HTML `<head>`. Defaults to true.
*   **attr** (string | null): The HTML attribute to type into (e.g., 'placeholder', 'value'). If null, typing occurs as HTML text content. Defaults to null.
*   **bindInputFocusEvents** (boolean): If true and the target element is a text input, events for focus and blur will be bound. Defaults to false.
*   **contentType** (string): Specifies the content type for typing. Can be 'html' for HTML content or 'null' for plain text. Defaults to 'html'.

### Callbacks:

*   **onBegin** (function): Called before typing begins. Receives the Typed instance as an argument.
*   **onComplete** (function): Called when all typing is complete. Receives the Typed instance as an argument.
*   **preStringTyped** (function): Called before each string is typed. Receives the array position of the string and the Typed instance.
*   **onStringTyped** (function): Called after each string is typed. Receives the array position of the string and the Typed instance.
*   **onLastStringBackspaced** (function): Called after the last string has been backspaced during a loop. Receives the Typed instance.
*   **onTypingPaused** (function): Called when typing is paused. Receives the current array position and the Typed instance.
*   **onTypingResumed** (function): Called when typing is resumed after being paused. Receives the current array position and the Typed instance.
*   **onReset** (function): Called after the Typed instance is reset. Receives the Typed instance.
*   **onStop** (function): Called after typing is stopped. Receives the current array position and the Typed instance.
*   **onStart** (function): Called after typing is started. Receives the current array position and the Typed instance.
*   **onDestroy** (function): Called after the Typed instance is destroyed. Receives the Typed instance.
```

--------------------------------

### Typed Initialization

Source: https://github.com/mattboldt/typed.js/blob/main/docs/API.md

Initializes a new Typed object, which can then be used to control typing animations.

```APIDOC
## Typed()

### Description
Initializes a new Typed object.

### Parameters
- `elementId` (string) - Required - HTML element ID OR HTML element.
- `options` (object) - Optional - Options object for configuring the typing animation.

### Returns
- `object` - A new Typed object instance.
```

--------------------------------

### Option: `strings` and `stringsElement`

Source: https://context7.com/mattboldt/typed.js/llms.txt

Provide the text to animate either as a JavaScript array (`strings`) or by pointing to a hidden DOM container (`stringsElement`). The DOM approach is SEO-friendly because content is visible in the HTML source even without JavaScript.

```APIDOC
## Option: `strings` and `stringsElement`

### Description
Provide the text to animate either as a JavaScript array (`strings`) or by pointing to a hidden DOM container (`stringsElement`). The DOM approach is SEO-friendly because content is visible in the HTML source even without JavaScript.

### Parameters
#### Request Body
- **strings** (Array<string>) - Optional - An array of strings to be animated.
- **stringsElement** (string | HTMLElement) - Optional - A CSS selector or DOM element reference to a container holding the strings.

### Request Example
```html
<!-- SEO-friendly approach: strings live in the DOM -->
<div id="typed-strings">
  <p>Typed.js is a <strong>JavaScript</strong> library.</p>
  <p>It <em>types</em> out sentences.</p>
  <p>Used by <strong>Slack</strong>, GitHub &amp; more.</p>
</div>
<span id="typed"></span>

<script type="module">
  import Typed from 'typed.js';

  // stringsElement reads children of the referenced container
  const typed = new Typed('#typed', {
    stringsElement: '#typed-strings',
    typeSpeed: 45,
    backSpeed: 25,
    loop: true,
  });
</script>
```
```

--------------------------------

### Load Typed.js via CDN

Source: https://github.com/mattboldt/typed.js/blob/main/README.md

Include the Typed.js library directly in your HTML file using a CDN link.

```html
<script src="https://unpkg.com/typed.js@3.0.0/dist/typed.umd.js"></script>
```

--------------------------------

### Option: Typing & Backspacing Speed Controls

Source: https://context7.com/mattboldt/typed.js/llms.txt

Control the pacing of the animation using `typeSpeed`, `startDelay`, `backSpeed`, `backDelay`, and `smartBackspace`. `smartBackspace` optimizes erasing by avoiding re-typing shared prefixes between consecutive strings.

```APIDOC
## Option: Typing & Backspacing Speed Controls

### Description
`typeSpeed`, `startDelay`, `backSpeed`, `backDelay`, and `smartBackspace` together control the pacing of the animation. `smartBackspace` avoids re-typing shared prefixes between consecutive strings.

### Parameters
#### Request Body
- **typeSpeed** (number) - Optional - Milliseconds per character when typing. Defaults to 0.
- **startDelay** (number) - Optional - Milliseconds to wait before the first character is typed. Defaults to 0.
- **backSpeed** (number) - Optional - Milliseconds per character when backspacing. Defaults to 0.
- **backDelay** (number) - Optional - Milliseconds to wait after finishing a string before backspacing. Defaults to 500.
- **smartBackspace** (boolean) - Optional - If true, only erases the part of the string that differs from the next string. Defaults to true.

### Request Example
```javascript
import Typed from 'typed.js';

const typed = new Typed('#element', {
  strings: ['This is a JavaScript library', 'This is an ES6 module', 'This is awesome!'],
  typeSpeed: 40,      // typing: 40 ms per character
  startDelay: 500,    // wait 500 ms before the first character
  backSpeed: 20,      // backspacing: 20 ms per character
  backDelay: 800,     // wait 800 ms after finishing a string before backspacing
  smartBackspace: true, // only erase the part that differs from the next string
  // "This is a " is shared by the first two strings — only "JavaScript library"
  // is erased before typing "an ES6 module"
});
```
```