Examples

These are the plugins in Phantom's repository under plugins/. Each one is set up like yours: a package.json with a phantom field, a src/index.ts with definePlugin, and npm run dev to serve it.

Start here

Example	Read it for
plugins/examples/welcome	The shortest way to put something on screen: a panel, rich text and a button, once per account, with tests.
plugins/examples/overlay-controls	A settings panel drawn in the game with the overlay's own controls: tabs, a checkbox, a dropdown, a slider and a scrolling box.
plugins/examples/hide-players	One flash.ui.rule that hides every other avatar, now and later, with typed config, a keybind and tests on the fake loader.
plugins/examples/custom-room	A room of your own made of pictures, with prop clicks, chat and characters.
plugins/examples/custom-art	phantom.aj.content: every asset the game loads, and serving your own in place of one.
plugins/examples/paint-picture	phantom.aj.artStudio: a file turned into strokes the studio's own brush paints.
plugins/examples/noughts-and-crosses	phantom.aj.realtime: a board two people in the room share, with a host, state and presence.
plugins/examples/auto-tfd	phantom.aj.adventures, and a supervised automation that survives a reconnect.
plugins/examples/nearby	aj.community through Phantom's own channel: who else is playing near you, inside a command, with tests.
plugins/examples/game-settings	phantom.aj.ui.contribute: a plugin's own preferences drawn as real rows of Animal Jam's Settings window, with no interface code.

Bigger plugins

These ship with Phantom, so they're longer, but they're the only place some of the SDK is used for real.

Plugin	Read it for
plugins/avatar-looks	Six changes to how an animal is drawn, each a hook, a hold or a recolour against a named client member.
plugins/shops-trading	Eight hooks on the shop and trade screens, with a dashboard beside the game.
plugins/art-editor	A drawing surface of its own in Vue, and what the art studio can't do (words, mirroring).
plugins/animal-jam-theme	A theme: colours only, no code.
plugins/auto-adventures	adventures.record and adventures.playRoute: a run recorded once and played back, and finding an adventure by its title rather than by a number.

What they don't cover

• Only game-settings uses phantom.aj.ui (Animal Jam's own look), and only one call of it. overlay-controls is the plain layer underneath. For drawing in the game's look, start at Building interfaces in the game, then Drawing over the game.
• Several pass a button press from a panel into the game by writing to ctx.storage and reading it back on a timer. That works and is fine to copy for now, but the timer is their own, not something the SDK provides.
• phantom.recipes has no example yet. It's three things built on the overlay (chatShortcuts, customChatBox, chatHistoryPanel), each one call.

Copying one

Copy the folder, then change three things in its package.json: the package name, the phantom.id, and the two workspace:* dependencies. Those only work inside the repository; @phantomclient/plugin and @phantomclient/plugin-cli should both be latest. Then run npm install and npm run dev, as in the dev loop.