A place to
start building.

Use the full React viewer

The private packages @lumitas/project-format and @lumitas/viewer-react are both version 0.1.0-alpha.0. Website consumes their built package exports. Package distribution uses the private GitLab registry and is not a public npm release.

import { LumitasViewer } from '@lumitas/viewer-react';
import { readProjectFile } from '@lumitas/project-format';
import '@lumitas/viewer-react/styles.css';

const project = await readProjectFile(file, abortController.signal);

<div style={{ height: 680, minWidth: 0 }}>
  <LumitasViewer project={project} ui={{ layout: 'canvas' }} style={{ height: '100%' }} />
</div>

The host supplies React 19, the project and a usable height. The viewer responds to its actual panel size. Apply the explicit package stylesheet. With Vite+, set worker: { format: 'es' } so module workers keep their lazy imports. Frameworks should mount the interactive viewer in a client boundary. TanStack Query is optional when the host passes a parsed project.

Keep the previous project visible until an import succeeds. Cancel superseded reads and release owned resources when unmounting. The in-application demo includes sample selection and local-file reading.

Embed the hosted route

<iframe
  src="https://lumitas.app/embed/viewer/?demo=one-star-dragon-ball"
  title="Lumitas neon sign viewer"
  style="width:100%;height:680px;border:0"
  allow="camera; xr-spatial-tracking; fullscreen"
  allowfullscreen
></iframe>

The route defaults to a canvas embed without a header, footer, project-opening action or sample gallery. Project opening and samples are optional host extras. It does not accept arbitrary remote project URLs or a messaging API. The production URL becomes usable after the website is deployed. Cross-origin AR and camera access also depend on the parent page's Permissions Policy, browser support and trusted HTTPS.

Try the iframe demo. The direct React integration avoids a frame boundary when your application already uses React.

Configure the embed

Use ui={{ layout: 'canvas' }} for in-canvas controls, or ui={false} for a plain interactive canvas. Header, footer, view/workspace switching, manipulation tools, zoom/fit, appearance, backing, background, glow, visibility, details, focus, XR entry, the cube, exports and host extras have independent boolean options. Supplying demo data does not enable a gallery: demoGallery: true is an explicit opt-in.

For a hosted frame, use ?chrome=canvas (the default), ?chrome=full or ?chrome=none. Set view=2d, view=3d or view=technical for the initial view. Known ui. options accept only 0 or 1, such as ui.lighting=0 or ui.header=1. Unknown options and malformed values are ignored. Plain mode ignores individual flags. The iframe configurator generates matching code.

In React, change ui without changing the component key to retain the active renderer, orbit and relative zoom as framing adapts to the host. A frame URL change loads a new document; configure the direct React host for live changes without reloading. Initial view applies only when the viewer mounts. UI flags affect presentation rather than permissions or source data. Loading/error recovery and an active immersive exit remain available.

Compose individual surfaces

Each suffix belongs to @lumitas/viewer-react. Standalone surfaces need a sized .lumitas-viewer wrapper and the stylesheet. The host owns controls, stable settings and state. The component demo mounts one selected surface at a time; a 2D host does not need to download the 3D renderer.

Help test the alpha

1. Open a sample, then try a local project. Check that its saved dimensions and construction make sense.
2. Compare 2D backgrounds and a furnished 3D room. Try zoom, fit, backing, lighting and a PNG export.
3. On a supported Android phone, use Chrome over trusted HTTPS to enter AR. Check placement and physical size, then exit and enter again.
4. Try a narrow window or phone layout. Settings should fit, scroll and return focus when closed.

For a problem, send your testing coordinator the viewer version, demo URL, browser/OS, device, sample name, reproduction steps, expected result and what happened. A screenshot or short recording helps. Attach a local project only when needed and appropriate to share. The alpha has no automatic issue-submission backend.

General AR was previously accepted on a Pixel 7a. Physical headset, physical Safari and manual screen-reader checks retain their separately recorded status. Browser automation does not establish a new hardware pass.

Browser and product boundaries

Use a modern browser. Photo composition needs WebGL; 3D needs WebGL 2. Camera and immersive XR require trusted HTTPS and compatible hardware. The Viewer presents a project rather than editing its source, and does not certify fabrication or electrical safety. Read the actual data behavior.