API

Language / 语言： English | 简体中文

This page documents the public API for @ioai/lerobot-studio. The package provides the viewer, helpers for a custom welcome page, archive and directory data-source factories, and their types. It does not include the standalone application's export engine.

The generated report below is the canonical API reference. Update the source code, run npm run api:report, and do not edit the generated report directly.

---

Example

import { LeRobotViewer } from '@ioai/lerobot-studio';
import '@ioai/lerobot-studio/style.css';

<LeRobotViewer dataSource="https://example.com/dataset.zip" theme="system" />;

dataSource can be a remote archive URL or a custom DataSource:

• createArchiveDataSourceFromFile — local ZIP / TAR / TAR.GZ
• createArchiveDataSourceFromUrl — remote archive you want to reuse
• createRemoteManifestDataSource — host-owned list of per-file HTTP(S) URLs
• createDirectoryDataSource — File System Access directory handle

For a custom welcome page, use LeRobotStudioProvider with LeRobotViewerContent, DatasetSourceSelector, SampleDatasetCard, Pagination, and useDragAndDrop. See Embedding.

The viewer supports in-session episode changes when the dataset allows them. onExport is a callback for your host UI; it does not export anything by itself.

---

Custom data sources

Implement DataSource if your application needs to read bytes or text by path. Treat paths and content as untrusted, and release object URLs in clear().

Loading phases are download, index, gunzip, and read. Fatal errors include invalid sources, unavailable remote URLs, unsupported archives, and dataset-loading failures.

---

Generated API report

API Report File for "@ioai/lerobot-studio"

Do not edit this file. It is a report generated by API Extractor.

import { default as React_2 } from 'react';
import * as React_3 from 'react';

// @public
export function createArchiveDataSourceFromFile(file: File): DataSource;

// @public
export function createArchiveDataSourceFromUrl(url: string): DataSource;

// @public
export function createDirectoryDataSource(handle: FileSystemDirectoryHandle): DataSource;

// @public
export function createRemoteManifestDataSource(files: RemoteFileEntry[]): DataSource;

// @public
export const DatasetSourceSelector: React_2.FC<DatasetSourceSelectorProps>;

// @public
export interface DatasetSourceSelectorProps {
    // (undocumented)
    className?: string;
    // (undocumented)
    onOpenDirectory: () => void;
    // (undocumented)
    onOpenLocalArchive: () => void;
    // (undocumented)
    onOpenRemoteArchive: (url?: string) => void;
    // (undocumented)
    onRequestUrl?: (rawUrl: string | null, mode: 'push' | 'replace') => void;
    // (undocumented)
    onRestoreFromUrl?: (requested: ParsedSourceUrl) => void;
    // (undocumented)
    requested?: ParsedSourceUrl | null;
}

// @public
export interface DataSource {
    clear(): void | Promise<void>;
    exists(path: string): Promise<boolean>;
    getObjectUrl(path: string, mimeType?: string, onProgress?: ProgressHandler): Promise<string>;
    invalidateObjectUrl?(path: string): void | Promise<void>;
    listPaths?(): Promise<string[]>;
    readBytes(path: string, onProgress?: ProgressHandler): Promise<Uint8Array>;
    readText(path: string, onProgress?: ProgressHandler): Promise<string>;
}

// @public
export interface DirectoryFile {
    // (undocumented)
    file: File;
    // (undocumented)
    path: string;
}

// @public
export interface DragAndDropCallbacks {
    // (undocumented)
    onDirectoryFiles?: (files: DirectoryFile[]) => void;
    // (undocumented)
    onDirectoryHandle?: (handle: FileSystemDirectoryHandle) => void;
    // (undocumented)
    onFile: (file: File) => void;
    // (undocumented)
    onUnresolvedDirectory?: (name: string) => void;
}

// @public @deprecated (undocumented)
export const LeRobotProvider: React_2.FC<LeRobotStudioProviderProps>;

// @public
export const LeRobotStudioProvider: React_2.FC<LeRobotStudioProviderProps>;

// @public (undocumented)
export interface LeRobotStudioProviderProps {
    // (undocumented)
    children: React_2.ReactNode;
    // (undocumented)
    className?: string;
    // (undocumented)
    language?: string;
    showToaster?: boolean;
    // (undocumented)
    theme?: 'light' | 'dark' | 'system';
    wrapRoot?: boolean;
}

// @public (undocumented)
export const LeRobotViewer: React_2.FC<LeRobotViewerProps>;

// @public
export function LeRobotViewerContent(input: Omit<LeRobotViewerProps, 'theme' | 'language' | 'className'> & {
    showSidebar: boolean;
    showPlaybackBar: boolean;
}): React_2.JSX.Element | null;

// @public
export interface LeRobotViewerError {
    cause?: unknown;
    code: LeRobotViewerErrorCode;
    message: string;
    recoverable: boolean;
}

// @public
export type LeRobotViewerErrorCode = 'INVALID_DATA_SOURCE' | 'REMOTE_SOURCE_UNAVAILABLE' | 'UNSUPPORTED_ARCHIVE' | 'DATASET_LOAD_FAILED';

// @public
export interface LeRobotViewerProps {
    className?: string;
    dataSource: string | DataSource;
    enableKeyboardShortcuts?: boolean;
    language?: string;
    onBack?: () => void;
    onExport?: () => void;
    onFatalError?: (error: LeRobotViewerError) => void;
    showPlaybackBar?: boolean;
    showSidebar?: boolean;
    theme?: 'light' | 'dark' | 'system';
}

// @public
export type LoadingPhase = 'download' | 'index' | 'gunzip' | 'read';

// @public
export function Pagination(input: PaginationProps): React_3.JSX.Element;

// @public (undocumented)
export interface PaginationProps {
    // (undocumented)
    className?: string;
    // (undocumented)
    count: number;
    // (undocumented)
    onPageChange: (event: unknown, newPage: number) => void;
    // (undocumented)
    onRowsPerPageChange: (event: React_3.ChangeEvent<HTMLSelectElement>) => void;
    // (undocumented)
    page: number;
    // (undocumented)
    rowsPerPage: number;
    // (undocumented)
    rowsPerPageOptions?: number[];
}

// @public
export interface ParsedSourceUrl {
    hint?: string;
    // (undocumented)
    kind: SourceKind;
    raw: string;
    restorable?: boolean;
    sampleId?: string;
}

// @public
export type ProgressHandler = (info: ProgressInfo) => void;

// @public
export interface ProgressInfo {
    loaded?: number;
    message?: string;
    phase: LoadingPhase;
    total?: number;
}

// @public
export interface RemoteFileEntry {
    contentType?: string | null;
    logicalPath: string;
    presignedUrl: string;
    sizeBytes?: number | null;
}

// @public
export interface SampleDataset {
    // (undocumented)
    archiveUrl?: string;
    // (undocumented)
    coverImageUrl?: string;
    // (undocumented)
    description: string;
    // (undocumented)
    id: string;
    // (undocumented)
    name: string;
    // (undocumented)
    previewVideoUrl?: string;
    // (undocumented)
    title?: string;
    // (undocumented)
    url?: string;
    // (undocumented)
    version?: 'v2' | 'v3';
}

// @public
export const SampleDatasetCard: React_2.FC<SampleDatasetCardProps>;

// @public
export interface SampleDatasetCardProps {
    // (undocumented)
    fallbackImageUrl?: string;
    // (undocumented)
    onSelect: (sample: SampleDataset) => void | Promise<void>;
    // (undocumented)
    sample: SampleDataset;
}

// @public (undocumented)
export type SourceKind = 'remoteArchive' | 'localArchive' | 'directory' | 'sample' | 'unknown';

// @public
export function useDragAndDrop(callbacks: DragAndDropCallbacks): {
    isDragging: boolean;
};