SDKs

Embed Retor in your own apps and build custom interfaces on top of the 3D scene.

How it works

Retor runs as an embedded viewer — either in an <iframe> (web) or a WebView (React Native). The SDK wraps the viewer and exposes a two-way postMessage bridge so your app can:

Receive the full project structure — lines, tags, metadata
React to user navigation — line open, line close, scroll progress
Send commands — open a line, jump to a tag, toggle autoplay

Composable UI

The viewer always runs in vanilla mode — Retor itself shows only the 3D scene. The SDK ships its own set of UI components that you compose to build the interface around the scene:

<Viewer projectId="abc123">
  <Hud>
    <ProjectSheet />
    <LineDetailSheet />
    <AddNoteSheet />
  </Hud>
</Viewer>

Each sheet auto-presents based on bridge state. Use them as-is for the default Retor look, or pass render-prop children (<LinesCarousel>, <LineTagList>) to bring your own visuals.

<ProjectSheet> — browse mode (no line open)
<LineDetailSheet> — when a line is open, with autoplay + tag list
<AddNoteSheet> — opens via useAddNote().open() for note input

Packages

React — <Viewer> backed by an iframe. Works in Next.js, CRA, Vite, etc.
React Native — Same API, backed by react-native-webview. Works in Expo and bare React Native.
Protocol — The raw postMessage protocol, if you want to integrate from a framework the SDKs don't cover.