StudioProvider

The editor context provider that sets up the editor state tree. It must be wrapped by SessionProvider, which handles session validation.

Usage

import {
  StudioProvider,
  SessionProvider,
  SessionResponse,
} from "@asset-studio/core";

async function createSession(userGuid: string): Promise<SessionResponse> {
  const response = await fetch("https://your-server.com/createSession", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ user_guid: userGuid }),
  });
  return response.json();
}

export default function App() {
  return (
    <SessionProvider onCreateSession={createSession}>
      <StudioProvider>
        {/* Studio, Asset, or any component using hooks */}
      </StudioProvider>
    </SessionProvider>
  );
}

Props

Prop	Type	Required	Description
children	ReactNode	Yes	Your editor components and any components using Asset Studio hooks.
initialWidth	number	No	Initial canvas width in pixels. Defaults to 1080.
initialHeight	number	No	Initial canvas height in pixels. Defaults to 1080.
onSaveDrawShape	(shape: ShapeDrawItemType) => void	No	Called when the user saves a drawn shape.
errorFallback	ReactNode	No	UI to render if session validation fails.

Behavior

• Session validation is handled by the wrapping SessionProvider. See Session Setup.
• All hooks (useStudio, usePlayer, etc.) must be called from components inside this provider.
• Calling a hook outside of StudioProvider will throw an error.

Notes

• You only need one StudioProvider per editor instance.
• The provider is lightweight and does not render any visible UI itself.
• It is safe to place it high in your component tree (e.g. at the app root) if you use a single editor instance.

Related

• Session Setup
• useSession hook