### Install and Initialize SplitType

Source: https://github.com/lukepeavey/splittype/blob/master/__stories__/docs/02-getting-started.stories.mdx

Methods to install the library via npm or CDN and initialize the SplitType class for text manipulation.

```SHELL
npm install 'split-type'
```

```js
import SplitType from 'split-type'
```

```html
<script src="https://unpkg.com/split-type"></script>
```

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

### Run Storybook Development Server

Source: https://github.com/lukepeavey/splittype/blob/master/CONTRIBUTING.md

Starts the Storybook development server locally. This command enables hot-reloading for visual testing and development.

```bash
yarn run storybook
```

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

### Install SplitType using NPM or Yarn

Source: https://github.com/lukepeavey/splittype/blob/master/README.md

Installs the SplitType library as a project dependency using either npm or yarn package managers.

```shell
yarn add 'split-type'
```

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

### GSAP Animation Integration with SplitType

Source: https://context7.com/lukepeavey/splittype/llms.txt

Illustrates how to integrate SplitType with GSAP for creating advanced text animations. Examples include basic character staggering, line-by-line reveals, complex timeline animations, and reverting text after animations complete.

```javascript
import SplitType from 'split-type'
import gsap from 'gsap'

// Basic stagger animation on characters
const text = new SplitType('#hero-title', { types: 'words, chars' })

gsap.from(text.chars, {
  opacity: 0,
  y: 20,
  duration: 0.5,
  stagger: { amount: 0.5 },
  ease: 'power2.out'
})

// Line-by-line reveal animation
const paragraph = new SplitType('.content', { types: 'lines' })

gsap.from(paragraph.lines, {
  opacity: 0,
  y: 50,
  duration: 0.8,
  stagger: 0.15,
  ease: 'power3.out'
})

// Timeline with multiple effects
const title = new SplitType('.title', { types: 'words, chars' })
const tl = gsap.timeline()

tl.from(title.words, {
  opacity: 0,
  y: 100,
  duration: 0.6,
  stagger: 0.1
})
.from(title.chars, {
  color: '#999',
  duration: 0.3,
  stagger: 0.02
}, '-=0.4')

// Revert after animation completes
tl.eventCallback('onComplete', () => {
  title.revert()
})
```

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

### Import SplitType in JavaScript

Source: https://github.com/lukepeavey/splittype/blob/master/README.md

Imports the SplitType class into your JavaScript project after installation via npm or yarn.

```javascript
import SplitType from 'split-type'
```

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

### Apply CSS Classes and Animate Characters with SplitType

Source: https://context7.com/lukepeavey/splittype/llms.txt

Shows how to apply custom CSS classes to SplitType elements, such as setting initial 'hidden' states for characters. It includes a JavaScript example for revealing characters sequentially using `setTimeout`.

```javascript
// Apply CSS classes for custom styling
const text = new SplitType('#target',
  {
  charClass: 'char hidden'  // Chars start hidden
})

// Reveal characters one by one
text.chars.forEach((char, i) => {
  setTimeout(() => {
    char.classList.remove('hidden')
    char.classList.add('revealed')
  }, i * 50)
})
```

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

### Static Data Management and Access in SplitType

Source: https://context7.com/lukepeavey/splittype/llms.txt

Details how SplitType manages split text data internally and provides static methods for accessing and clearing this data. Examples show how to view the data cache, clear it, and retrieve specific element data, including original HTML and split status.

```javascript
// Access the internal data cache (for debugging)
console.log(SplitType.data)

// Clear all cached data manually
SplitType.clearData()

// Check if element has been split
const element = document.querySelector('#target')
const text = new SplitType(element)

// Data includes original HTML, split state, dimensions
const elementData = SplitType.data.get(element)
console.log(elementData.html)      // Original HTML content
console.log(elementData.isSplit)   // true
console.log(elementData.cssWidth)  // Original CSS width
```

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

### Initialize SplitType Instance

Source: https://github.com/lukepeavey/splittype/blob/master/__stories__/docs/03-api-reference.stories.mdx

Demonstrates how to instantiate a new SplitType object by providing a target element and optional configuration settings.

```javascript
const instance = new SplitType(target, {
  absolute: false,
  tagName: 'div',
  types: 'lines, words, chars'
});
```

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

### Configure Static SplitType Defaults

Source: https://github.com/lukepeavey/splittype/blob/master/__stories__/docs/03-api-reference.stories.mdx

Explains how to update global default settings for all future SplitType instances and how to create instances using the static factory method.

```javascript
SplitType.setDefaults({ tagName: 'span' });
const instance = SplitType.create('.target-element');
```

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

### Create SplitType Instances

Source: https://github.com/lukepeavey/splittype/blob/master/__stories__/docs/02-getting-started.stories.mdx

Demonstrates how to create a new SplitType instance using the constructor or the static create method.

```js
const text = new SplitType('#target');
const text = SplitType.create('.target');
```

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

### Create SplitType Instance - JavaScript

Source: https://context7.com/lukepeavey/splittype/llms.txt

Demonstrates how to create a new SplitType instance to split text content. It shows initialization using the 'new' keyword or the static 'create' method, accessing split elements (lines, words, chars), checking the split status, and splitting multiple elements.

```javascript
const text = new SplitType('#target')

const text = SplitType.create('#target')

console.log(text.lines)
console.log(text.words)
console.log(text.chars)

console.log(text.isSplit)

const multiText = new SplitType('.paragraph')

const element = document.querySelector('.hero-text')
const heroText = new SplitType(element)
```

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

### Static Methods

Source: https://github.com/lukepeavey/splittype/blob/master/__stories__/docs/03-api-reference.stories.mdx

Global utility methods for managing SplitType defaults and instance creation.

```APIDOC
## Static Methods

### SplitType.create(target, options)
Factory method to create a new instance without the `new` keyword.

### SplitType.setDefaults(options)
Updates the global default configuration for all future instances.

### SplitType.revert(target)
Static utility to revert split text on a target element without needing an instance reference.
```

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

### Instance Method - instance.split(options)

Source: https://context7.com/lukepeavey/splittype/llms.txt

Manually re-splits text, useful for responsive layouts or when content changes.

```APIDOC
## Instance Method: instance.split(options)

### Description
Re-splits the text content. If new options are provided, they will override the initial configuration.

### Parameters
#### Request Body
- **options** (object) - Optional - New configuration options for the re-split.

### Request Example
const text = new SplitType('#target');
text.split({ types: 'lines' });

### Response
- **void** - Updates the instance properties (lines, words, chars) in place.
```

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

### Static Methods

Source: https://github.com/lukepeavey/splittype/blob/master/README.md

Global configuration and utility methods for the SplitType library.

```APIDOC
## SplitType.setDefaults(options)

### Description
Updates the default configuration settings for all future SplitType instances.

### Parameters
#### Request Body
- **options** (Object) - Required - Configuration object to merge with existing defaults.

### Response
- **SplitTypeOptions** - The updated default settings object.

## SplitType.create(target, options)

### Description
Factory method to instantiate a new SplitType object without the 'new' keyword.

### Parameters
#### Request Body
- **target** (String|HTMLElement) - Required - The element to split.
- **options** (Object) - Optional - Configuration settings.

### Response
- **SplitType** - A new instance of SplitType.
```

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

### Manage SplitType Instance Methods

Source: https://github.com/lukepeavey/splittype/blob/master/__stories__/docs/03-api-reference.stories.mdx

Shows how to manually trigger a re-split of text or revert the target elements to their original state using instance methods.

```javascript
instance.split({ types: 'words' });
instance.revert();
```

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

### Constructor and Initialization

Source: https://github.com/lukepeavey/splittype/blob/master/__stories__/docs/03-api-reference.stories.mdx

Initialize a new SplitType instance to split text content within specified target elements.

```APIDOC
## Constructor: new SplitType(target, [options])

### Description
Creates a new instance of SplitType, which splits the text content of the target element(s) into lines, words, and characters based on the provided options.

### Parameters
#### Path Parameters
- **target** (string | Element | NodeList | Element[]) - Required - The element(s) to be split.

#### Request Body
- **options** (SplitTypeOptions) - Optional - Configuration object for splitting behavior.
  - **absolute** (boolean) - Default: false - Use absolute positioning for split nodes.
  - **tagName** (string) - Default: "div" - HTML tag for split nodes.
  - **lineClass** (string) - Default: "line" - Class name for line elements.
  - **wordClass** (string) - Default: "word" - Class name for word elements.
  - **charClass** (string) - Default: "char" - Class name for character elements.
  - **types** (string) - Default: "lines, words, chars" - Types of elements to generate.

### Request Example
const instance = new SplitType('#my-element', { types: 'words, chars' });
```

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

### Set Global SplitType Defaults - JavaScript

Source: https://context7.com/lukepeavey/splittype/llms.txt

Shows how to set global default configurations for all SplitType instances using the 'setDefaults' method or by directly assigning to the 'defaults' property. This allows for consistent styling and behavior across multiple SplitType initializations.

```javascript
SplitType.setDefaults({
  types: 'words, chars',
  wordClass: 'w',
  charClass: 'c',
  absolute: true
})

console.log(SplitType.defaults)

SplitType.defaults = {
  lineClass: 'custom-line',
  tagName: 'span'
}

const text = new SplitType('#target')
```

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

### Static Method - SplitType.setDefaults(options)

Source: https://context7.com/lukepeavey/splittype/llms.txt

Configures global default settings that apply to all future SplitType instances.

```APIDOC
## Static Method: SplitType.setDefaults(options)

### Description
Updates the global configuration defaults for all subsequent SplitType instances.

### Parameters
#### Request Body
- **options** (object) - Required - The default configuration object to merge.

### Request Example
SplitType.setDefaults({ types: 'words, chars', absolute: true });

### Response
- **defaults** (object) - Returns the updated global defaults object.
```

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

### Configure SplitType Options - JavaScript

Source: https://context7.com/lukepeavey/splittype/llms.txt

Illustrates various configuration options for SplitType, including specifying which text units to split ('types'), enabling absolute positioning ('absolute'), customizing HTML tag names ('tagName'), and defining class names for lines ('lineClass'), words ('wordClass'), characters ('charClass'), and all split items ('splitClass').

```javascript
const text = new SplitType('#target', {
  types: 'lines, words, chars',
  absolute: false,
  tagName: 'div',
  lineClass: 'line',
  wordClass: 'word',
  charClass: 'char',
  splitClass: 'split-item'
})

const wordsAndChars = new SplitType('#target', {
  types: 'words, chars'
})

const linesOnly = new SplitType('#target', {
  types: 'lines'
})

const absoluteText = new SplitType('#target', {
  absolute: true,
  types: 'lines, words, chars'
})

const customClasses = new SplitType('#target', {
  lineClass: 'text-line',
  wordClass: 'text-word',
  charClass: 'text-char',
  splitClass: 'animated-text'
})

const spanText = new SplitType('#target', {
  tagName: 'span'
})
```

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

### Split Text and Animate with GSAP

Source: https://github.com/lukepeavey/splittype/blob/master/README.md

Demonstrates how to initialize SplitType to split text into words and characters, and then use GSAP to animate these elements with a stagger effect. This is useful for creating dynamic text reveals or animations.

```javascript
const text = new SplitType('#target', { types: 'words, chars' })

gsap.from(text.chars, {
  opacity: 0,
  y: 20,
  duration: 0.5,
  stagger: { amount: 0.1 },
})
```

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

### Handle Responsive Text Resizing with ResizeObserver

Source: https://github.com/lukepeavey/splittype/blob/master/__stories__/docs/02-getting-started.stories.mdx

This snippet demonstrates how to re-split text using ResizeObserver when the container width changes. It is essential for maintaining layout integrity when using absolute positioning or line-based splitting.

```javascript
const containerElement = document.querySelector('#target');
const instance = new SplitType('#target');
let previousContainerWidth = null;

function handleResize(entry) {
  let width;
  const [{ contentRect }] = entry;
  width = Math.floor(contentRect.width);
  if (previousContainerWidth && previousContainerWidth !== width) {
    instance.split();
  }
  previousContainerWidth = width;
}

const resizeObserver = new ResizeObserver(debounce(handleResize, 500));
resizeObserver.observe(containerElement);
```

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

### Instance Methods

Source: https://github.com/lukepeavey/splittype/blob/master/__stories__/docs/03-api-reference.stories.mdx

Methods available on a SplitType instance to manage the lifecycle of the split text.

```APIDOC
## Instance Methods

### split(options)
Re-splits the text content using the provided options.

### revert()
Restores the target elements to their original state and clears cached data.

### Properties
- **instance.lines** (HTMLElement[]) - Array of split line elements.
- **instance.words** (HTMLElement[]) - Array of split word elements.
- **instance.chars** (HTMLElement[]) - Array of split character elements.
```

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

### Instance Methods

Source: https://github.com/lukepeavey/splittype/blob/master/README.md

Methods available on a SplitType instance to manage the lifecycle of split text elements.

```APIDOC
## instance.split(options)

### Description
Re-splits the target elements. Useful for updating layout after window resizing.

### Parameters
#### Request Body
- **options** (SplitTypeOptions) - Optional - Configuration object for splitting.

### Response
- **void** - Returns nothing.

## instance.revert()

### Description
Restores target elements to their original HTML content and clears internal data.

### Response
- **void** - Returns nothing.
```

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

### Re-split Text with SplitType - JavaScript

Source: https://context7.com/lukepeavey/splittype/llms.txt

Explains how to re-split text content using the 'split' method, which is useful for responsive layouts. It covers re-splitting with the same or new options and demonstrates integration with ResizeObserver to handle container resizing and text reflow.

```javascript
const text = new SplitType('#target', { types: 'lines, words, chars' })

text.split()

text.split({ types: 'words, chars' })

const container = document.querySelector('.container')
const resizeObserver = new ResizeObserver(
  debounce(([entry]) => {
    const { width } = entry.contentRect
    text.split()
  }, 100)
)
resizeObserver.observe(container)

console.log(text.lines)
console.log(text.words)
console.log(text.chars)
```

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

### Responsive Text Handling with SplitType

Source: https://github.com/lukepeavey/splittype/blob/master/README.md

Shows how to handle responsive text when using absolute positioning or line splitting with SplitType. It involves re-splitting the text after a container resize using ResizeObserver and debouncing the split method to improve performance.

```javascript
const text = new SplitType('#target')

// Reposition text after the container is resized (simplified version)
// This example uses lodash#debounce to ensure the split method only
// gets called once after the resize is complete.
const resizeObserver = new ResizeObserver(
  debounce(([entry]) => {
    // Note: you should add additional logic so the `split` method is only
    // called when the **width** of the container element has changed.
    text.split()
  }, 500)
)
resizeObserver.observe(containerElement)
```

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

### Constructor - new SplitType(target, options)

Source: https://context7.com/lukepeavey/splittype/llms.txt

Creates a new SplitType instance to split text content of target elements into lines, words, or characters.

```APIDOC
## Constructor: new SplitType(target, options)

### Description
Initializes a new SplitType instance. The target can be a CSS selector, a DOM element, a NodeList, or an array of elements.

### Parameters
#### Path Parameters
- **target** (string|HTMLElement|NodeList) - Required - The element(s) to split.

#### Request Body
- **options** (object) - Optional - Configuration object for splitting behavior.
  - **types** (string) - Optional - Comma-separated list: 'lines', 'words', 'chars'.
  - **absolute** (boolean) - Optional - Whether to use absolute positioning.
  - **tagName** (string) - Optional - HTML tag for split elements (default: 'div').
  - **lineClass** (string) - Optional - CSS class for line elements.
  - **wordClass** (string) - Optional - CSS class for word elements.
  - **charClass** (string) - Optional - CSS class for character elements.

### Request Example
const text = new SplitType('#target', { types: 'words, chars', absolute: true });

### Response
- **lines** (Array) - Array of line elements.
- **words** (Array) - Array of word elements.
- **chars** (Array) - Array of character elements.
- **isSplit** (boolean) - Status of the split operation.
```

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

### Run Puppeteer Tests on Static Build

Source: https://github.com/lukepeavey/splittype/blob/master/CONTRIBUTING.md

Generates a static build of the Storybook site and runs Puppeteer tests in a headless browser environment, typically used for CI/CD pipelines.

```bash
yarn run puppeteer:static
```

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

### Run Puppeteer Visual Tests

Source: https://github.com/lukepeavey/splittype/blob/master/CONTRIBUTING.md

Executes Puppeteer visual regression tests against a running local Storybook server. Use the watch variant for continuous development feedback.

```bash
yarn run puppeteer
yarn run puppeteer:watch
```

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

### Configure Split Types

Source: https://github.com/lukepeavey/splittype/blob/master/__stories__/docs/02-getting-started.stories.mdx

Configures how text is broken down into lines, words, or characters using the types option.

```js
const text = new SplitType('#target', { types: 'words, chars' });
```

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

### SplitType(target, [options])

Source: https://github.com/lukepeavey/splittype/blob/master/README.md

Initializes a new SplitType instance to split text within the specified target element(s) based on provided configuration options.

```APIDOC
## SplitType(target, [options])

### Description
Initializes the SplitType library on a target element. This process wraps text content in HTML elements (lines, words, or characters) to allow for granular styling and animation.

### Parameters
#### Path Parameters
- **target** (string|Element|NodeList) - Required - The selector string, single element, or collection of elements to split.

#### Request Body (Options)
- **absolute** (boolean) - Optional - If true, uses absolute positioning for split nodes. Default: false.
- **tagName** (string) - Optional - The HTML tag used for split nodes. Default: "div".
- **lineClass** (string) - Optional - Class name for line elements. Default: "line".
- **wordClass** (string) - Optional - Class name for word elements. Default: "word".
- **charClass** (string) - Optional - Class name for character elements. Default: "char".
- **splitClass** (string) - Optional - Class name applied to all split elements. Default: null.
- **types** (string) - Optional - Comma separated list of types to split (e.g., "lines, words, chars"). Default: "lines, words, chars".

### Request Example
```js
const text = new SplitType('#target', {
  absolute: true,
  types: 'words, chars'
});
```

### Response
#### Success Response (Instance)
- **instance** (Object) - Returns a SplitType instance with methods like .split() to re-run the splitting process.
```

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

### Access Split Text Elements in JavaScript

Source: https://github.com/lukepeavey/splittype/blob/master/README.md

Demonstrates how to access the arrays of split line, word, and character elements from a SplitType instance. It also shows how to query these elements using standard DOM selectors.

```javascript
const text = new SplitType('#target')

// An array of the all line elements
console.log(text.lines)
// An array of all word elements
console.log(text.words)
// An array of all character elements
console.log(text.chars)

// Using querySelectorAll
const words = document.querySelectorAll('#target .word')
```

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

### CSS Styling for Split Text Elements

Source: https://context7.com/lukepeavey/splittype/llms.txt

Provides essential CSS rules for styling SplitType elements, including recommendations for `font-kerning` to prevent shifts, and styles for lines, words, and characters to enable custom animations and layouts.

```css
/* Recommended: Prevent character shifting on split/revert */
.target {
  font-kerning: none;
}

/* Required for flex containers - define width */
.flex-container .target {
  width: 100%;
}

/* Style individual lines */
.line {
  overflow: hidden;
}

/* Style words */
.word {
  display: inline-block;
  position: relative;
}

/* Style characters for animation */
.char {
  display: inline-block;
  transform-origin: center bottom;
}

/* Custom animation classes */
.char.revealed {
  opacity: 1;
  transform: translateY(0);
}

.char.hidden {
  opacity: 0;
  transform: translateY(100%);
}
```

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

### Revert Split Text with SplitType

Source: https://context7.com/lukepeavey/splittype/llms.txt

Demonstrates how to revert SplitType instances to their original HTML content. This is useful for cleanup after animations or when components are unmounted. It covers instance-based and static method calls for single or multiple elements.

```javascript
const text = new SplitType('#target')

// Animate the text...
// ...animation complete

// Revert using instance method
text.revert()

// After reverting
console.log(text.isSplit)  // false
console.log(text.lines)    // null
console.log(text.words)    // null
console.log(text.chars)    // null

// Static revert method - revert without instance reference
SplitType.revert('#target')

// Revert multiple elements
SplitType.revert('.animated-text')

// Revert using DOM elements
const elements = document.querySelectorAll('.split-text')
SplitType.revert(elements)
```

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

### Include SplitType via CDN

Source: https://github.com/lukepeavey/splittype/blob/master/README.md

Includes the SplitType library in your HTML file by linking to its UMD bundle from a CDN.

```html
<!-- Minified UMD bundle -->
<script src="https://unpkg.com/split-type"></script>
```

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

### Animate Split Text with GSAP

Source: https://github.com/lukepeavey/splittype/blob/master/__stories__/docs/02-getting-started.stories.mdx

This snippet shows how to split text into words and characters and apply a stagger animation using the GSAP library.

```javascript
const text = new SplitType('#target', { types: 'words, chars' });

gsap.from(text.chars, {
  opacity: 0,
  y: 20,
  duration: 0.5,
  stagger: { amount: 0.1 }
});
```

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

### Initialize SplitType for Text Splitting

Source: https://github.com/lukepeavey/splittype/blob/master/README.md

Initializes SplitType to split text content within a target element. It can be instantiated using `new` or the static `create` method. The instance provides access to split lines, words, and characters.

```javascript
const text = new SplitType('#target')
// or
const text = SplitType.create('#target')

// Accessing split elements:
// text.lines
// text.words
// text.chars
```

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

### Revert SplitText using Instance Method

Source: https://github.com/lukepeavey/splittype/blob/master/README.md

Reverts the target element(s) to their original HTML content using the `revert()` method on a SplitType instance. This also cleans up internal data associated with the split text.

```javascript
instance.revert()
```

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

### Handle Nested Elements

Source: https://github.com/lukepeavey/splittype/blob/master/__stories__/docs/02-getting-started.stories.mdx

Shows how SplitType preserves nested HTML elements like <em> tags during the splitting process.

```html
<p id="target">Foo <em>Bar</em></p>
```

```js
SplitType.create('#target');
```

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

### Configure SplitType Text Splitting Types

Source: https://github.com/lukepeavey/splittype/blob/master/README.md

Configures SplitType to split text into specific units (lines, words, characters) using the 'types' option. By default, it splits into all three. Including 'words' or 'lines' is necessary to maintain natural line breaks.

```javascript
// Splits text into lines, words, characters (default)
const text = new SplitType('#target')
// Splits text into words and characters
const text = new SplitType('#target', { types: 'words, chars' })
// Splits text into lines
const text = new SplitType('#target', { types: 'words' })
```

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

### Handle Nested HTML Elements with SplitType

Source: https://context7.com/lukepeavey/splittype/llms.txt

Explains how SplitType preserves nested HTML elements like links and strong tags during text splitting. It shows how to access words and characters within these nested structures for targeted styling or animation.

```javascript
// HTML: <p id="target">Visit our <a href="/about">about page</a> for <strong>more info</strong></p>

const text = new SplitType('#target', { types: 'words, chars' })

// Result structure (simplified):
// <p id="target">
//   <div class="word"><div class="char">V</div>...</div>
//   <div class="word"><div class="char">o</div>...</div>
//   <a href="/about" style="display: inline-block; position: relative;">
//     <div class="word"><div class="char">a</div>...</div>
//     <div class="word"><div class="char">p</div>...</div>
//   </a>
//   ...
//   <strong style="display: inline-block; position: relative;">
//     <div class="word"><div class="char">m</div>...</div>
//     <div class="word"><div class="char">i</div>...</div>
//   </strong>
// </p>

// Access words inside nested elements
const linkWords = document.querySelectorAll('#target a .word')
const strongChars = document.querySelectorAll('#target strong .char')
```

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

### Access Split Text Nodes

Source: https://github.com/lukepeavey/splittype/blob/master/__stories__/docs/02-getting-started.stories.mdx

Retrieves the generated DOM elements for lines, words, and characters from the SplitType instance.

```js
const text = new SplitType('#target');
console.log(text.lines);
console.log(text.words);
console.log(text.chars);
```

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

### Revert SplitText using Static Method

Source: https://github.com/lukepeavey/splittype/blob/master/README.md

Reverts split text within specified target elements using the static `SplitType.revert()` method. This is useful for reverting text without direct access to the instance.

```javascript
SplitType.revert('#target')
```

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

### Apply CSS for SplitType Text Stability

Source: https://github.com/lukepeavey/splittype/blob/master/README.md

Applies essential CSS styles to target elements to prevent text shifting when SplitType splits or reverts text. 'font-kerning: none;' ensures character alignment, and a defined 'width' is necessary for elements within flex containers.

```css
.target {
  font-kerning: none;
}
```

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

### SplitType.data

Source: https://context7.com/lukepeavey/splittype/llms.txt

Access and manage the internal data store used by SplitType for tracking split elements.

```APIDOC
## Static Data Management

### Description
SplitType maintains an internal data store for managing split state. Static methods provide access to this data for debugging and manual cleanup.

### Methods
- **SplitType.data**: Returns the internal Map of split elements.
- **SplitType.clearData()**: Clears all cached data manually.

### Response Example
```javascript
// Accessing data for an element
const elementData = SplitType.data.get(element);
console.log(elementData.html);    // Original HTML content
console.log(elementData.isSplit); // true
```
```

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

### SplitType.revert()

Source: https://context7.com/lukepeavey/splittype/llms.txt

Restores target elements to their original HTML content and clears all associated data.

```APIDOC
## Revert Split Text

### Description
The revert method restores target elements to their original HTML content and clears all associated data. It should be called when split text is no longer needed.

### Method
Instance Method / Static Method

### Parameters
#### Path Parameters
- **target** (String|HTMLElement|NodeList) - Required - The element(s) to revert.

### Request Example
```javascript
// Instance method
const text = new SplitType('#target');
text.revert();

// Static method
SplitType.revert('#target');
```
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.