Getting Started with React

Use the Universal Data Tool in React Applications.

Quick Start: CodeSandbox Example

Example Loading Image Classification Interface


npm install universal-data-tool


The <UniversalDataViewer /> component has every interface baked in. Just provide a dataset in the dataset prop to view any dataset!

import React from "react";
import UniversalSampleEditor from "universal-data-tool";
export default function App() {
return (
<div className="App">
// Read more about this format here:
type: "image_classification",
labels: ["cat", "dog"]
imageUrl: ""
onExit={(action: "go-to-prev" | "go-to-next" | undefined) => {
// Called when user hits "Save", "Next", or "Prev"
// when data is saved this is called
onModifySample={(sampleIndex, newSampleData) => {
// do something