Machine Views

Render server-driven UI for project machines (daily streaks, loyalty walls, etc.) inside a sandboxed iframe.

Prebuilt Components

All components must be rendered inside a HyveSdkProvider.

import {
  MachineView,
  MachineViewButton,
  MachineViewImageButton,
  MachineViewFullscreen,
} from "@hyve-sdk/js/react";

Inline iframe — fits wherever you place it.

<MachineView machineId="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" />

Prop	Type	Required	Description
`machineId`	`string`	Yes	Machine UUID to fetch and render
`className`	`string`	No	Class on the iframe
`style`	`CSSProperties`	No	Inline styles on the iframe

Renders null while loading or on error.

A button that opens the machine in a centered modal dialog.

<MachineViewButton machineId="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" />

Prop	Type	Required	Default	Description
`machineId`	`string`	Yes	—	Machine UUID
`children`	`ReactNode`	No	`"Open"`	Button label
`title`	`string`	No	—	Dialog header title
`dialogWidth`	`number \| string`	No	`520`	Dialog panel width
`viewHeight`	`number \| string`	No	`400`	iframe height inside dialog
`className`	`string`	No	—	Class on the trigger button
`style`	`CSSProperties`	No	—	Styles on the trigger button

Closes on backdrop click or Escape key.

An image that opens the machine in a modal dialog.

<MachineViewImageButton
  machineId="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
  src="/icons/streak.png"
/>

Prop	Type	Required	Default	Description
`machineId`	`string`	Yes	—	Machine UUID
`src`	`string`	Yes	—	Image URL
`alt`	`string`	No	`""`	Image alt text
`title`	`string`	No	—	Dialog header title
`dialogWidth`	`number \| string`	No	`520`	Dialog panel width
`viewHeight`	`number \| string`	No	`400`	iframe height inside dialog
`imgStyle`	`CSSProperties`	No	—	Styles on the `<img>` element
`className`	`string`	No	—	Class on the trigger button
`style`	`CSSProperties`	No	—	Styles on the trigger button

Takes over the full viewport. Mount to show, unmount to hide. Locks body scroll on iOS Safari.

{
  showStreak && (
    <MachineViewFullscreen machineId="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" />
  );
}

Prop	Type	Required	Description
`machineId`	`string`	Yes	Machine UUID
`title`	`string`	No	Title in the top bar
`onClose`	`() => void`	No	Called on close button or Escape key

Note: Prefer the prebuilt components above. Use getMachineRender only when you need full control over how the snippet is injected or rendered.

Fetches the JavaScript render for a machine by ID. All prebuilt components use this internally.

const js = await hyve.getMachineRender("xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx");

Returns a Promise<string> — a JS snippet ready for injection into a page.

The returned snippet is an IIFE that receives a container element and renders UI into it:

(function(c) {
  var panel = document.createElement('div');
  // ... builds and styles the UI ...
  c.appendChild(panel);
})(container);