IsoraIsometric scenes for React

Lay out offices, factories and cities in a GUI editor, render the saved JSON as an SVG React component, and let people walk, sit and work on their own.

Get started

Live demos

Try the Studio

GitHub

An isometric office rendered by Isora, with people working at their desks

Studio scene editor

Drag assets onto a 4–100 tile floor, seat people, give them routines and save a .isora.json file. Or build the same scene in code with createSceneBuilder.

Open the Studio

One SVG, no canvas

draws the scene as a single SVG with depth sorting, four view rotations, click hit-testing and overlays. React 18/19, Vite or Next.js, ESM. About 34 kB gzip for a typical app.

Rendering

People who live in the scene

Routines and daily schedules, seat reservation, paths around furniture and walls, yielding in narrow aisles. Activity bubbles show who is working, meeting, resting or drinking coffee.

Moving people

Drive it from your data

behavior.command('kim', { type: 'do', spot: 'chair-3' }) sends a person to a seat. Map live data to commands — the Claude Office demo turns coding-agent sessions into people.

See Claude Office

Deterministic

Scene + seed + time decide every frame, so playback can seek, change speed, render on the server and stay identical across renderers.

Concepts

Ten asset packs and a linter

Office, factory, city, medical, military, school, retail, transit, people and common packs (2–5 kB each). lintScene and the motion check catch overlaps and blocked seats before your users do.

API reference

Install

bash

npm install @isora/core @isora/react @isora/assets

tsx

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

const scene = parseScene(sceneJson) // validates the JSON saved by the Studio
const registry = createRegistry(officialPacks)

export function Office() {
  return <IsoScene scene={scene} registry={registry} playBehaviors showActivities />
}

Next: Getting started · Concepts · API reference

Demos

Everything below runs in your browser from this site — no server.

ShowcaseTen 30×30+ scenes built in code — factory line, partition office, smart city, military base, hospital ward, fulfillment center, data center, school, retail store, airport — with schedules and live device states.Open showcase →StudioThe scene editor. Place assets, seat people, edit routines and play the timeline. Scenes are saved in your browser’s storage. English and Korean UI.Open Studio →Claude OfficeClaude Code sessions and subagents as people in an isometric office: coding at desks, coffee when idle, Zz after a long break. Click a speech bubble for live progress. Demo data here; run it locally to see your own sessions.Open Claude Office →