OutputArea
Wrapper component for rendering multiple Jupyter outputs with collapsible state and scroll behavior
Processing data...
Loading model...
OutputArea handles rendering multiple Jupyter outputs with:
- Output type routing - Automatically routes to the right renderer for each output type
- Collapsible state - Toggle output visibility with a collapse button
- Scroll behavior - Set
maxHeightto enable scrolling for large outputs - Empty state - Renders nothing when there are no outputs
Installation
npx shadcn@latest add https://nteract-elements.vercel.app/r/output-area.jsonCopy from nteract/elements.
Usage
import { OutputArea } from "@/registry/cell/OutputArea"
export function CellWithOutputs({ cell }) {
const [collapsed, setCollapsed] = useState(false)
return (
<OutputArea
outputs={cell.outputs}
collapsed={collapsed}
onToggleCollapse={() => setCollapsed(!collapsed)}
maxHeight={400}
/>
)
}Examples
Simple Output
42<OutputArea outputs={[{
output_type: "execute_result",
data: { "text/plain": "42" },
execution_count: 1,
}]} />Stream and Result
Processing data...
Loading model...
<OutputArea outputs={[
{
output_type: "stream",
name: "stdout",
text: "Processing data...\nLoading model...\n",
},
{
output_type: "execute_result",
data: { "text/plain": "{'accuracy': 0.95}" },
execution_count: 2,
},
]} />Error Output
ValueError: invalid literal for int() with base 10: 'hello'---------------------------------------------------------------------------
ValueError Traceback (most recent call last)
Cell In[1], line 1
----> 1 int('hello')
ValueError: invalid literal for int() with base 10: 'hello'<OutputArea outputs={[{
output_type: "error",
ename: "ValueError",
evalue: "invalid literal for int()",
traceback: ["..."],
}]} />Collapsible
Processing data...
Loading model...
const [collapsed, setCollapsed] = useState(false)
<OutputArea
outputs={outputs}
collapsed={collapsed}
onToggleCollapse={() => setCollapsed(!collapsed)}
/>With Max Height
Processing data...
Loading model...
Processing data...
Loading model...
Processing data...
Loading model...
<OutputArea
outputs={largeOutputs}
maxHeight={150}
/>Output Types
OutputArea handles all Jupyter output types:
| Type | Description | Renderer |
|---|---|---|
execute_result | Cell execution result | MediaRouter |
display_data | Rich display output | MediaRouter |
stream | stdout/stderr text | AnsiStreamOutput |
error | Exception traceback | AnsiErrorOutput |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
outputs | JupyterOutput[] | — | Array of Jupyter outputs to render |
collapsed | boolean | false | Whether outputs are collapsed |
onToggleCollapse | () => void | — | Callback when collapse is toggled |
maxHeight | number | — | Maximum height in pixels before scrolling |
className | string | — | Additional CSS classes |
renderers | Record<string, CustomRenderer> | — | Custom renderers for MediaRouter |
priority | readonly string[] | — | MIME type priority for MediaRouter |
unsafe | boolean | false | Allow unsafe HTML rendering |
JupyterOutput Type
type JupyterOutput =
| {
output_type: "execute_result" | "display_data";
data: Record<string, unknown>;
metadata?: Record<string, unknown>;
execution_count?: number | null;
}
| {
output_type: "stream";
name: "stdout" | "stderr";
text: string | string[];
}
| {
output_type: "error";
ename: string;
evalue: string;
traceback: string[];
};