Skip to content
Uptimizr Docs

Playgrounds & online editors

You don’t need a bundler or a local project to try Uptimizr. Every connector ships a standalone global bundle that exposes window.Uptimizr, so you can instrument a scene that lives in an online editor with a few lines.

There are two kinds of surface, and they integrate differently:

  • Code playgrounds — you write the scene in JS (Babylon Playground, CodePen, JSFiddle, Glitch, StackBlitz). Load the bundle, then call trackScene(...) once the engine scene exists.
  • Visual editors — you build the scene in a UI and attach scripts (PlayCanvas Editor). Bring in the connector (as an external global bundle or an ESM import), then call trackScene(...) from a script component.

Babylon Playground

Section titled “Babylon Playground”

The Babylon Playground supports ES module imports, so you can import the connector directly and call trackScene once your scene exists — no DOM injection and no global needed. Add this inside createScene, just before return scene; (swap in your projectId and endpoint):

Import the connector from a CDN ESM URL and call it after the scene is built. jsDelivr’s /+esm endpoint serves the published npm package as a ready ES module (deps resolved) — no bundler and nothing to host:

import { trackScene } from "https://cdn.jsdelivr.net/npm/@uptimizr/babylon/+esm";


// ...inside createScene, after the scene is built:
trackScene(scene, {
  projectId: "your-project",
  endpoint: "https://collect.example.com",
  meta: { sceneId: "playground" },
});

In a real project (npm + bundler) you’d use the bare specifier import { trackScene } from "@uptimizr/babylon" — node resolution maps it. The Playground doesn’t resolve arbitrary bare names, so use the full URL there (or esm.sh: https://esm.sh/@uptimizr/babylon).

Run the Playground and interact with the scene. Camera pose, pointer/click, mesh picks, and FPS start flowing to your collector — confirm them in the dashboard or the query API.

CodePen, JSFiddle, Glitch & StackBlitz

Section titled “CodePen, JSFiddle, Glitch & StackBlitz”

These sandboxes let you add <script> tags directly, so you can load the engine and the Uptimizr bundle side by side. Load the Uptimizr global after the engine, then call trackScene once the scene/camera/renderer exist.

<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@uptimizr/babylon/dist/uptimizr-babylon.global.js"></script>
<script>
  // ...create engine + scene...
  Uptimizr.trackScene(scene, {
    projectId: "your-project",
    endpoint: "https://collect.example.com",
  });
</script>

PlayCanvas Editor

Section titled “PlayCanvas Editor”

The PlayCanvas Editor attaches scripts to entities and runs them in the published app. There are two ways to bring in the connector — pick the one that matches how your project is scripted.

Load the Uptimizr global bundle as an external script (it runs before your scripts and exposes window.Uptimizr), then call trackScene from a classic script component. Simplest path, works with PlayCanvas’ classic pc.createScript scripts.

  1. Project Settings → External Scripts — add the bundle URL so it loads before your code:

    https://cdn.jsdelivr.net/npm/@uptimizr/playcanvas/dist/uptimizr-playcanvas.global.js

  2. Create a script (for example analytics.js), attach it to an entity, and reference your camera entity via a script attribute:

    var Analytics = pc.createScript("analytics");
    

    // Drag your camera entity onto this attribute in the Editor.
    Analytics.attributes.add("camera", { type: "entity" });
    

    Analytics.prototype.initialize = function () {
      this.tracker = Uptimizr.trackScene(this.app, this.camera, {
        projectId: "your-project",
        endpoint: "https://collect.example.com",
      });
      this.on("destroy", () => this.tracker.stop("manual"));
    };

  3. Launch the scene and interact with it; events flow to your collector. Read this.tracker.sessionId or emit custom events with this.tracker.track(...) — the return value is the same UptimizrClient as the npm path.

Babylon Editor & other engine editors

Section titled “Babylon Editor & other engine editors”

The Babylon Editor, the three.js editor, Unity/Unreal WebGL exports, and similar tools all produce a standard web project or page rather than an embedded runtime you script inline. There’s no editor-specific Uptimizr plugin — once you have the exported project:

In both cases you call the same trackScene(...) once the engine’s scene (and, for three.js, camera + renderer) exist.

Next steps

Section titled “Next steps”