Custom UI

Your Studio app can supply its own HTML, CSS, and JavaScript. Python runs the application logic and calls the engine SDK. The page displays controls and a viewport.

Serve a page from Python

The built-in page helper supports small apps without an additional web framework:

import spatialengine
import spatialstudio

client = spatialengine.connect()
app = spatialstudio.serve()

@app.get("/")
def index():
    return app.page("index.html")

@app.post("/fit")
def fit():
    client.std.viewport.camera.zoom_extents(viewport="main")
    return "Framed the scene"

app.run()

Create index.html beside main.py:

<!doctype html>
<meta charset="utf-8">
<title>My spatial app</title>
<button id="fit">Frame the scene</button>
<spatialengine-viewport
  engine="__ENGINE__"
  label="main"
  aria-label="Scene viewport"
  style="display:block; width:100%; height:480px"
></spatialengine-viewport>
<script type="module">
  await import("__ENGINE__/spatialengine-viewport.js");
  document.querySelector("#fit").addEventListener("click", async () => {
    const response = await fetch("/fit", { method: "POST" });
    if (!response.ok) console.error(await response.text());
  });
</script>

app.page() replaces __ENGINE__ with the address of this run’s engine. The page must contain objects in the engine scene before framing produces a useful view.

Use a framework

Hello Flask shows an ordinary Flask server. Studio assigns the app’s port through spatialstudio.port() and shows the page served there.

Hello React builds its frontend into dist. Its Python entry point uses spatialstudio.serve(files="dist"). Built code asks a backend route for spatialstudio.engine_url() instead of substituting an address into the compiled bundle.

You can edit and build these files from your normal IDE. Studio runs the project and manages its engine.

Use the page bridge

The default scaffold uses spatialstudio.connect() to register named Python handlers and send events to the page. app.serve() keeps that bridge running. This is a different page integration from the HTTP routes above.

Start from the supplied scaffold or a sample so the page and Python entry point use the same integration.

Browser-only apps

A Studio web UI still uses a native engine and Python process. To deploy an app that runs entirely in a browser, build with the npm/WebAssembly engine and adapt any native-only dependencies.