0
# JupyterLab Output Area
1

2
The JupyterLab Output Area package provides components for rendering notebook execution results and interactive output in JupyterLab applications. It handles display of multiple MIME types, stream outputs, and user input requests through a comprehensive model-view architecture.
3

4
## Package Information
5

6
- **Package Name**: @jupyterlab/outputarea
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @jupyterlab/outputarea`
10

11
## Core Imports
12

13
```typescript
14
import {
15
  OutputArea,
16
  OutputAreaModel,
17
  IOutputAreaModel,
18
  SimplifiedOutputArea,
19
  IOutputPrompt,
20
  OutputPrompt,
21
  IStdin,
22
  Stdin
23
} from "@jupyterlab/outputarea";
24
```
25

26
For CommonJS:
27

28
```javascript
29
const {
30
  OutputArea,
31
  OutputAreaModel,
32
  IOutputAreaModel,
33
  SimplifiedOutputArea,
34
  IOutputPrompt,
35
  OutputPrompt,
36
  IStdin,
37
  Stdin
38
} = require("@jupyterlab/outputarea");
39
```
40

41
## Basic Usage
42

43
```typescript
44
import { OutputArea, OutputAreaModel } from "@jupyterlab/outputarea";
45
import { RenderMimeRegistry } from "@jupyterlab/rendermime";
46

47
// Create an output area model
48
const model = new OutputAreaModel({
49
  trusted: true
50
});
51

52
// Create a rendermime registry (you would typically configure this)
53
const rendermime = new RenderMimeRegistry();
54

55
// Create the output area widget
56
const outputArea = new OutputArea({
57
  model,
58
  rendermime
59
});
60

61
// Add output to the model
62
model.add({
63
  output_type: "stream",
64
  name: "stdout",
65
  text: ["Hello, World!\n"]
66
});
67

68
// The output will be automatically rendered in the widget
69
```
70

71
## Architecture
72

73
The JupyterLab Output Area is built around several key components:
74

75
- **Model Layer**: `OutputAreaModel` manages output data and state changes through observable patterns
76
- **Widget Layer**: `OutputArea` provides the visual rendering and user interaction components
77
- **Content Factory**: Customizable factories for creating output prompts and input widgets
78
- **MIME Integration**: Deep integration with JupyterLab's rendermime system for multiple output formats
79
- **Stream Management**: Intelligent stream output consolidation and text processing
80
- **Input Handling**: Support for kernel input requests with history and validation
81

82
## Capabilities
83

84
### Output Area Model
85

86
Core data model for managing notebook output items with observable state changes and JSON serialization support.
87

88
```typescript { .api }
89
interface IOutputAreaModel extends IDisposable {
90
  readonly stateChanged: ISignal<IOutputAreaModel, number>;
91
  readonly changed: ISignal<IOutputAreaModel, IOutputAreaModel.ChangedArgs>;
92
  readonly length: number;
93
  trusted: boolean;
94
  readonly contentFactory: IOutputAreaModel.IContentFactory;
95
  
96
  get(index: number): IOutputModel;
97
  add(output: nbformat.IOutput): number;
98
  remove(index: number): void;
99
  set(index: number, output: nbformat.IOutput): void;
100
  clear(wait?: boolean): void;
101
  fromJSON(values: nbformat.IOutput[]): void;
102
  toJSON(): nbformat.IOutput[];
103
}
104

105
class OutputAreaModel implements IOutputAreaModel {
106
  constructor(options?: IOutputAreaModel.IOptions);
107
  // ... implements all IOutputAreaModel methods
108
}
109
```
110

111
[Output Area Model](./model.md)
112

113
### Output Area Widget
114

115
Visual component for rendering output areas with full widget lifecycle management and user interaction support.
116

117
```typescript { .api }
118
class OutputArea extends Widget {
119
  constructor(options: OutputArea.IOptions);
120
  
121
  readonly contentFactory: OutputArea.IContentFactory;
122
  readonly model: IOutputAreaModel;
123
  readonly rendermime: IRenderMimeRegistry;
124
  readonly widgets: ReadonlyArray<Widget>;
125
  readonly outputLengthChanged: ISignal<this, number>;
126
  
127
  future: Kernel.IShellFuture<
128
    KernelMessage.IExecuteRequestMsg,
129
    KernelMessage.IExecuteReplyMsg
130
  >;
131
  maxNumberOutputs: number;
132
  readonly pendingInput: boolean;
133
}
134
```
135

136
[Output Area Widget](./widget.md)
137

138
### Simplified Output Area
139

140
Streamlined output area variant without input handling capabilities, ideal for read-only displays.
141

142
```typescript { .api }
143
class SimplifiedOutputArea extends OutputArea {
144
  constructor(options: OutputArea.IOptions);
145
  // Inherits all OutputArea functionality except input handling
146
}
147
```
148

149
[Output Area Widget](./widget.md)
150

151
### Input Components
152

153
Interactive input widgets for handling kernel input requests with history and validation.
154

155
```typescript { .api }
156
interface IStdin extends Widget {
157
  readonly value: Promise<string>;
158
}
159

160
class Stdin extends Widget implements IStdin {
161
  constructor(options: Stdin.IOptions);
162
  readonly value: Promise<string>;
163
  handleEvent(event: KeyboardEvent): void;
164
}
165
```
166

167
[Output Area Widget](./widget.md)
168

169
## Core Types
170

171
```typescript { .api }
172
// Change arguments for observable list changes
173
type IOutputAreaModel.ChangedArgs = IObservableList.IChangedArgs<IOutputModel>;
174

175
// Options for creating output area model
176
interface IOutputAreaModel.IOptions {
177
  values?: nbformat.IOutput[];
178
  trusted?: boolean;
179
  contentFactory?: IOutputAreaModel.IContentFactory;
180
}
181

182
// Options for creating output area widget
183
interface OutputArea.IOptions {
184
  model: IOutputAreaModel;
185
  contentFactory?: OutputArea.IContentFactory;
186
  rendermime: IRenderMimeRegistry;
187
  maxNumberOutputs?: number;
188
  promptOverlay?: boolean;
189
  translator?: ITranslator;
190
  inputHistoryScope?: 'global' | 'session';
191
  showInputPlaceholder?: boolean;
192
}
193

194
// Content factories for customization
195
interface IOutputAreaModel.IContentFactory {
196
  createOutputModel(options: IOutputModel.IOptions): IOutputModel;
197
}
198

199
interface OutputArea.IContentFactory {
200
  createOutputPrompt(): IOutputPrompt;
201
  createStdin(options: Stdin.IOptions): IStdin;
202
}
203
```