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.

Shortest path to success

1. Quickstart — Do the end-to-end setup at Quickstart guide.
2. Samples — Explore ready-to-run apps at live code samples.
3. Build — Use the minimal example below to embed 3dverse in your React app.

Why Use Livelink.React?

• Declarative: <Livelink>, <Canvas>, <Viewport>, <CameraController>
• Less boilerplate: session lifecycle, canvas sizing, input routing
• Composable: idiomatic React patterns with hooks like useCameraEntity()
• Flexible: drop to Livelink.js APIs when you need fine-grained control

Installation

Install the React bindings from npm:

npm install @3dverse/livelink-react

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>
    );
}

What’s happening

• <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.

Use your own scene

Replace sceneId and token with values from your project (see the console).

Hooks

The React bindings expose hooks for common tasks:

• useCameraEntity() — obtain a camera entity for the active session
• useClients() — read the connected clients in the session
• useEntity({ euid }) — subscribe to an entity’s components and state

Example

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

function EntityName({ euid }: { euid: UUID }) {
    const { entity } = useEntity({ euid });
    return <span>{entity?.name ?? "Unknown"}</span>;
}

Entity identifier

euid is the entity UUID in your scene. How you obtain it depends on your app (e.g., selection, lookup, or initial data).

Tokens and Access

Your token controls capabilities (read-only vs read/write, transient vs persistent changes). See API Access for scopes and best practices.

React UI Components (Optional)

The @3dverse/livelink-react-ui package provides reusable widgets (overlays, helpers, convenience components) to speed up scaffolding.

Repo: https://github.com/3dverse/livelink/tree/release/livelink.react.ui

Troubleshooting

• Nothing renders — confirm your sceneId/token are valid and not expired.
• Black canvas — check browser support for WebCodecs and allow hardware acceleration.
• Input not responding — ensure the canvas/viewport elements occupy the visible area and can receive focus.
• Permissions — if edits don’t persist, verify token scope (read-only vs read/write).

Related resources

The fundamentals of 3dverse — Livelink and React Samples

How to leverage cloud-native real-time 3D development to optimize performance and scalability.