Replayable is a TypeScript toolkit for building playable ads. It combines asset processing,
network-specific builds and exports with a browser runtime and optional Pixi/Spine integration.
The product is Replayable; GitHub and npm use the replayablejs organization.
Replayable 0.1.0-alpha.14 is an alpha release. APIs may change before 1.0.
pnpm add @replayablejs/runtime@0.1.0-alpha.14
pnpm add -D @replayablejs/cli@0.1.0-alpha.14 @replayablejs/config@0.1.0-alpha.14See getting started for project setup and optional Pixi support.
Music Mixer is a complete playable built with Replayable's published packages and HTML/CSS. One codebase produces two music packs, distinct color themes, guided and free-play modes, and three languages—including localized hand artwork. Together with eight delivery profiles, that produces 96 exports.
Replayable selects only the assets each version needs, resizes artwork, subsets fonts, and applies version-specific loading bundles. The project also demonstrates synchronized audio, lifecycle-aware animations, tutorials, idle hints, and endcards.
Play the variants and download exports · Explore the source
Color Loop is a color-matching puzzle built with Replayable's published packages, PixiJS, and TypeScript. Players send colored chips onto a moving conveyor to clear matching arrow chains. One codebase powers five gameplay versions with different level sequences and endcard triggers. Across eight delivery profiles, that produces 40 exports, including five standalone browser previews.
Replayable packs shared artwork into an atlas, resizes the logo, compresses audio, and defers audio loading until the scene appears. The project also demonstrates portrait and landscape layouts, a first-interaction tutorial, lifecycle-aware audio, and network-aware endcards.
Play the variants and download exports · Explore the source
For smaller starting points, try these focused examples:
| Example | Live demo | Source |
|---|---|---|
| Word Puzzle | Play demo | View source |
| Card Match | Play demo | View source |
| City Builder | Play demo | View source |
See the examples guide for details.
The Build a Playable Ad skill helps AI coding agents create ads with Replayable's published packages. It includes a runnable starter and guidance for creative variations, deferred assets, and Pixi/Spine integration.
Codex: ask:
Install the
build-playable-adskill from thereplayablejs/replayablerepository, underskills/build-playable-ad.
Then describe the ad you want and ask Codex to use $build-playable-ad.
Claude Code, Cursor, and GitHub Copilot: download or clone this repository, then copy the
entire skills/build-playable-ad folder into your ad project's location below. Keep assets/
and references/ alongside SKILL.md; copying only the Markdown file omits the starter.
| Agent | Destination in your ad project | Usage |
|---|---|---|
| Claude Code | .claude/skills/build-playable-ad/ |
/build-playable-ad Create a word puzzle ad |
| Cursor | .cursor/skills/build-playable-ad/ |
Ask Agent to use the build-playable-ad skill |
| GitHub Copilot | .github/skills/build-playable-ad/ |
Ask Copilot's agent to use the build-playable-ad skill |
For example, from your ad project's root on macOS or Linux, using a local Replayable checkout:
mkdir -p .claude/skills
cp -R /path/to/replayable/skills/build-playable-ad .claude/skills/Replace /path/to/replayable with your checkout path. For Cursor or Copilot, substitute the
corresponding destination above. Review an existing installation before replacing it.
Claude Code also supports ~/.claude/skills/build-playable-ad/ for use across projects.
The shared instructions and starter are agent-independent; agents/openai.yaml is optional
Codex UI metadata and can remain in the folder for other agents.
Use Node.js 24 or newer and pnpm 10.32.1.
git clone https://github.com/replayablejs/replayable.git
cd replayable
pnpm install --frozen-lockfile
pnpm build
pnpm --filter @replayablejs/example-basic-playable devOpen the URL printed by the server. To try Pixi/Spine, use
pnpm --filter @replayablejs/example-basic-pixi-playable dev instead.
Stop development before building the same example; both operations write generated assets.
pnpm --filter @replayablejs/example-basic-playable build
pnpm --filter @replayablejs/example-basic-playable exportBuilds are written to dist/<version>/<network>/<language>/ inside the example.
Export reads those builds and writes HTML/ZIP delivery files to exports/.
@replayablejs/assets— Build optimized resources and generated TypeScript asset modules.@replayablejs/config— Validate project settings and expand versions, networks and languages into playable variants.@replayablejs/runtime— Manage host readiness, assets, screen state, audio, updates, completion and store actions.@replayablejs/canvas— Provide a shared canvas host for rendering integrations.@replayablejs/three— Connect Three.js rendering, camera resizing, and cleanup to the playable lifecycle.@replayablejs/pixi— Connect Pixi rendering, asset loaders and layout to the playable lifecycle.@replayablejs/tween— Animate DOM elements and object properties using lifecycle-aware Motion playback.@replayablejs/devtools— Provide optional stats, sound controls and an endcard trigger for development previews.@replayablejs/build— Run local preview and produce runnable playable variants.@replayablejs/export— Turn existing playable builds into network-specific delivery artifacts.@replayablejs/cli— Run assets, configuration, development, build and export commands.
Root, documentation and example workspaces are private. All ten public packages share one toolkit version.
The replayable CLI name does not change with the npm scope.
Run pnpm docs:dev for the documentation site and pnpm check for formatting, dependency
checks, lint, types, tests and builds. Example exports and pnpm packages:check are separate
checks, also run by CI.
Created by Sargis Sargsyan through an AI-assisted engineering workflow, using OpenAI Codex extensively across implementation, testing and documentation. Product direction, architecture and final decisions remained human-led.
Replayable's original code is MIT licensed. Third-party code, datasets, fonts, artwork and Spine resources retain their own terms. Keep the license and attribution files that accompany those resources; the project license does not replace them.