Web Runtime
Vanilla JS Runtime
Vanilla JS / Web runtime for ExodeUI — no framework required.
exodeui-vanilla
Installation
bash
npm install exodeui-vanillaGetting Started
The Vanilla JS runtime lets you render ExodeUI animations in any HTML page using a simple canvas element.
No framework required
Full canvas rendering pipeline
Input bindings, triggers, navigation
Class-Based API
The primary way to use ExodeUI in Vanilla JS is through the ExodeUICanvas class.
html
<canvas id="my-canvas" style="width:400px;height:300px;"></canvas>
<script type="module">
import { ExodeUICanvas } from 'exodeui-vanilla';
const player = new ExodeUICanvas({
element: '#my-canvas',
fit: 'Contain',
alignment: 'Center',
onReady: (engine) => {
console.log('ExodeUI ready!', engine);
},
onTrigger: (name, anim) => {
console.log('Trigger:', name, anim);
},
onNavigation: ({ type, value }) => {
if (type === 'url') window.location.href = value;
}
});
// Load artboard from JSON URL
await player.load('/my-artboard.json');
player.play();
</script>Direct Engine Access
For custom rendering loops (e.g. within WebGL or custom canvas contexts):
js
import { ExodeUIEngine } from 'exodeui-vanilla';
const engine = new ExodeUIEngine();
engine.load(artboardJSON);
let lastT = performance.now();
requestAnimationFrame(function loop(t) {
const dt = (t - lastT) / 1000;
lastT = t;
engine.advance(dt);
engine.render(ctx, canvas.width, canvas.height);
requestAnimationFrame(loop);
});API Reference: ExodeUICanvas Options
| Option | Type | Default | Description |
|---|---|---|---|
| element | string | HTMLCanvasElement | Required | CSS selector or canvas element |
| fit | 'Contain' | 'Cover' | 'Fill' | 'Contain' | Layout fit mode |
| alignment | 'Center' | 'TopLeft' ... | 'Center' | Layout alignment |
| autoPlay | boolean | true | Auto-start animation loop |
| interactive | boolean | true | Enable pointer/mouse/touch events |
| onReady | (engine) => void | — | Called when artboard is ready |
| onTrigger | (name, anim) => void | — | Called when trigger fires |
| onNavigation | ({ type, value }) => void | — | Called on navigation actions |
Methods
| Method | Description |
|---|---|
| load(data) | Loads artboard JSON object or URL |
| play() | Starts the animation/physics loop |
| pause() | Pauses the animation/physics loop |
| seek(time) | Seeks to a specific time in seconds |
| setInputBool(name, value) | Sets a boolean state variable value |
| setInputNumber(name, value) | Sets a number state variable value |
| setInputText(name, value) | Sets a text state variable value |
| fireTrigger(name) | Fires a momentary trigger input |
| handleScroll(x, y) | Feeds manual scroll coordinates to the engine |
| destroy() | Cleans up event listeners and canvas references |