Asset

A lightweight, read-only canvas viewer. Use this to display saved canvas data without any editing capabilities. It scales responsively to fit its parent container automatically.

Usage

Asset renders on its own — no StudioProvider needed. Place SessionProvider at the app level so it can wrap multiple instances:

tsx

import { Asset } from "@asset-studio/core";

export default function Preview({ savedItems, width, height }) {
  return <Asset items={savedItems} width={width} height={height} />;
}

tsx

// App level
import { SessionProvider, Asset } from "@asset-studio/core";

export default function App() {
  return (
    <SessionProvider onCreateSession={createSession}>
      {previews.map((savedItems) => (
        <Asset items={savedItems} width={1920} height={1080} />
      ))}
    </SessionProvider>
  );
}

Props

Prop	Type	Required	Description
`items`	`Item[]`	Yes	The items to render on the canvas.
`width`	`number`	No	Document width in pixels. Defaults to `1080`.
`height`	`number`	No	Document height in pixels. Defaults to `1080`.
`errorFallback`	`ReactNode`	No	UI to render if session validation fails.

Responsive Scaling

Asset uses a ResizeObserver to fill its parent container and scales the canvas to fit while maintaining the original aspect ratio.

tsx

// The canvas fills its parent and scales automatically.
// Control the rendered size by sizing the parent element.
<div style={{ width: 400, height: 400 }}>
  <Asset items={items} width={1280} height={720} />
</div>

Video, Audio & Animations

If any item is of type Video or Audio, or if any item has animations defined, wrap Asset with PlayerProvider and use the usePlayer hook to control playback.

tsx

import { SessionProvider, PlayerProvider, Asset } from "@asset-studio/core";

function Preview() {
  return (
    <SessionProvider onCreateSession={createSession}>
      <PlayerProvider>
        <PlaybackControls />
        <Asset items={items} width={1280} height={720} />
      </PlayerProvider>
    </SessionProvider>
  );
}

function PlaybackControls() {
  const { play, stop, isPlaying } = usePlayer();
  return (
    <button onClick={isPlaying ? stop : play}>
      {isPlaying ? "Stop" : "Play"}
    </button>
  );
}

Difference from Studio

	`Studio`	`Asset`
Editing	Yes	No
Transform handles	Yes	No
Drawing tools	Yes	No
Responsive scaling	No	Yes
Performance	Full editor	Lightweight

Asset ​

Usage ​

Props ​

Responsive Scaling ​

Video, Audio & Animations ​

Difference from Studio ​