Skip to main content
torch.js has not been released yet.
torch.js logotorch.js logotorch.js
PlaygroundContact
Login
Documentation
IntroductionType SafetyTensor ExpressionsTensor IndexingEinsumEinopsAutogradTraining a ModelProfiling & MemoryPyTorch MigrationBest PracticesRuntimesPerformancePyTorch CompatibilityBenchmarksDType Coverage
IntroductionComponent GalleryTraining DashboardsVisualizing TensorsGPU AccelerationInteractive InputsThemingStorybook
torch.js· 2026
LegalTerms of UsePrivacy Policy
  1. docs
  2. React UI
  3. Component Gallery

Component Gallery

Browse all available components in @torchjsorg/react-ui. Each card shows a live preview of the component. Click to view full documentation or open in Storybook for interactive exploration.

Visualization

Components for visualizing tensors, attention patterns, and model outputs.

Loading...
Visualization
View DocsStorybook

TensorViewer

Display 1D-4D tensors as heatmaps with customizable color scales

Loading...
Visualization
View DocsStorybook

AttentionViewer

Visualize transformer attention patterns with multi-head support

Loading...
Analysis
View DocsStorybook

EmbeddingViewer

Interactive 2D scatter plot for embedding visualization

Loading...
Visualization
View DocsStorybook

TokenViewer

Display tokens with color-coded importance scores

Loading...
Visualization
View DocsStorybook

HeatmapOverlay

Overlay heatmaps on images for saliency visualization

Loading...
Visualization
View DocsStorybook

SoftmaxHeatmap

Visualize softmax probability distributions

Training & Monitoring

Components for monitoring model training in real-time.

Loading...
Training
View DocsStorybook

TrainingStats

Display training metrics like loss, accuracy, and progress

Loading...
Training
View DocsStorybook

TrainingControls

Start, pause, and stop training with intuitive controls

Loading...
Training
View DocsStorybook

MetricChart

Plot multiple metrics over epochs with line charts

Loading...
Training
View DocsStorybook

LogTerminal

Display training logs with color-coded severity levels

Loading...
Training
View DocsStorybook

DatasetProgress

Show dataset processing progress with file info

Loading...
Training
View DocsStorybook

EnergyPlot

Visualize energy/loss landscape during optimization

Analysis

Components for evaluating and analyzing model performance.

Loading...
Analysis
View DocsStorybook

ConfusionMatrix

Display classification results with optional normalization

Loading...
Analysis
View DocsStorybook

FeatureImportance

Bar chart showing feature importance scores

Loading...
Analysis
View DocsStorybook

GradientFlow

Visualize gradient magnitudes through network layers

Loading...
Analysis
View DocsStorybook

ROCCurve

Plot ROC curves for binary classification evaluation

Loading...
Analysis
View DocsStorybook

PRCurve

Precision-Recall curves for imbalanced datasets

Loading...
Analysis
View DocsStorybook

PredictionDisplay

Show model predictions with probability bars

Loading...
Analysis
View DocsStorybook

WeightHistogram

Histogram of weight distributions in layers

Loading...
Analysis
View DocsStorybook

ModelSummary

Display model architecture with layer details

Loading...
Analysis
View DocsStorybook

ScatterPlot

2D scatter plots for data exploration

Parameters & Input

Components for collecting user input and configuring parameters.

Loading...
Input
View DocsStorybook

ParamSlider

Adjustable slider for numeric parameters

Loading...
Input
View DocsStorybook

ParamSelect

Dropdown selector for categorical options

Loading...
Input
View DocsStorybook

ParamCheckbox

Toggle checkbox for boolean parameters

Loading...
Input
View DocsStorybook

ParamInput

Text/number input for arbitrary values

Loading...
Input
View DocsStorybook

ImageInput

Image upload with preview and preprocessing

Loading...
Input
View DocsStorybook

TextInput

Text input for prompts and queries

Loading...
Input
View DocsStorybook

FileUpload

Drag-and-drop file upload component

Loading...
Input
View DocsStorybook

FileDownload

Download button for model files

Charts & Plots

Components for data visualization and plotting.

Loading...
Charts
View DocsStorybook

FunctionPlot

Plot mathematical functions with customizable ranges

Loading...
Charts
View DocsStorybook

Waveform

Display audio waveforms and time series

Loading...
Charts
View DocsStorybook

SequenceTimeline

Timeline view for sequential events

Audio

Components for audio playback and recording.

Loading...
Audio
View DocsStorybook

AudioPlayer

Audio playback with waveform visualization

Loading...
Audio
View DocsStorybook

AudioRecorder

Record audio with live waveform display

Model I/O

Components for saving and loading models.

Loading...
Model
View DocsStorybook

ModelActions

Save and load model buttons with file handling

Loading...
Input
View DocsStorybook

ImageEditor

Draw or upload images for model input

Loading...
Layout
View DocsStorybook

TorchEmbed

Embeddable container for torch.js demos

Network & Graph

Components for visualizing network architectures and graphs.

Loading...
Network
View DocsStorybook

FlowGraph

Directed flow graph for pipeline visualization

Loading...
Network
View DocsStorybook

NetworkGraph

Force-directed graph for network visualization

UI Components

General-purpose UI components for ML applications.

Loading...
UI
View DocsStorybook

ChatHistory

Display chat conversations with user/assistant roles

Loading...
UI
View DocsStorybook

ActionBar

Toolbar with action buttons

Loading...
UI
View DocsStorybook

ImageCompare

Side-by-side image comparison slider

Loading...
UI
View DocsStorybook

AnimatedGrid

Animated grid for loading and transitions

Loading...
UI
View DocsStorybook

ImageGrid

Grid layout for displaying multiple images

GPU-Accelerated

High-performance components that render directly from GPU memory. These require WebGPU support.

Checking WebGPU support...
GPU
View DocsStorybook

GPUHeatmap

Zero-copy heatmap rendering from WebGPU tensors

Checking WebGPU support...
GPU
View DocsStorybook

GPUPointCloud

Interactive 3D point cloud with millions of points

Checking WebGPU support...
GPU
View DocsStorybook

GPUTrainingDashboard

Multi-panel real-time training visualization

Checking WebGPU support...
GPU
View DocsStorybook

GPUStreamingChart

High-performance streaming line charts

Checking WebGPU support...
GPU
View DocsStorybook

GPUHistogram

GPU-accelerated histogram rendering

Checking WebGPU support...
GPU
View DocsStorybook

GPUConfusionMatrix

GPU-rendered confusion matrix for large class counts

Checking WebGPU support...
GPU
View DocsStorybook

GPUAttentionFlow

GPU-accelerated attention flow visualization

Checking WebGPU support...
GPU
View DocsStorybook

GPUGradientFlow

GPU-rendered gradient flow through layers

Checking WebGPU support...
GPU
View DocsStorybook

GPUSaliencyMap

GPU-accelerated saliency map overlay

Checking WebGPU support...
GPU
View DocsStorybook

GPUKernelGrid

Visualize convolution kernels from GPU

Checking WebGPU support...
GPU
View DocsStorybook

GPUEmbedding

GPU-accelerated embedding visualization

GPU
View DocsStorybook

GPURocPrCurve

GPU-rendered ROC and PR curves

All Components

For a complete interactive experience with all component variants and live code examples, visit our Storybook:

Browse all components at ui.torchjs.org

Previous
Introduction
Next
Training Dashboards
Checking WebGPU support...
Checking WebGPU support...
GPU
View DocsStorybook

GPUModelArchitecture

GPU-rendered model architecture diagram