Isora Guide

English | 한국어

Isora is an isometric engine for React. You build isometric scenes as data (JSON), draw them as SVG in a React app, and move people and equipment around them — the kind of live floor view used for digital twins, operations dashboards and people/agent simulations. Scenes are made in Studio (a GUI scene editor) or in code, and apps show them with @isora/react. What goes where and who walks where are decided by pure functions in @isora/core, so server rendering, rewinding, fast-forwarding and other renderers all produce the same picture.

scene JSON ──┐
             ├─► @isora/core ─ placement·spots·pathfinding·behavior planning·motion·depth sorting ─► parts to draw
asset packs ─┘                                                                                             │
                                                         @isora/react ─ <IsoScene>·hooks·per-frame layer ◄─┘

Docs

Doc	Read it when you want to
Getting started	Show a scene file in a React app for the first time, then add clicks and live state
Concepts	Understand coordinates, objects, assets, poses, states, ticks and frames, and determinism
Moving people	Let people move on their own with routines and schedules, or send them anywhere with commands. Read where they are and what they do
Rendering	Use <IsoScene>, overlays and click coordinates, draw with hooks yourself, or plug in another renderer
Motion engine	See how walking and sitting are computed, why people never pass through furniture, and how fast it is
Custom people	Build parts for your own person asset so it can walk and sit
Architecture	See how packages and modules are split, how data flows, where to extend, and what is missing
API reference	Scan the public functions, hooks and components (including languages)

30-second tour

import { createRegistry, parseScene } from '@isora/core'
import { IsoScene, useBehaviorPlayback } from '@isora/react'
import { officialPacks } from '@isora/assets'
import sceneJson from './scenes/office.isora.json'

const scene = parseScene(sceneJson)
const registry = createRegistry(officialPacks)

export function Office() {
  // When the app owns behavior playback, it can command people and read who is doing what.
  // People with a behavior (routine) move on their own; people listed in control (kim) wait for commands.
  const behavior = useBehaviorPlayback(scene, registry, { control: ['kim'] })
  return (
    <IsoScene
      scene={scene}
      registry={registry}
      behavior={behavior}
      showActivities
      onSceneClick={(point, object) => {
        // Send Kim to where the user clicked (to the chair, if it was a chair).
        if (object?.id.startsWith('chair')) behavior.command('kim', { type: 'do', spot: object.id })
        else behavior.command('kim', { type: 'go', to: [point[0] - 0.25, point[1] - 0.25] })
      }}
    />
  )
}