---
title: "Hand it to your app"
description: "Lesson 14.4 of Creator Terminal's lesson films (Agents and the command line): Before you write a line of code, see what a dotLottie gives your app, its state machine and the values it can set, from the command line."
canonical: "https://terminal.lottiefiles.com/hand-it-to-your-app/"
last_updated: 2026-11-08
---

# Hand it to your app

> Lesson 14.4 of Creator Terminal's lesson films (Agents and the command line): Before you write a line of code, see what a dotLottie gives your app, its state machine and the values it can set, from the command line.

- The film (1:30): https://terminal.lottiefiles.com/media/14.4-hand-it-to-your-app/03437cc6c32c/14.4-hand-it-to-your-app.mp4
- Vertical cut: https://terminal.lottiefiles.com/media/14.4-hand-it-to-your-app/963df3c8a99b/14.4-hand-it-to-your-app-vertical.mp4
- Captions: https://terminal.lottiefiles.com/media/14.4-hand-it-to-your-app/7a1f2f454ddb/14.4-hand-it-to-your-app.vtt
- The page: https://terminal.lottiefiles.com/hand-it-to-your-app/
- A file the film uses: https://terminal.lottiefiles.com/media/14.4-hand-it-to-your-app/f4d6633b6ae3/like.lottie
- A file the film uses: https://terminal.lottiefiles.com/media/14.4-hand-it-to-your-app/92d9ac700ee8/payment.lottie

## Step by step

A dotLottie can do more than play: a state machine makes it react to the pointer, and tokens let
your app change its colours and words as it plays. Before you wire one into your app, Creator
Terminal's command line tells you exactly what it gives your code: every input and the line that
sets it, every event it sends, every value your app can change and the themes it comes in. In this
tutorial you'll read a like button and a payment card, play one in a theme, and export it with your
own values.

### Before you start

- Creator Terminal, installed ([Install Creator Terminal](/install/)), and a terminal open.
- To follow along, `like.lottie` and `payment.lottie` from **Follow along** on this page, in the
  folder you run the commands from. Or use your own `.lottie` or Lottie JSON file.

### 1. Read its state machine

`creator-tui states` and a file's name says what its state machines do, in words:

```sh
creator-tui states like.lottie
```

For the like button, it lists every state (**idle**, **hover**, **press**, **liked** and
**unlike**), what each one plays, and what moves it on: the pointer entering the button, a press,
the end of a move. **players start it**, beside the machine's name, marks the one a player starts
when the file loads.

![The like button's state machine in words: its inputs, its states and what moves each on.](https://terminal.lottiefiles.com/media/14.4-hand-it-to-your-app/111e5c26f35b/hand-it-to-your-app-the-like-button-s-state-machine-in-words.webp)

### 2. See what your code sets

At the top are its **inputs**, the values your app sets: `enabled` (true or false) and `likes` (a
number). Each comes with the line that sets it, such as
`dotLottie.stateMachineSetBooleanInput("enabled", true)`.

![The inputs, enabled and likes, each with the call that sets it.](https://terminal.lottiefiles.com/media/14.4-hand-it-to-your-app/c4bca4f09ee4/hand-it-to-your-app-the-inputs-enabled-and-likes-each-with-the.webp)

At the end, **it tells the app** lists the events it sends: here **favorited**, as someone likes
it, with how to listen for it on the web. **the player listens for** lists the pointer events it
needs from the player.

![What the player listens for, and the event it tells the app: favorited.](https://terminal.lottiefiles.com/media/14.4-hand-it-to-your-app/09176b49258c/hand-it-to-your-app-what-the-player-listens-for-and-the-event.webp)

If Creator Terminal's check finds a problem in a machine, it's listed here too. Add `--json` to
get the machines as dotLottie's own JSON, and `-m` and a name to read one machine of several.

### 3. List the values it takes

Tokens are values your app can set while an animation plays. `creator-tui tokens` lists them:

```sh
creator-tui tokens payment.lottie
```

The payment card has four: `$corners` (a number), `$brand` (a colour), and `$payee` and `$amount`
(text). Each shows its value now, and the call that sets it, such as `setColorSlot("brand", …)`.
Under them are its themes, **Lumen** and **Northwind**, and what each one changes.

![The payment card's tokens, each with its call, and its two themes.](https://terminal.lottiefiles.com/media/14.4-hand-it-to-your-app/bbab126b77ef/hand-it-to-your-app-the-payment-card-s-tokens-each-with-its.webp)

Add `--json` for a list your scripts can read.

### 4. Play it in a theme

Play it right in the terminal, in one of its themes:

```sh
creator-tui play payment.lottie --theme Lumen
```

The card plays, looping, in Lumen's green. Click to pause, drag to scrub, and press `esc` to quit.

![The payment card playing in the terminal, in the Lumen theme.](https://terminal.lottiefiles.com/media/14.4-hand-it-to-your-app/6d7b7bdb253a/hand-it-to-your-app-the-payment-card-playing-in-the-terminal-in.webp)

### 5. Fill it in

To see it with your own values, export it with `--set`, once for each token:

```sh
creator-tui export payment.lottie -f mp4 --set 'payee=to Ada' --set 'amount=$40.00'
```

It writes `payment-set.mp4` beside the file: the card with your words in it, to share with your
team or check before the app's code is written. A value must suit its token (a colour for a
colour), and a token the file doesn't have ends with the command that lists the ones it has.

![The export writing an MP4 of the card with the payee and amount set.](https://terminal.lottiefiles.com/media/14.4-hand-it-to-your-app/b15db142aab7/hand-it-to-your-app-the-export-writing-an-mp4-of-the-card.webp)

To write one for every row of a spreadsheet, use `--data` with a CSV file whose columns are named
after the tokens: see [A card for every row](/a-card-for-every-row/).

### What you learned

- `creator-tui states` reads a file's state machines: its states, its inputs with the call that
  sets each, and the events it sends your app.
- `creator-tui tokens` lists the values your app can set as it plays, and the themes.
- `creator-tui play --theme` plays it in a theme; `creator-tui export --set` writes it with your
  own values.

The manual's [Command line](/docs/cli/) page has every option, and [States](/docs/states/) how to
make a state machine.

## In this lesson

### What it does (0:07)

Here's a like button, as a dotLottie, ready for an app. To see what it does, type creator-tui states, and its name. Every state, what it plays, and what moves it on, a hover, a press, the end of a move.

### What your code sets (0:23)

At the top, its inputs, each with the very line your code sets it with. And at the end, the event it tells your app about, favorited, when someone likes it.

### Values it takes (0:34)

Now a payment card. creator-tui tokens lists the values your app can set while it plays, its corners, its brand colour, who it's paid to and how much, each with its call. And the themes it comes in.

### Play it in a theme (0:49)

Play it right here, in one of its themes, with creator-tui play and the theme option. That's Lumen, a bank in green, playing in the terminal. Press escape to quit.

### Fill it in (1:00)

And to see it with your own values, export it with the set option, once for each token. A payment of forty dollars to Ada, as an MP4, ready to share with your team. It's written beside the card, with set in its name, so the original stays as it was.