Skip to main content

Livelink React

Livelink.React is the easiest way to integrate 3dverse into a React application. It wraps Livelink.js and manages session lifecycle, input handling, and rendering surfaces so you can work with declarative components and hooks instead of imperative setup code.

Installation​

Install the React package in your application:

npm install @3dverse/livelink-react

npm version downloads types

Getting Started​

This minimal example renders a scene to a full-screen canvas with a controllable camera.

import { Livelink, Canvas, Viewport, CameraController, useCameraEntity } from "@3dverse/livelink-react";

function App() {
    return (
        <Livelink
            sceneId="6391ff06-c881-441d-8ada-4184b2050751"
            token="public_i1-8nmpu9dTKaQvl"
        >
            <AppLayout />
        </Livelink>
    );
}

function AppLayout() {
    const { cameraEntity } = useCameraEntity();


    return (
        <Canvas width="100vw" height="100vh">
            <Viewport
                cameraEntity={cameraEntity}
                style={{ width: "100%", height: "100%" }}
            >

                <CameraController />
            </Viewport>
        </Canvas>
    );
}
Explanation of the code
Livelink creates and manages the session (no manual `Livelink.start`).
useCameraEntity() returns a camera entity ready to attach to a viewport.
Canvas defines the drawing surface; Viewport renders the scene.
CameraController enables default camera interaction.

Other components​

DOM3DOverlay — Render a 3D overlay.
DOMEntity — Render a DOM element at the position of an entity.
DOM3DElement — Render a DOM element at the position of an entity.
Recorder — Record a video from a canvas.

Hooks​

The React bindings expose hooks for common tasks.

Example​

import { useEntity } from "@3dverse/livelink-react";

function EntityNameInput({ euid }: { euid: UUID }) {

    const { entity } = useEntity({ euid });

    const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        entity.name = e.target.value;
    };

    return <input type="text" value={entity?.name ?? "Unknown"} onChange={handleChange} />;
}
Explanation of the code
...so you can edit any entity properties,
...and display it.
useEntity() subscribes to an entity’s components and state,

All hooks​

useClients()— Read the connected clients in the session.
useEntity()— Subscribe to multiple entities’ components and state.
useEntities()— Subscribe to an entity’s components and state.
useSceneSettings()— Read the current scene settings.

Old documentation​

Documentation