Route Graphics is a declarative 2D UI/rendering system built on PixiJS. You describe states with JSON, then Route Graphics handles element lifecycle, animations, audio, and interaction events for you.
This README stays intentionally short. The hosted docs are the source of truth for setup guides, node reference pages, events, asset loading, plugin authoring, and live examples.
bun install route-graphicsimport createRouteGraphics, {
createAssetBufferManager,
textPlugin,
rectPlugin,
spritePlugin,
containerPlugin,
tweenPlugin,
soundPlugin,
} from "route-graphics";
const assets = {
"circle-red": { url: "/public/circle-red.png", type: "image/png" },
"bgm-1": { url: "/public/bgm-1.mp3", type: "audio/mpeg" },
};
const assetBufferManager = createAssetBufferManager();
await assetBufferManager.load(assets);
const app = createRouteGraphics();
await app.init({
width: 1280,
height: 720,
backgroundColor: 0x000000,
plugins: {
elements: [textPlugin, rectPlugin, spritePlugin, containerPlugin],
animations: [tweenPlugin],
audio: [soundPlugin],
},
eventHandler: (eventName, payload) => {
console.log(eventName, payload);
},
});
await app.loadAssets(assetBufferManager.getBufferMap());
document.body.appendChild(app.canvas);
app.render({
id: "hello-state",
elements: [
{
id: "title",
type: "text",
x: 40,
y: 40,
content: "Hello Route Graphics",
textStyle: {
fill: "#ffffff",
fontSize: 36,
},
},
],
animations: [],
audio: [],
});For complete usage details, go to:
# Run tests
bun run test
# Build the local docs/playground site
cd playground
bun install
bun run buildThe docs site and playground source live under playground/.
Join us on Discord to ask questions, report bugs, and stay up to date.
This project is licensed under the MIT License.