@threlte/theatre

<Studio>

The <Studio> component enables the Theatre.js studio interface in your browser. It is intended for use in development.

See the Theatre.js docs for extended instructions for using the studio interface.

Theatre.js Docs

Example

In most cases, you want the interface while editing animations or laying out scenes. While other parts of Theatre.js are performant and built for production, @theatre/studio is currently not, and shouldn’t be included in your production bundle.

<script lang="ts">
  import { Canvas } from '@threlte/core'
  import { Studio } from '@threlte/theatre'
  import Scene from './Scene.svelte'

  // Using SvelteKit
  import { dev } from '$app/environment'
</script>

<Studio enabled={dev} />

<Canvas>
  <Scene />
</Canvas>

Exporting State

When editing your project in the studio, state is automatically saved to your browser’s local storage. To export the state, select your project from the outline panel (top-left) and click the export in the details panel (top-right). For more information and a video, see the Theatre.js state docs.