@threlte/studio

Getting Started

Threlte Studio is a spatial programming toolset.

It consists of two main parts: A GUI to inspect and edit your scene and a vite plugin to sync the changes in real-time to your code. It is made to be extendable, so you can create your own custom components to interact with your scene and hook into the Threlte Studio API and GUI.

Installation

npm install @threlte/studio

Quick Start

To get started, encapsulate your whole scene in the <Studio> component.

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

<Canvas>
  <Studio>
    <Scene />
  </Studio>
</Canvas>

To use auto-sync, in your vite config, insert the Threlte Studio vite plugin before any other plugin.

import { sveltekit } from '@sveltejs/kit/vite'
import { studioPlugin } from '@threlte/studio/vite'

export default {
  plugins: [studioPlugin(), sveltekit()]
}