Studio

The interactive canvas editor component. Renders a full-featured editing surface where users can add, move, resize, rotate, crop, and animate items.

Usage

import {
  StudioProvider,
  SessionProvider,
  Studio,
  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 Editor() {
  return (
    <SessionProvider onCreateSession={createSession}>
      <StudioProvider>
        <Studio />
      </StudioProvider>
    </SessionProvider>
  );
}

Props

Prop	Type	Required	Default	Description
paddingColor	string	No	'#ffffff'	Padding color of the canvas.
padding	number	No	200	Padding around the canvas document in pixels.

Features

Transform Tools

When an item is selected, the transform handles appear automatically. Users can:

• Move — drag the item to reposition it
• Resize — drag corner/edge handles
• Rotate — drag the rotation handle above the item

Snap & Alignment

The editor snaps items to:

• Other items' edges and centers
• The canvas edges and center

Use the useView hook to toggle snapping on or off.

Zoom & Pan

• Scroll wheel — zoom in/out
• Middle mouse drag — pan the canvas

Use the useZoom hook to control zoom programmatically.

Drawing Mode

Activate freehand or shape drawing via the useDraw hook.

Crop Mode

Activate crop mode on a selected image via the useCrop hook.

Adding Items

Use addItem from the useStudio hook:

const { addItem } = useStudio();

// Add a text item
addItem("Text", {
  x: 100,
  y: 100,
  width: 400,
  height: 80,
  itemProps: {
    text: "Hello!",
    fontSize: 40,
    color: "#000000",
  },
});

// Add an image
addItem("Image", {
  x: 0,
  y: 0,
  width: 1280,
  height: 720,
  itemProps: {
    src: "https://example.com/sample-image.jpg",
  },
});

See Item Types for all available types and their properties.

Controlling the Stage

Access the Konva stage directly via the stageRef from useStudio:

const { stageRef } = useStudio();

function getPointerPosition() {
  const pos = stageRef.current?.getPointerPosition();
  console.log("Pointer on stage:", pos); // { x: number, y: number }
}

Related

• Asset component — read-only viewer
• useStudio hook
• Item Types