Quick Start

This guide walks you through mounting the Studio editor in a React app from scratch.

Prerequisites

Make sure you have completed Installation and Session Setup before continuing.

Minimal Example

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

// Call your own backend middleware — never call the Asset Studio API directly
// from the frontend as it would expose your API key.
// See Session Setup for how to implement the middleware.
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 (
    <div
      style={{
        height: "100vh",
      }}
    >
      <SessionProvider onCreateSession={createSession}>
        <StudioProvider>
          <Studio />
        </StudioProvider>
      </SessionProvider>
    </div>
  );
}

That's it. You now have a fully functional canvas editor.

Adding Items Programmatically

Use the useStudio hook to add items from anywhere inside the provider:

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

function Toolbar() {
  const { addItem } = useStudio();

  function addText() {
    addItem("Text", {
      x: 100,
      y: 100,
      width: 400,
      height: 80,
      itemProps: {
        text: "Hello, World!",
        fontSize: 48,
        color: "#000000",
      },
    });
  }

  function addImage() {
    addItem("Image", {
      x: 50,
      y: 50,
      width: 300,
      height: 200,
      itemProps: {
        src: "https://example.com/sample-image.jpg",
      },
    });
  }

  return (
    <div>
      <button onClick={addText}>Add Text</button>
      <button onClick={addImage}>Add Image</button>
    </div>
  );
}

export default function App() {
  return (
    <div
      style={{
        height: "100vh",
      }}
    >
      <SessionProvider onCreateSession={createSession}>
        <StudioProvider>
          <Toolbar />
          <Studio />
        </StudioProvider>
      </SessionProvider>
    </div>
  );
}

Loading Existing Data

Pass a saved item list via the initialItems prop on StudioProvider:

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

export default function App({ savedItems }) {
  return (
    <SessionProvider onCreateSession={createSession}>
      <StudioProvider initialItems={savedItems}>
        <Studio />
      </StudioProvider>
    </SessionProvider>
  );
}

Saving Data

Read the current items from the editor state and serialize them:

function SaveButton() {
  const { items, documentWidth, documentHeight, duration } = useStudio();

  function save() {
    const data = {
      items,
      width: documentWidth,
      height: documentHeight,
      duration,
    };
    // Send to your API, localStorage, etc.
    console.log(JSON.stringify(data));
  }

  return <button onClick={save}>Save</button>;
}

Read-Only Viewer

To display saved work without editing capabilities, use the <Asset> component. SessionProvider should wrap your app at a higher level — Preview just uses Asset directly:

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

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

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

See Session Setup for how to set up the backend middleware and configure your API key.