0
# Pane System
1

2
Display components that render various content types including text, images, plots, and integration with popular visualization libraries. Panes automatically detect and display different data formats, providing a unified interface for content presentation.
3

4
## Capabilities
5

6
### Text and Markup Panes
7

8
Components for displaying formatted text content in various markup languages.
9

10
```python { .api }
11
class Str:
12
    """
13
    String display pane for plain text content.
14
    
15
    Parameters:
16
    - object: Text string to display
17
    - **params: Additional parameters
18
    """
19

20
class HTML:
21
    """
22
    HTML content pane for rendering HTML markup.
23
    
24
    Parameters:
25
    - object: HTML string or file path
26
    - **params: Additional parameters
27
    """
28

29
class Markdown:
30
    """
31
    Markdown content pane for rendering Markdown text.
32
    
33
    Parameters:
34
    - object: Markdown string or file path
35
    - extensions: List of Markdown extensions to enable
36
    - **params: Additional parameters
37
    """
38

39
class JSON:
40
    """
41
    JSON data display pane with syntax highlighting.
42
    
43
    Parameters:
44
    - object: JSON object or string
45
    - depth: Maximum depth to expand objects
46
    - **params: Additional parameters
47
    """
48

49
class LaTeX:
50
    """
51
    LaTeX equation pane for mathematical expressions.
52
    
53
    Parameters:
54
    - object: LaTeX equation string  
55
    - **params: Additional parameters
56
    """
57
```
58

59
### Image and Media Panes
60

61
Panes for displaying various image formats and media content.
62

63
```python { .api }
64
class Image:
65
    """
66
    Generic image pane that auto-detects image format.
67
    
68
    Parameters:
69
    - object: Image file path, URL, or binary data
70
    - width: Image width
71
    - height: Image height
72
    - **params: Additional parameters
73
    """
74

75
class PNG:
76
    """
77
    PNG image pane for PNG format images.
78
    
79
    Parameters:
80
    - object: PNG image data or file path
81
    - **params: Additional parameters
82
    """
83

84
class JPG:
85
    """
86
    JPEG image pane for JPEG format images.
87
    
88
    Parameters:
89
    - object: JPEG image data or file path
90
    - **params: Additional parameters
91
    """
92

93
class GIF:
94
    """
95
    GIF image pane for animated and static GIF images.
96
    
97
    Parameters:
98
    - object: GIF image data or file path
99
    - **params: Additional parameters
100
    """
101

102
class SVG:
103
    """
104
    SVG image pane for scalable vector graphics.
105
    
106
    Parameters:
107
    - object: SVG markup string or file path
108
    - **params: Additional parameters
109
    """
110

111
class PDF:
112
    """
113
    PDF document pane for displaying PDF files.
114
    
115
    Parameters:
116
    - object: PDF file path or binary data
117
    - **params: Additional parameters
118
    """
119

120
class Audio:
121
    """
122
    Audio player pane for audio file playback.
123
    
124
    Parameters:
125
    - object: Audio file path or URL
126
    - **params: Additional parameters
127
    """
128

129
class Video:
130
    """
131
    Video player pane for video file playback.
132
    
133
    Parameters:
134
    - object: Video file path or URL
135
    - **params: Additional parameters
136
    """
137
```
138

139
### Visualization Library Panes
140

141
Panes that integrate with popular Python visualization libraries.
142

143
```python { .api }
144
class Matplotlib:
145
    """
146
    Matplotlib figure pane for displaying matplotlib plots.
147
    
148
    Parameters:
149
    - object: Matplotlib figure object
150
    - dpi: Resolution for figure rendering
151
    - **params: Additional parameters
152
    """
153

154
class Bokeh:
155
    """
156
    Bokeh plot pane for displaying Bokeh visualizations.
157
    
158
    Parameters:
159
    - object: Bokeh plot object
160
    - **params: Additional parameters
161
    """
162

163
class Plotly:
164
    """
165
    Plotly figure pane for interactive Plotly charts.
166
    
167
    Parameters:
168
    - object: Plotly figure object
169
    - **params: Additional parameters
170
    """
171

172
class HoloViews:
173
    """
174
    HoloViews object pane for HoloViews visualizations.
175
    
176
    Parameters:
177
    - object: HoloViews element or layout
178
    - **params: Additional parameters
179
    """
180

181
class Interactive:
182
    """
183
    HoloViews interactive pane with dynamic controls.
184
    
185
    Parameters:
186
    - object: HoloViews DynamicMap or function
187
    - **params: Additional parameters
188
    """
189

190
class Vega:
191
    """
192
    Vega-Lite pane for Vega-Lite specifications.
193
    
194
    Parameters:
195
    - object: Vega-Lite specification dict
196
    - **params: Additional parameters
197
    """
198

199
class ECharts:
200
    """
201
    Apache ECharts pane for ECharts visualizations.
202
    
203
    Parameters:
204
    - object: ECharts configuration dict
205
    - **params: Additional parameters
206
    """
207

208
class Perspective:
209
    """
210
    Perspective.js pane for interactive data visualization.
211
    
212
    Parameters:
213
    - object: DataFrame or data for visualization
214
    - **params: Additional parameters
215
    """
216

217
class DeckGL:
218
    """
219
    Deck.gl pane for WebGL-powered data visualizations.
220
    
221
    Parameters:
222
    - object: Deck.gl JSON specification
223
    - **params: Additional parameters
224
    """
225

226
class Vizzu:
227
    """
228
    Vizzu animated charts pane for dynamic data storytelling.
229
    
230
    Parameters:
231
    - object: Vizzu chart configuration
232
    - **params: Additional parameters
233
    """
234

235
class RGGPlot:
236
    """
237
    R ggplot2 pane for R-based statistical graphics.
238
    
239
    Parameters:  
240
    - object: R ggplot2 object
241
    - **params: Additional parameters
242
    """
243
```
244

245
### Data Science Integration Panes
246

247
Panes that integrate with scientific computing and data analysis libraries.
248

249
```python { .api }
250
class VTK:
251
    """
252
    VTK 3D visualization pane for scientific data.
253
    
254
    Parameters:
255
    - object: VTK render window or dataset
256
    - **params: Additional parameters
257
    """
258

259
class VTKVolume:
260
    """
261
    VTK volume rendering pane for 3D volume data.
262
    
263
    Parameters:
264
    - object: VTK volume data
265
    - **params: Additional parameters  
266
    """
267

268
class Streamz:
269
    """
270
    Streamz stream pane for real-time data streams.
271
    
272
    Parameters:
273
    - object: Streamz stream object
274
    - **params: Additional parameters
275
    """
276
```
277

278
### Widget Integration Panes
279

280
Panes for integrating external widget libraries and frameworks.
281

282
```python { .api }
283
class IPyWidget:
284
    """
285
    IPython widget wrapper pane for Jupyter widgets.
286
    
287
    Parameters:
288
    - object: IPython widget object
289
    - **params: Additional parameters
290
    """
291

292
class IPyLeaflet:
293
    """
294
    IPython leaflet maps pane for interactive maps.
295
    
296
    Parameters:
297
    - object: IPython leaflet map object  
298
    - **params: Additional parameters
299
    """
300

301
class Reacton:
302
    """
303
    Reacton component wrapper pane for React-style components.
304
    
305
    Parameters:
306
    - object: Reacton component
307
    - **params: Additional parameters
308
    """
309

310
class Textual:
311
    """
312
    Textual UI pane for terminal-based user interfaces.
313
    
314
    Parameters:
315
    - object: Textual app object
316
    - **params: Additional parameters
317
    """
318
```
319

320
### Utility Panes
321

322
General-purpose panes for various display needs.
323

324
```python { .api }
325
class Alert:
326
    """
327
    Alert message pane for notifications and warnings.
328
    
329
    Parameters:
330
    - object: Alert message text
331
    - alert_type: Alert style ('primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark')
332
    - **params: Additional parameters
333
    """
334

335
class Placeholder:
336
    """
337
    Placeholder pane for temporary content during loading.
338
    
339
    Parameters:
340
    - **params: Additional parameters
341
    """
342

343
class YT:
344
    """
345
    YouTube video pane for embedding YouTube videos.
346
    
347
    Parameters:
348
    - object: YouTube video URL or ID
349
    - **params: Additional parameters
350
    """
351
```
352

353
## Usage Examples
354

355
### Basic Content Display
356

357
```python
358
import panel as pn
359

360
# Display different content types
361
html_pane = pn.pane.HTML("<h1>Welcome</h1><p>This is HTML content.</p>")
362
markdown_pane = pn.pane.Markdown("## Markdown Title\nThis is **markdown** content.")
363
json_pane = pn.pane.JSON({"key": "value", "number": 42})
364

365
# Arrange in layout
366
content = pn.Column(html_pane, markdown_pane, json_pane)
367
```
368

369
### Image Display
370

371
```python
372
# Display images from various sources
373
local_image = pn.pane.PNG("path/to/image.png")
374
url_image = pn.pane.Image("https://example.com/image.jpg")
375
svg_graphic = pn.pane.SVG("<svg>...</svg>")
376

377
image_gallery = pn.Row(local_image, url_image, svg_graphic)
378
```
379

380
### Visualization Integration
381

382
```python
383
import matplotlib.pyplot as plt
384
import plotly.express as px
385

386
# Create matplotlib plot
387
fig, ax = plt.subplots()
388
ax.plot([1, 2, 3, 4], [1, 4, 2, 3])
389
mpl_pane = pn.pane.Matplotlib(fig)
390

391
# Create plotly plot  
392
plotly_fig = px.scatter(df, x="x", y="y", color="category")
393
plotly_pane = pn.pane.Plotly(plotly_fig)
394

395
# Combine visualizations
396
viz_dashboard = pn.Row(mpl_pane, plotly_pane)
397
```
398

399
### Dynamic Content
400

401
```python
402
import param
403

404
class DataViewer(param.Parameterized):
405
    data_source = param.Selector(default='A', objects=['A', 'B', 'C'])
406
    
407
    def view(self):
408
        if self.data_source == 'A':
409
            return pn.pane.DataFrame(df_a)
410
        elif self.data_source == 'B':
411
            return pn.pane.Plotly(plot_b)
412
        else:
413
            return pn.pane.HTML("<h2>No data selected</h2>")
414

415
viewer = DataViewer()
416
dynamic_pane = pn.bind(viewer.view, viewer.param.data_source)
417
```
418

419
## Automatic Pane Selection
420

421
Panel automatically selects the appropriate pane type based on the object type:
422

423
```python
424
# These will automatically use the correct pane
425
pn.panel(matplotlib_figure)  # -> Matplotlib pane
426
pn.panel(plotly_figure)      # -> Plotly pane  
427
pn.panel(pandas_dataframe)   # -> DataFrame pane
428
pn.panel("<h1>HTML</h1>")    # -> HTML pane
429
pn.panel("## Markdown")      # -> Markdown pane
430
```