CPCodex Pets Tool

Codex pets

Preview, validate, and ship Codex pets without guessing.

A compact tool station for the Codex pet workflow: render a live spritesheet, validate pet.json, build hatch-pet prompts, and install packages into the right local folder.

Open preview tool Build a prompt
1536 x 1872 atlas8 x 9 grid192 x 208 cells

PetWidget + SpriteAnimator

Live Codex pet preview

Switch animations, scale the sprite, and enable the floating PetWidget when you want to test drag and pin behavior.

Floating mode uses viewport bounds.

Workflow

One station for the parts around generation.

Generate with hatch-pet

Use the prompt builder to shape a precise $hatch-pet request before spending a generation run.

Preview the atlas

Load an example or paste a browser-accessible spritesheet URL to check the shared Codex animation rows.

Validate the package

Validate the required manifest fields and copy a fixed template before installing the pet locally.

Manifest checker

Validate pet.json before installing.

Paste a Codex pet manifest and confirm the package has the minimum fields Codex needs to locate the spritesheet.

Manifest has the required fields.

Prompt builder

Shape a hatch-pet request.

This does not generate images directly. It gives you a concise prompt for the official Codex pet generation workflow.

$hatch-pet create a calm pixel animal Codex pet: capybara coding companion, small glasses, blue shirt, friendly idle and waving animations. Use the shared Codex pet atlas with idle, running, waving, jumping, failed, waiting, and review animations.

Install locally

Codex reads custom pets from your home folder.

Copy a complete pet folder into the local Codex pets directory, then use /pet in Codex to wake or hide the companion.

Local install snippet
mkdir "$HOME/.codex/pets/tater"
cp pet.json "$HOME/.codex/pets/tater/pet.json"
cp spritesheet.webp "$HOME/.codex/pets/tater/spritesheet.webp"

# In Codex
/pet

FAQ

Codex pet basics

Can this site generate a finished Codex pet spritesheet?

No. This tool helps you build prompts, validate manifests, preview spritesheets, and install packages. Finished spritesheets still come from the official hatch-pet skill or another image workflow.

What files does a Codex pet need?

A Codex pet needs a pet.json manifest and a spritesheet image, usually spritesheet.webp. Both files live inside ~/.codex/pets/<pet-id>/ so Codex can find the custom companion.

What spritesheet layout does Codex use?

Codex pets use a 1536 x 1872 spritesheet arranged as 8 columns by 9 rows. Each frame cell is 192 x 208 pixels, and each row maps to a shared animation such as idle, waving, waiting, failed, or review.

How do I preview a Codex pet before installing it?

Open the preview tool and load an example or paste a browser-accessible spritesheet URL. The preview uses codex-pets-react with the shared atlas, so you can switch rows, scale the sprite, and test floating PetWidget behavior.

What is codex-pets-react used for?

codex-pets-react is the rendering layer for Codex pet spritesheets in React apps. It provides SpriteAnimator for atlas playback and PetWidget for floating, draggable pet previews.