LottieFiles

https://docs.lottiefiles.com/en
Admin
LottieFiles provides tools, runtimes, and open specifications for designing, packaging, and...
Tokens:678,750
Snippets:6,465
Trust Score:10
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### stateMachineFrameworkSetup()

Source: https://docs.lottiefiles.com/en/runtimes/distributions/ios/v0.x/api-reference

Gets framework setup event names.

```APIDOC
## stateMachineFrameworkSetup()

### Description
Get framework setup event names.

### Method
stateMachineFrameworkSetup()

### Parameters
None

### Return Type
[String]
```

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

### Install multiple components

Source: https://docs.lottiefiles.com/en/creator-plugins/ui-library/installation/registry

Installs multiple components at once.

```bash
npx shadcn@latest add @lottiefiles/button @lottiefiles/input @lottiefiles/card
```

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

### Installation

Source: https://docs.lottiefiles.com/en/creator-plugins/ui-library/components/select

Install the Select component via the shadcn CLI from the @lottiefiles registry.

```APIDOC
## Installation

```bash
npx shadcn@latest add @lottiefiles/select
```
```

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

### Install relottie and dependencies

Source: https://docs.lottiefiles.com/en/tools/relottie/getting-started/quick-start

Install the core relottie processor, the @lottiefiles/last package, and unist-util-visit. Also install unified and vfile as dev dependencies.

```bash
npm install @lottiefiles/relottie @lottiefiles/last unist-util-visit
# and
npm install unified vfile -D
```

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

### Installation

Source: https://docs.lottiefiles.com/en/tools/relottie/api/relottie-parse

Installation instructions for the @lottiefiles/relottie-parse package.

```APIDOC
## [PACKAGE] @lottiefiles/relottie-parse

### Description
Install the `@lottiefiles/relottie-parse` package to use the Relottie parser plugin in a custom unified pipeline.

### Installation
```bash
npm install @lottiefiles/relottie-parse
# or
yarn add @lottiefiles/relottie-parse
```

### Dependencies
- `unified` (required when using this package directly)
```

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

### Using State Machines with Web Player (dotlottie-web)

Source: https://docs.lottiefiles.com/en/format/dotlottie/interactivity

Web player example using @lottiefiles/dotlottie-web. Loads a .lottie file, loads and starts a state machine, listens for state:entered and transition events, posts events (including numeric events), stops the state machine, and retrieves the current state.

```typescript
import { DotLottie as DotLottiePlayer } from "@lottiefiles/dotlottie-web";

const player = new DotLottiePlayer({
  canvas: document.getElementById("canvas"),
  src: "/animations/button.lottie",
});

// Wait for load
player.addEventListener("load", () => {
  // Load and start state machine
  player.loadStateMachine("button_interaction");
  player.startStateMachine();

  // Listen for state changes
  player.addEventListener("state:entered", (e) => {
    console.log("Entered state:", e.detail.state);
  });

  player.addEventListener("transition", (e) => {
    console.log("Transition:", e.detail.fromState, "->", e.detail.toState);
  });
});

// Post events from application code
document.getElementById("button").addEventListener("click", () => {
  player.postStateMachineEvent("OnClick");
});

// Post numeric events
player.postStateMachineEvent({
  type: "Increment",
  value: 1,
});

// Stop state machine
player.stopStateMachine();

// Get current state
const currentState = player.getStateMachineState();
console.log("Current state:", currentState);
```

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

### Install Creator plugin skills with npx skills add

Source: https://docs.lottiefiles.com/en/creator-plugins/01_getting-started/ai-agent-skills

Install all official Creator plugin skills from the root of your plugin project, or install a single skill by name. The first command installs every skill; the second installs only the creator-plugin-development skill.

```bash
npx skills add LottieFiles/creator-plugin-skills --skill '*'
```

```bash
npx skills add LottieFiles/creator-plugin-skills --skill creator-plugin-development
```

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

### Install via CLI

Source: https://docs.lottiefiles.com/en/creator-plugins/ui-library/components/button

Install the Button component using the shadcn CLI.

```APIDOC
## Install via CLI

### Description
Install the Button component using the shadcn CLI.

### Code
```bash
npx shadcn@latest add @lottiefiles/button
```
```

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

### Set up the project folder

Source: https://docs.lottiefiles.com/en/tools/dotlottie-js/tutorials/first-lottie-file

Creates a new project folder and initializes a package.json with npm init -y.

```bash
mkdir my-first-dotlottie
cd my-first-dotlottie
npm init -y
```

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

### Example: get all storage keys

Source: https://docs.lottiefiles.com/en/creator-api/types/client-storage/keys

Example usage of the keys() method, awaiting the promise to get an array of all storage keys.

```typescript
const keys = await creator.clientStorage.keys();
```

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

### Complete Example

Source: https://docs.lottiefiles.com/en/tools/dotlottie-io/api/dotlottie-class

Complete example demonstrating building, saving, and loading a DotLottie package.

```APIDOC
## Complete Example

```javascript
const { readFileSync, writeFileSync } = require("node:fs");
const { DotLottie, DotLottieBuilder } = require("@lottiefiles/dotlottie-io");

// Build a package from scratch
const builder = new DotLottieBuilder();
builder.generator("my-tool");
builder.addAnimation("hero", JSON.stringify(myLottieJson));
builder.addTheme("dark", "Dark Theme", JSON.stringify({ rules: [] }));
const dl = builder.build();

// Add assets
const storedName = dl.addImage("logo.png", readFileSync("logo.png"));
dl.addAudio("click.mp3", readFileSync("click.mp3"));

// Save to disk
writeFileSync("output.lottie", dl.toBytes());

// Load back and inspect
const loaded = DotLottie.fromFile("output.lottie");
console.log(loaded.animationIds()); // ['hero']
console.log(loaded.imageFilenames()); // ['logo.png']

const imgData = loaded.getImage("logo.png"); // Buffer
```
```

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

### Install dotlottie_flutter via pub.dev

Source: https://docs.lottiefiles.com/en/runtimes/distributions/flutter/v0.x

Add the dotlottie_flutter package to your pubspec.yaml and run flutter pub get to install it.

```yaml
dependencies:
  dotlottie_flutter: ^0.1.7
```

```bash
flutter pub get
```

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

### Complete example: Build, save, and load a .lottie file

Source: https://docs.lottiefiles.com/en/tools/dotlottie-io/api/dotlottie-class

Shows the full workflow of creating a DotLottie package with DotLottieBuilder, adding assets, saving to disk, and loading it back with DotLottie.fromFile. Demonstrates the animationIds(), imageFilenames(), and getImage() methods.

```javascript
const { readFileSync, writeFileSync } = require("node:fs");
const { DotLottie, DotLottieBuilder } = require("@lottiefiles/dotlottie-io");

// Build a package from scratch
const builder = new DotLottieBuilder();
builder.generator("my-tool");
builder.addAnimation("hero", JSON.stringify(myLottieJson));
builder.addTheme("dark", "Dark Theme", JSON.stringify({ rules: [] }));
const dl = builder.build();

// Add assets
const storedName = dl.addImage("logo.png", readFileSync("logo.png"));
dl.addAudio("click.mp3", readFileSync("click.mp3"));

// Save to disk
writeFileSync("output.lottie", dl.toBytes());

// Load back and inspect
const loaded = DotLottie.fromFile("output.lottie");
console.log(loaded.animationIds()); // ['hero']
console.log(loaded.imageFilenames()); // ['logo.png']

const imgData = loaded.getImage("logo.png"); // Buffer
```

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

### Example: Get keyframe at frame 30

Source: https://docs.lottiefiles.com/en/creator-api/nodes/animatable/get-keyframe-at

Example usage of getKeyframeAt to retrieve a keyframe at frame 30 and log its value if it exists.

```typescript
// Get keyframe at frame 30
const keyframe = layer.position.getKeyframeAt(30);
if (keyframe) {
  console.log("Keyframe value:", keyframe.value);
}
```

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

### stateMachineStart(openUrl: OpenUrlPolicy, onOpenUrl: ((url: String) -> Unit)?)

Source: https://docs.lottiefiles.com/en/runtimes/distributions/android/v0.x/state-machines

Starts the currently loaded state machine with URL policy configuration. Returns true on success.

```APIDOC
## stateMachineStart(openUrl: OpenUrlPolicy, onOpenUrl: ((url: String) -> Unit)?)

### Description
Starts the currently loaded state machine with URL policy configuration. Returns `true` on success.

### Method
`stateMachineStart`

### Parameters
- **openUrl** (OpenUrlPolicy) - Required - The URL policy configuration.
- **onOpenUrl** ((url: String) -> Unit)? - Optional - Callback invoked when a URL is opened.

### Return Type
`Boolean`
```

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

### Create index.html with basic HTML structure

Source: https://docs.lottiefiles.com/en/runtimes/distributions/web-component/v0.x

Initial HTML page with a heading. This is the starting point for the tutorial.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My first dotLottie animation</title>
  </head>
  <body>
    <h1>My first dotLottie animation</h1>
  </body>
</html>
```

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

### Example: using creator.clientStorage.usedQuota()

Source: https://docs.lottiefiles.com/en/creator-api/types/client-storage/used-quota

Shows how to call usedQuota() and await the result to get the number of bytes used.

```typescript
const usedBytes = await creator.clientStorage.usedQuota();
```

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

### stateMachineStart(openUrlPolicy:)

Source: https://docs.lottiefiles.com/en/runtimes/distributions/ios/v0.x/state-machines

Starts the loaded state machine. Returns `true` on success, `false` if no state machine is loaded.

```APIDOC
## stateMachineStart(openUrlPolicy:)

### Description
Starts the loaded state machine. Returns `true` on success, `false` if no state machine is loaded.

### Method
`stateMachineStart(openUrlPolicy:)`

### Parameters
- **openUrlPolicy** (OpenUrlPolicy) - Optional - The policy for opening URLs triggered by the state machine.

### Return Value
- **Bool** - `true` if the state machine started successfully, `false` otherwise.

### Example
```swift
let success = dotLottieViewModel.stateMachineStart()
```
```

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

### Get a specific animation with dotlottie.getAnimation

Source: https://docs.lottiefiles.com/en/tools/dotlottie-js/how-to-guides/manage-animations

Use the async `getAnimation(animationId)` method to retrieve an animation by its `id`. Returns the animation object or `undefined`. The example shows accessing properties and getting raw Lottie JSON via `toJSON()`.

```javascript
async function getAnimation() {
  const specificAnimation = await dotlottie.getAnimation("animation_1");
  if (specificAnimation) {
    console.log(`Found animation: ${specificAnimation.id}`);
    // Access its properties like id, name, loop, speed, etc.
    console.log(`Loop setting: ${specificAnimation.loop}`);

    // To get the raw Lottie JSON data associated with it:
    const lottieJson = await specificAnimation.toJSON();
    console.log("Animation data:", lottieJson);
  } else {
    console.log("Animation not found.");
  }
}
```

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

### Access selected nodes

Source: https://docs.lottiefiles.com/en/creator-api/types/selection-api/nodes

Example of accessing the `nodes` property from the `creator.selection` object to get the currently selected layers and shapes.

```typescript
const selectedNodes = creator.selection.nodes;
```

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

### Example: open and fromBytes usage

Source: https://docs.lottiefiles.com/en/tools/dotlottie-io/api/dotlottie-reader-class

Shows how to open a .lottie file from a path (file handle stays open, only manifest read) and from a buffer. Demonstrates reading animation JSON and a font, with null checks.

```javascript
const { readFileSync } = require("node:fs");
const { DotLottieReader } = require("@lottiefiles/dotlottie-io");

// From a file path — file handle stays open, nothing else is read yet
const reader = DotLottieReader.open("package.lottie");
console.log(reader.animationIds()); // from manifest, free
console.log(reader.stateMachineIds()); // from manifest, free

// Only this entry is decompressed and returned
const animJson = reader.getAnimationJson("hero");
if (animJson) {
  console.log(JSON.parse(animJson).nm);
}

// From a buffer — useful when you already have the bytes in memory
const reader2 = DotLottieReader.fromBytes(readFileSync("package.lottie"));
const font = reader2.getFont("MyFont.ttf"); // Buffer | null
```

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

### Load, start, and listen to a state machine in Jetpack Compose

Source: https://docs.lottiefiles.com/en/runtimes/distributions/android/v0.x/state-machines

Jetpack Compose example that loads an exploding_pigeon.lottie asset, starts the pigeon_fsm state machine, posts a Click event, stops it, and reads/sets inputs. Registers a StateMachineEventListener to log lifecycle, transition, input, and error callbacks. Requires OpenUrlPolicy with requireUserInteraction = true and an empty whitelist when starting.

```kotlin
import androidx.compose.runtime.*
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import com.lottiefiles.dotlottie.core.compose.ui.DotLottieAnimation
import com.lottiefiles.dotlottie.core.util.DotLottieSource
import com.lottiefiles.dotlottie.core.widget.DotLottieController
import com.lottiefiles.dotlottie.core.model.StateMachineEventListener
import com.lottiefiles.dotlottie.core.model.Event
import android.util.Log

@Composable
fun StateMachineExample() {
    val controller = remember { DotLottieController() }

    val stateListener = remember {
        object : StateMachineEventListener {
            override fun onStart() {
                Log.i("DotLottie", "State machine started")
            }
            override fun onStop() {
                Log.i("DotLottie", "State machine stopped")
            }
            override fun onStateEntered(enteringState: String) {
                Log.i("DotLottie", "State Entered: $enteringState")
            }
            override fun onStateExit(leavingState: String) {
                Log.i("DotLottie", "State Exited: $leavingState")
            }
            override fun onTransition(previousState: String, newState: String) {
                Log.i("DotLottie", "Transition: $previousState -> $newState")
            }
            override fun onCustomEvent(message: String) {
                Log.i("DotLottie", "Custom event: $message")
            }
            override fun onError(message: String) {
                Log.e("DotLottie", "State machine error: $message")
            }
            override fun onInputFired(inputName: String) {
                Log.i("DotLottie", "Input fired: $inputName")
            }
            override fun onBooleanInputValueChange(inputName: String, oldValue: Boolean, newValue: Boolean) {
                Log.i("DotLottie", "Boolean input $inputName: $oldValue -> $newValue")
            }
            override fun onNumericInputValueChange(inputName: String, oldValue: Float, newValue: Float) {
                Log.i("DotLottie", "Numeric input $inputName: $oldValue -> $newValue")
            }
            override fun onStringInputValueChange(inputName: String, oldValue: String, newValue: String) {
                Log.i("DotLottie", "String input $inputName: $oldValue -> $newValue")
            }
        }
    }

    LaunchedEffect(controller) {
        controller.stateMachineAddEventListener(stateListener)
    }

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        DotLottieAnimation(
            source = DotLottieSource.Asset("exploding_pigeon.lottie"),
            controller = controller,
        )

        Spacer(modifier = Modifier.height(16.dp))

        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
            Button(onClick = {
                val result = controller.stateMachineLoad("pigeon_fsm")
                if (result) {
                    Log.i("DotLottie", "State machine loaded.")
                    if (controller.stateMachineStart(
                            openUrl = OpenUrlPolicy(requireUserInteraction = true, whitelist = emptyList()),
                            onOpenUrl = null
                        )
                    ) {
                       Log.i("DotLottie", "State machine started.")
                    }
                }
            }) {
                Text(text = "Load & Start")
            }

            Button(onClick = {
                controller.stateMachinePostEvent(Event.Click(100f, 100f))
            }) {
                Text(text = "Click")
            }

            Button(onClick = {
                controller.stateMachineStop()
            }) {
                Text(text = "Stop")
            }
        }

        // Working with state machine inputs
        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
            Button(onClick = {
                controller.stateMachineSetBooleanInput("isActive", true)
            }) {
                Text(text = "Set Active")
            }

            Button(onClick = {
                val currentState = controller.stateMachineCurrentState()
                Log.i("DotLottie", "Current state: $currentState")
            }) {
                Text(text = "Log State")
            }
        }
    }
}
```

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

### Create radial gradient fill with and without explicit positions

Source: https://docs.lottiefiles.com/en/creator-api/types/radial-gradient-paint-options

Two examples of creating a radial gradient fill using the RadialGradientPaintOptions interface. The first specifies start and end positions, highlightAngle, and highlightLength; the second relies on defaults for start and end. Both use the same stops array.

```ts
// Create a radial gradient with defined start and end positions
group.createFill({
  type: "GRADIENT_RADIAL",
  start: { x: 100, y: 100 },
  end: { x: 200, y: 100 },
  highlightAngle: 45,
  highlightLength: 50,
  stops: [
    { color: { r: 255, g: 255, b: 255 }, offset: 0, opacity: 1 },
    { color: { r: 0, g: 0, b: 0 }, offset: 1, opacity: 1 },
  ],
});
```

```ts
// Create a radial gradient with defaults
group.createFill({
  type: "GRADIENT_RADIAL",
  stops: [
    { color: { r: 255, g: 255, b: 255 }, offset: 0, opacity: 1 },
    { color: { r: 0, g: 0, b: 0 }, offset: 1, opacity: 1 },
  ],
});
```

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

### init(fileName:bundle:config:onViewCreated:)

Source: https://docs.lottiefiles.com/en/runtimes/distributions/ios/v0.x/api-reference

Initializes a `DotLottieWebGPUPlayerView` by loading a `.lottie` or `.json` animation from a bundle.

```APIDOC
## init(fileName:bundle:config:onViewCreated:)

### Description
Initializes a `DotLottieWebGPUPlayerView` by loading a `.lottie` or `.json` animation from a bundle.

### Method
Initializer

### Parameters
- **fileName** (String) - Required - The name of the animation file in the bundle (without extension).
- **bundle** (Bundle) - Optional - The bundle to search for the animation file. Defaults to `.main`.
- **config** (Config) - Optional - Playback configuration. Defaults to `Config()`.
- **onViewCreated** ((DotLottieWebGPUView) -> Void)? - Optional - Callback invoked with the underlying view after creation. Defaults to `nil`.
```

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

### LayerMixin.shiftTo method signature and usage example

Source: https://docs.lottiefiles.com/en/creator-api/nodes/layer-mixin/shift-to

The signature shows the method accepts a single numeric parameter and returns void. The example demonstrates shifting a layer's timeline to start at frame 60, which moves the entire layer in time including startFrame, endFrame, timelineOffset, and all keyframes.

```typescript
shiftTo(frame: number): void;
```

```ts
// Start the layer at frame 60 instead of frame 0
layer.shiftTo(60);
```

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

### init(webURL:config:onViewCreated:)

Source: https://docs.lottiefiles.com/en/runtimes/distributions/ios/v0.x/api-reference

Initializes a `DotLottieWebGPUPlayerView` by loading a `.lottie` or `.json` animation from a remote URL.

```APIDOC
## init(webURL:config:onViewCreated:)

### Description
Initializes a `DotLottieWebGPUPlayerView` by loading a `.lottie` or `.json` animation from a remote URL. The file is fetched asynchronously once the view is created.

### Method
Initializer

### Parameters
- **webURL** (String) - Required - A URL string pointing to a remote `.lottie` or `.json` animation. The format is inferred from the URL: paths containing `.lottie` are loaded as dotLottie, all others as Lottie JSON.
- **config** (Config) - Optional - Playback configuration. Defaults to `Config()`.
- **onViewCreated** ((DotLottieWebGPUView) -> Void)? - Optional - Callback invoked with the underlying view after creation. Defaults to `nil`.
```

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

### Hover Effect: State Machine Definition and JavaScript Setup

Source: https://docs.lottiefiles.com/en/runtimes/distributions/js/v0.x/state-machines/examples

State machine definition with Idle and Hover states, using PointerEnter/PointerExit interactions to fire OnEnter/OnExit events. The JavaScript setup loads and starts the state machine after the animation loads, with autoplay disabled; pointer interactions are handled automatically.

```json
{
  "initial": "Idle",
  "inputs": [
    { "type": "Event", "name": "OnEnter" },
    { "type": "Event", "name": "OnExit" }
  ],
  "interactions": [
    {
      "type": "PointerEnter",
      "actions": [{ "type": "Fire", "inputName": "OnEnter" }]
    },
    {
      "type": "PointerExit",
      "actions": [{ "type": "Fire", "inputName": "OnExit" }]
    }
  ],
  "states": [
    {
      "name": "Idle",
      "type": "PlaybackState",
      "animation": "idle",
      "loop": true,
      "autoplay": true,
      "transitions": [
        {
          "type": "Transition",
          "toState": "Hover",
          "guards": [{ "type": "Event", "inputName": "OnEnter" }]
        }
      ]
    },
    {
      "name": "Hover",
      "type": "PlaybackState",
      "animation": "hover",
      "loop": true,
      "autoplay": true,
      "transitions": [
        {
          "type": "Transition",
          "toState": "Idle",
          "guards": [{ "type": "Event", "inputName": "OnExit" }]
        }
      ]
    }
  ]
}
```

```javascript
import { DotLottie } from "@lottiefiles/dotlottie-web";

const dotLottie = new DotLottie({
  canvas: document.querySelector("#canvas"),
  src: "button.lottie",
  autoplay: false,
});

dotLottie.addEventListener("load", () => {
  dotLottie.stateMachineLoad("hoverFSM");
  dotLottie.stateMachineStart();
});

dotLottie.addEventListener("loadError", (err) => {
  console.error("Failed to load animation:", err);
});
```

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

### State Machine Methods

Source: https://docs.lottiefiles.com/en/runtimes/distributions/flutter/v0.x/api-reference

Methods for loading, starting, stopping, and interacting with a state machine, including firing events, setting and getting inputs, and retrieving state information.

```APIDOC
## stateMachineLoad(String id)

### Description
Loads a state machine by ID.

### Method
stateMachineLoad

### Parameters
- **id** (String) - Required - The ID of the state machine to load.

### Return Type
`Future<bool?>`
```

```APIDOC
## stateMachineLoadData(String data)

### Description
Loads a state machine from a raw JSON string.

### Method
stateMachineLoadData

### Parameters
- **data** (String) - Required - The raw JSON string representing the state machine.

### Return Type
`Future<bool?>`
```

```APIDOC
## stateMachineStart()

### Description
Starts the loaded state machine.

### Method
stateMachineStart

### Parameters
None

### Return Type
`Future<bool?>`
```

```APIDOC
## stateMachineStop()

### Description
Stops the state machine.

### Method
stateMachineStop

### Parameters
None

### Return Type
`Future<bool?>`
```

```APIDOC
## stateMachineFire(String event)

### Description
Fires a named event to the state machine.

### Method
stateMachineFire

### Parameters
- **event** (String) - Required - The name of the event to fire.

### Return Type
`Future<void>`
```

```APIDOC
## stateMachineSetBooleanInput(String key, bool value)

### Description
Sets a boolean input.

### Method
stateMachineSetBooleanInput

### Parameters
- **key** (String) - Required - The input key.
- **value** (bool) - Required - The boolean value to set.

### Return Type
`Future<bool?>`
```

```APIDOC
## stateMachineSetNumericInput(String key, double value)

### Description
Sets a numeric input.

### Method
stateMachineSetNumericInput

### Parameters
- **key** (String) - Required - The input key.
- **value** (double) - Required - The numeric value to set.

### Return Type
`Future<bool?>`
```

```APIDOC
## stateMachineSetStringInput(String key, String value)

### Description
Sets a string input.

### Method
stateMachineSetStringInput

### Parameters
- **key** (String) - Required - The input key.
- **value** (String) - Required - The string value to set.

### Return Type
`Future<bool?>`
```

```APIDOC
## stateMachineGetBooleanInput(String key)

### Description
Gets a boolean input value.

### Method
stateMachineGetBooleanInput

### Parameters
- **key** (String) - Required - The input key.

### Return Type
`Future<bool?>`
```

```APIDOC
## stateMachineGetNumericInput(String key)

### Description
Gets a numeric input value.

### Method
stateMachineGetNumericInput

### Parameters
- **key** (String) - Required - The input key.

### Return Type
`Future<double?>`
```

```APIDOC
## stateMachineGetStringInput(String key)

### Description
Gets a string input value.

### Method
stateMachineGetStringInput

### Parameters
- **key** (String) - Required - The input key.

### Return Type
`Future<String?>`
```

```APIDOC
## stateMachineGetInputs()

### Description
Returns all defined inputs and their values.

### Method
stateMachineGetInputs

### Parameters
None

### Return Type
`Future<Map?>`
```

```APIDOC
## stateMachineCurrentState()

### Description
Returns the name of the currently active state.

### Method
stateMachineCurrentState

### Parameters
None

### Return Type
`Future<String?>`
```

```APIDOC
## getStateMachine(String id)

### Description
Returns the state machine definition JSON.

### Method
getStateMachine

### Parameters
- **id** (String) - Required - The ID of the state machine.

### Return Type
`Future<String?>`
```

```APIDOC
## dispose()

### Description
Disposes the controller and releases resources.

### Method
dispose

### Parameters
None

### Return Type
`Future<void>`
```

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

### Build a .lottie package with DotLottieBuilder

Source: https://docs.lottiefiles.com/en/tools/dotlottie-io/api/dotlottie-builder-class

Complete example of building a .lottie package: create a builder, set generator and initial animation, add animations and audio, then build and inspect the resulting DotLottie instance.

```javascript
const { DotLottieBuilder } = require("@lottiefiles/dotlottie-io");

const builder = new DotLottieBuilder();
builder.generator("my-tool v1.0");
builder.initialAnimation("intro");
builder.addAnimation("intro", JSON.stringify(introJson));
builder.addAnimation("hero", JSON.stringify(heroJson));
builder.addAudio("click.mp3", clickMp3Buffer);

const dl = builder.build();
console.log(dl.animationIds()); // ['intro', 'hero']
console.log(dl.audioFilenames()); // ['click.mp3']
```

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

### Custom Events from JavaScript: State Machine Definition and Setup

Source: https://docs.lottiefiles.com/en/runtimes/distributions/js/v0.x/state-machines/examples

Define a state machine with two states (Idle and Loading) that transition on 'submit' and 'reset' events. The JavaScript setup loads the state machine, starts it, and fires events from a button click, ensuring 'reset' is fired even if the form submission fails.

```json
{
  "initial": "Idle",
  "inputs": [
    { "type": "Event", "name": "submit" },
    { "type": "Event", "name": "reset" }
  ],
  "states": [
    {
      "name": "Idle",
      "type": "PlaybackState",
      "animation": "idle",
      "loop": true,
      "autoplay": true,
          "transitions": [
        {
          "type": "Transition",
          "toState": "Loading",
          "guards": [{ "type": "Event", "inputName": "submit" }]
        }
      ]
    },
    {
      "name": "Loading",
      "type": "PlaybackState",
      "animation": "loading",
      "loop": true,
      "autoplay": true,
      "transitions": [
        {
          "type": "Transition",
          "toState": "Idle",
          "guards": [{ "type": "Event", "inputName": "reset" }]
        }
      ]
    }
  ]
}
```

```javascript
import { DotLottie } from "@lottiefiles/dotlottie-web";

const dotLottie = new DotLottie({
  canvas: document.querySelector("#canvas"),
  src: "form.lottie",
  autoplay: false,
});

dotLottie.addEventListener("load", () => {
  dotLottie.stateMachineLoad("formFSM");
  dotLottie.stateMachineStart();
});

document.querySelector("#submit-btn").addEventListener("click", async () => {
  dotLottie.stateMachineFireEvent("submit");

  try {
    await submitForm();
  } finally {
    dotLottie.stateMachineFireEvent("reset");
  }
});
```

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

### Example: creator.ui.show with width and height

Source: https://docs.lottiefiles.com/en/creator-api/types/show-ui-options

Example of calling creator.ui.show with width and height options to configure the plugin UI window.

```typescript
creator.ui.show({ width: 400, height: 600 });
```

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

### Store and retrieve user preferences with ClientStorage

Source: https://docs.lottiefiles.com/en/creator-api/types/client-storage

Stores a theme preference and retrieves it using the ClientStorage interface. The get call returns the stored value, which is "dark" in this example.

```ts
await creator.clientStorage.set("theme", "dark");

// Retrieve preferences
const theme = await creator.clientStorage.get("theme"); // "dark"
```

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

### stateMachineStart(id:openUrlPolicy:)

Source: https://docs.lottiefiles.com/en/runtimes/distributions/ios/v0.x/api-reference

Loads and starts a state machine in one call.

```APIDOC
## stateMachineStart(id:openUrlPolicy:)

### Description
Load and start a state machine in one call.

### Method
stateMachineStart(id:openUrlPolicy:)

### Parameters
- **id** (String) - Required - The ID of the state machine.
- **openUrlPolicy** (OpenUrlPolicy) - Required - Policy for opening URLs.

### Return Type
Bool
```

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

### Access all state machines with dotlottie.stateMachines

Source: https://docs.lottiefiles.com/en/tools/dotlottie-js/how-to-guides/manage-state-machines

Use the `stateMachines` property to get an array of all `LottieStateMachine` objects. The example logs the count and iterates over each state machine to print its ID, name, and raw data.

```javascript
const allStateMachines = dotlottie.stateMachines;
console.log(`Found ${allStateMachines.length} state machines.`);

allStateMachines.forEach((sm) => {
  console.log(`State Machine ID: ${sm.id}, Name: ${sm.name}`);
  // Access the raw data directly
  console.log(" SM Data:", sm.data);
});
```

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

### Get a specific state machine with dotlottie.getStateMachine()

Source: https://docs.lottiefiles.com/en/tools/dotlottie-js/how-to-guides/manage-state-machines

Retrieve a `LottieStateMachine` instance by its ID using `getStateMachine()`. The example fetches a state machine with ID "sm_toggle_main" and logs its name and raw data if found.

```javascript
const toggleSM = dotlottie.getStateMachine("sm_toggle_main");
if (toggleSM) {
  console.log(`Retrieved State Machine: ${toggleSM.name}`);
  console.log(" SM Data:", toggleSM.data);
}
```

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

### Import/Installation

Source: https://docs.lottiefiles.com/en/creator-plugins/ui-library/components/tooltip

Instructions for importing the Tooltip component from the package or installing it via the registry.

```APIDOC
## Import/Installation

### Package Import
```tsx
import { Button, Tooltip } from "@lottiefiles/creator-plugins-ui";
```

### Registry Installation
```bash
npx shadcn@latest add @lottiefiles/tooltip
```
```

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

### Install SearchBar via shadcn CLI

Source: https://docs.lottiefiles.com/en/creator-plugins/ui-library/components/search-bar

Install the SearchBar component using the shadcn CLI.

```bash
npx shadcn@latest add @lottiefiles/search-bar
```

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

### Find assets used by a specific animation

Source: https://docs.lottiefiles.com/en/tools/dotlottie-js/how-to-guides/manage-assets

Shows how to get an animation object, its Lottie JSON, and inspect the assets array to match IDs with getImages() and getAudio(). The example checks for image assets by w/h properties and audio assets by extra.audioparams.

```javascript
async function findAnimationAssets(animationId) {
  // Get the animation object - needs await
  const animation = await dotlottie.getAnimation(animationId);
  if (!animation) {
    console.log(`Animation ${animationId} not found.`);
    return;
  }

  const lottieJson = await animation.toJSON(); // Get the Lottie JSON data

  if (!lottieJson.assets || lottieJson.assets.length === 0) {
    console.log(`Animation ${animationId} has no assets defined.`);
    return;
  }

  const imageAssets = dotlottie.getImages();
  const audioAssets = dotlottie.getAudio();

  console.log(`Assets used by animation ${animationId}:`);
  lottieJson.assets.forEach((assetDef) => {
    // Check if it's an image asset (has w, h)
    if (typeof assetDef.w === "number" && typeof assetDef.h === "number") {
      const foundImage = imageAssets.find((img) => img.id === assetDef.id);
      if (foundImage) {
        console.log(` - Image: ID=${foundImage.id}, FileName=${foundImage.fileName}`);
      }
    }
    // Add similar check for audio assets if identifiable (e.g., by filename extension or specific properties)
    // Example check based on structure often seen with audio assets:
    else if (assetDef.extra && assetDef.extra.audioparams) {
      const foundAudio = audioAssets.find((aud) => aud.id === assetDef.id);
      if (foundAudio) {
        console.log(` - Audio: ID=${foundAudio.id}, FileName=${foundAudio.fileName}`);
      }
    }
  });
}

// findAnimationAssets('animation_1');
```

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

### Complete state machine loop example

Source: https://docs.lottiefiles.com/en/runtimes/distributions/native/v0.x/state-machines

Loads a state machine from the player, starts it, and runs a loop that posts input events, ticks the machine, polls events, and presents rendered frames. The machine is released and the player destroyed at the end.

```c
dotlottieDotLottieStateMachine *machine =
  dotlottie_state_machine_load(player, "button-states");

if (!machine) {
  return 1;
}

dotlottie_state_machine_start(machine, NULL, true);

uint16_t interactions = 0;
dotlottie_state_machine_get_framework_setup(machine, &interactions);
bool needs_move = (interactions & (1 << 4)) != 0;

double last = now_seconds();

for (;;) {
  double current = now_seconds();
  float dt = (float)(current - last);
  last = current;

  input_event in;
  while (next_input_event(&in)) {
    switch (in.kind) {
      case INPUT_MOVE:
        if (needs_move) {
          dotlottie_state_machine_post_pointer_move(machine, in.x, in.y);
        }
        break;
      case INPUT_DOWN:
        dotlottie_state_machine_post_pointer_down(machine, in.x, in.y);
        break;
      case INPUT_UP:
        dotlottie_state_machine_post_pointer_up(machine, in.x, in.y);
        dotlottie_state_machine_post_click(machine, in.x, in.y);
        break;
    }
  }

  bool rendered = false;
  dotlottie_state_machine_tick(machine, dt, &rendered);

  dotlottieStateMachineEvent event;
  while (dotlottie_state_machine_poll_event(machine, &event) == 1) {
    handle_machine_event(&event);
  }

  if (rendered) {
    present(buffer, width, height);
  }
}

dotlottie_state_machine_release(machine);
dotlottie_destroy(player);
```

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

### Install Windows Rust targets

Source: https://docs.lottiefiles.com/en/runtimes/distributions/native/v0.x/prerequisites

Install the Rust targets for Windows using make windows-setup.

```bash
make windows-setup
```

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

### init(dotLottieAnimation:config:)

Source: https://docs.lottiefiles.com/en/runtimes/distributions/ios/v0.x/api-reference

Creates a player with an existing DotLottieAnimation and optional configuration.

```APIDOC
## init(dotLottieAnimation:config:)

### Description
Creates a player with an existing DotLottieAnimation and optional configuration.

### Method
Initializer

### Parameters
- **dotLottieAnimation** (DotLottieAnimation) - Required - The animation instance to display.
- **config** (AnimationConfig) - Optional - Configuration for the animation playback.

### Response
Returns a DotLottiePlayerUIView instance.
```

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

### Play a segment with the segment prop

Source: https://docs.lottiefiles.com/en/runtimes/distributions/svelte/v0.x/examples

Pass a start and end frame to the segment prop to play only part of an animation. This example plays frames 10 to 50 with autoplay and loop enabled. To change segments at runtime, call setSegment() on the player instance.

```svelte
<script>
  import { DotLottieSvelte } from "@lottiefiles/dotlottie-svelte";
</script>

<DotLottieSvelte
  src="animation.lottie"
  autoplay
  loop
  segment={[10, 50]} /* Play frames 10 to 50 */
  style="width: 300px; height: 300px; border: 1px solid #eee;"
/>
```

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

### Export a .lottie file to the file system in Node.js

Source: https://docs.lottiefiles.com/en/tools/dotlottie-js

Use the DotLottie class with local animation data, build the archive, and save it as a .lottie file using Node.js file system APIs. This example uses the toArrayBuffer method to get the binary data.

```javascript
import { DotLottie } from "@dotlottie/dotlottie-js";
import { writeFile } from "fs/promises";

async function createAnimationNode() {
  const dotlottie = new DotLottie();

  // Add animation from local JSON object
  const animationData = {
    v: "5.9.6",
    fr: 60,
    ip: 0,
    op: 180,
    w: 512,
    h: 512,
    layers: [],
  };

  dotlottie.addAnimation({
    id: "animation_1",
    data: animationData,
  });

  await dotlottie.build();

  // Export as ArrayBuffer and save
  const arrayBuffer = await dotlottie.toArrayBuffer();
  await writeFile("output.lottie", Buffer.from(arrayBuffer));
}
```
Tokens:
Raw