Introduction

Asset Studio (@asset-studio/core) is a React library for building interactive canvas editors. It is built on top of Konva and react-konva, and provides a fully featured editing experience out of the box.

What is Asset Studio?

Asset Studio gives you two core components:

• <Studio /> — a full-featured interactive editor. Users can add, move, resize, rotate, and style items on a canvas.
• <Asset /> — a lightweight, read-only viewer that renders the same canvas data responsively.

Both components share the same data model, so you can switch between editing and viewing without any data transformation.

Key Features

• Multiple item types — images, text, shapes, freehand drawings, video, and audio
• Transform tools — move, resize, rotate, crop with snapping and alignment guides
• Animation system — per-item enter, exit, and effect animations with a timeline
• History — full undo/redo support
• Export — export to image (PNG/JPG) or video
• Grouping — nest items into groups for organized layouts
• Hooks API — full programmatic control via React hooks

How It Works

Asset Studio wraps your editor UI in a <StudioProvider> which handles session validation and sets up the editor state. Inside the provider you mount either <Studio> or <Asset> depending on your use case.

StudioProvider
└── Studio  (or Asset)

All editor state is accessible from any component inside the provider via the exported hooks (useStudio, usePlayer, useDraw, etc.).

Next Steps

• Installation — set up the package and registry
• Quick Start — get a working editor in under 5 minutes
• Session Setup — configure your API credentials