Start

Quickstart

From zero to a validated animation in 60 seconds. Works in a clean external project with the built CLI.

2 min readUpdated

Go from an empty directory to a validated animation and inspectable artifacts. This path is tested in CI against a clean temp project.

What you will learn

  • Works without cloning the Pax monorepo
  • Four commands, under 60 seconds on a typical laptop
  • Every step writes files you can open and diff
  • Exact fixes when something is missing

In your project (60 seconds)

  1. Point at the CLI

    Download or clone pax-design/pax, run pnpm install && pnpm build, then export the binary:

    export PAXFX="node /absolute/path/to/pax/packages/cli/dist/bin.js"
    $PAXFX --version

    When npm publish completes, replace with npx paxfx@latest.

  2. Initialize Pax in an empty directory

    mkdir my-app && cd my-app
    npm init -y
    $PAXFX init --yes --skip-integrations --skip-runtime

    Creates .pax/, project config, and a welcome sample under .pax/samples/welcome/.

  3. Run a recipe and validate

    $PAXFX recipes run title-card
    $PAXFX scene validate .pax/scenes/title-card.scene.json
  4. Confirm the toolchain

    $PAXFX doctor

    Doctor names optional capabilities (FFmpeg, Chromium) and prints fixes for anything blocking your next step.

Expected output

Expected result

You have a validated scene JSON, a compiled preview sibling, and a doctor report with no fatal errors. Total elapsed time stays under 60 seconds when the CLI is pre-built.

From the Pax monorepo

If you are developing Pax itself, run through pnpm from the repository root:

pnpm paxfx --version
pnpm paxfx doctor
pnpm paxfx create lottie logo
pnpm paxfx lottie validate examples/logo/animation.json

Preview and refine

pnpm paxfx recipes run title-card
pnpm paxfx refine .pax/scenes/title-card.scene.json --to "20% faster"
pnpm paxfx preview .pax/scenes/title-card.preview.html

The preview studio serves on 127.0.0.1:4177 with play, pause, step, scrub, and reduced-motion controls.

Common issues

paxfx is not recognized

Use $PAXFX with the absolute path to packages/cli/dist/bin.js, or run through pnpm from the monorepo root. See Installation.

Validation reports unsupported features

That is intended. Pax states Lottie support boundaries rather than emitting broken files. See Lottie.

Preview opens but nothing animates

Check OS reduced-motion settings. Pax settles animations to their final state by design. See Accessibility.

Next steps

Was this page helpful?

Answers are not recorded or transmitted. Pax has no telemetry.