@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.
App.svelte
<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.
vite.config.js
import { sveltekit } from '@sveltejs/kit/vite'
import { studioPlugin } from '@threlte/studio/vite'
export default {
plugins: [studioPlugin(), sveltekit()]
}