Documentation / From canvas to code

A little code.
A lot of life.

You made something worth interacting with. Now put it where people are.
Choose your runtime, connect your scene, and keep the good ideas moving.

Feels at home in your stack.

Your first living component.

QUICK START
npm install exodeui
import { ExodeUICanvas } from 'exodeui';

export default function App() {
  return (
    <div style={{ width: 800, height: 600 }}>
      <ExodeUICanvas
        src="/animations/my-scene.json"
        autoPlay={true}
        fit="Contain"
        alignment="Center"
      />
    </div>
  );
}
Add your exported scene JSON to /public/animations/my-scene.json.Full SDK reference →

01 / DESIGN TO DEVELOPMENT

Make the handoff smaller.

Give every state a name, connect the right input, and bring a clear contract into your app.

02 / CONSIDERATE MOTION

Delight, without the dizziness.

Keep feedback readable, respect reduced motion, and make every interaction work with a keyboard.

EXPLORE HUBS · RECIPES · MIGRATIONS

Recipes, Concepts, & Alternative Comparisons

Migrations & VS

Unpack verifiable feature breakdowns, runtime performance benchmarks, and step-by-step migration paths.

React Recipes & Concepts

Copy-paste runnable code recipes and deep dive into GSAP & Framer Motion-grade motion architecture.

Vue 3 Motion Recipes

Hardware-accelerated transitions, interactive canvas physics, and drag gestures for Vue 3 apps.

THE CODE IS JUST THE BEGINNING.

Made on a canvas.
At home in your product.

ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Open web studio →