solid-unity-webgl

SolidJS wrapper for Unity WebGL — embed Unity WebGL builds in SolidJS apps with two-way communication.

A port of react-unity-webgl by Jeffrey Lanters, adapted to SolidJS primitives.

Installation

bun add @dschz/solid-unity-webgl
# or
npm install @dschz/solid-unity-webgl

Usage

import { Unity, createUnityContext } from "@dschz/solid-unity-webgl";

const App = () => {
  const { unityProvider, isLoaded, loadingProgression } = createUnityContext({
    loaderUrl: "/Build/MyGame.loader.js",
    dataUrl: "/Build/MyGame.data",
    frameworkUrl: "/Build/MyGame.framework.js",
    codeUrl: "/Build/MyGame.wasm",
  });

  return (
    <>
      {!isLoaded && <p>Loading... {Math.round(loadingProgression * 100)}%</p>}
      <Unity
        unityProvider={unityProvider}
        style={{ width: "960px", height: "540px" }}
      />
    </>
  );
};

Two-way Communication

React → Unity

const { sendMessage } = createUnityContext({ ... });

// Call a public method on a Unity GameObject
sendMessage("GameManager", "SetScore", 100);

Unity → SolidJS

In your Unity C# code:

// Call this to dispatch an event to SolidJS
Application.ExternalCall("dispatchSolidUnityEvent", "GameOver", score);

In your SolidJS component:

const { addEventListener, removeEventListener } = createUnityContext({ ... });

addEventListener("GameOver", (score) => {
  console.log("Game over! Score:", score);
});

API

createUnityContext(config: UnityConfig): UnityContext

Creates a Unity context. Call at the top level of a component.

Returns:

• unityProvider — pass to <Unity> component
• isLoaded — reactive boolean
• loadingProgression — reactive number (0–1)
• initialisationError — reactive Error | undefined
• sendMessage(gameObject, method, param?) — send message to Unity
• requestFullscreen(enabled) — toggle fullscreen
• requestPointerLock() — capture pointer
• takeScreenshot(type?, quality?) — capture canvas as base64
• unload() — gracefully quit the Unity instance
• addEventListener(event, callback) — listen for Unity events
• removeEventListener(event, callback) — remove listener
• UNSAFE__unityInstance — direct Unity instance access

<Unity unityProvider={...} />

Renders the Unity WebGL canvas. Props:

• unityProvider (required)
• id? — canvas element ID
• style? — inline styles
• class? — CSS class
• tabIndex?
• devicePixelRatio?
• matchWebGLToCanvasSize?
• disabledCanvasEvents?

Credits

Ported from react-unity-webgl by Jeffrey Lanters.