or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

Files

docs

advanced-features.mdcaching-performance.mdcomponents-config.mddisplay-elements.mdindex.mdinput-widgets.mdlayout-containers.mdnavigation-pages.mdstate-management.mduser-auth.md

display-elements.mddocs/

0

# Display Elements

1

2

Core functions for displaying text, data, charts, and media content. These functions form the foundation of Streamlit's visualization capabilities and enable rich content presentation without HTML knowledge.

3

4

## Capabilities

5

6

### Text Display

7

8

Functions for displaying formatted text content with various styling and formatting options.

9

10

```python { .api }

11

def title(body, anchor=None, *, help=None):

12

"""

13

Display large title text as the main heading of the app.

14

15

Args:

16

body (str): The text to display

17

anchor (str, optional): The anchor name for the header

18

help (str, optional): Tooltip text

19

"""

20

21

def header(body, anchor=None, *, help=None, divider=False):

22

"""

23

Display header text as a section heading.

24

25

Args:

26

body (str): The text to display

27

anchor (str, optional): The anchor name for the header

28

help (str, optional): Tooltip text

29

divider (bool): Whether to show a divider line below

30

"""

31

32

def subheader(body, anchor=None, *, help=None, divider=False):

33

"""

34

Display subheader text as a subsection heading.

35

36

Args:

37

body (str): The text to display

38

anchor (str, optional): The anchor name for the header

39

help (str, optional): Tooltip text

40

divider (bool): Whether to show a divider line below

41

"""

42

43

def caption(body, *, help=None):

44

"""

45

Display small caption text in muted color.

46

47

Args:

48

body (str): The text to display

49

help (str, optional): Tooltip text

50

"""

51

52

def text(body, *, help=None):

53

"""

54

Display fixed-width preformatted text.

55

56

Args:

57

body (str): The text to display

58

help (str, optional): Tooltip text

59

"""

60

61

def markdown(body, *, unsafe_allow_html=False, help=None):

62

"""

63

Display Markdown-formatted text with rich formatting support.

64

65

Args:

66

body (str): Markdown text to display

67

unsafe_allow_html (bool): Whether to allow HTML in markdown

68

help (str, optional): Tooltip text

69

"""

70

71

def latex(body, *, help=None):

72

"""

73

Display LaTeX mathematical expressions using KaTeX.

74

75

Args:

76

body (str): LaTeX expression to display

77

help (str, optional): Tooltip text

78

"""

79

80

def code(body, language=None, *, line_numbers=False, help=None):

81

"""

82

Display code block with syntax highlighting.

83

84

Args:

85

body (str): Code to display

86

language (str, optional): Programming language for syntax highlighting

87

line_numbers (bool): Whether to show line numbers

88

help (str, optional): Tooltip text

89

"""

90

91

def html(body, *, help=None):

92

"""

93

Display raw HTML content.

94

95

Args:

96

body (str): HTML content to display

97

help (str, optional): Tooltip text

98

"""

99

100

def divider():

101

"""Display a horizontal divider line."""

102

```

103

104

### Data Display

105

106

Functions for displaying structured data including tables, dataframes, and key metrics.

107

108

```python { .api }

109

def dataframe(data, width=None, height=None, *, use_container_width=False, hide_index=None, column_order=None, column_config=None):

110

"""

111

Display interactive dataframe with sorting, filtering, and selection.

112

113

Args:

114

data: pandas DataFrame, numpy array, or dict-like data

115

width (int, optional): Width in pixels

116

height (int, optional): Height in pixels

117

use_container_width (bool): Whether to use full container width

118

hide_index (bool, optional): Whether to hide the index column

119

column_order (list, optional): Order of columns to display

120

column_config (dict, optional): Column configuration mapping

121

122

Returns:

123

The displayed data selection if interactive

124

"""

125

126

def data_editor(data, width=None, height=None, *, use_container_width=False, hide_index=None, column_order=None, column_config=None, num_rows="fixed", disabled=None, key=None, on_change=None):

127

"""

128

Display editable dataframe with full editing capabilities.

129

130

Args:

131

data: pandas DataFrame, numpy array, or dict-like data

132

width (int, optional): Width in pixels

133

height (int, optional): Height in pixels

134

use_container_width (bool): Whether to use full container width

135

hide_index (bool, optional): Whether to hide the index column

136

column_order (list, optional): Order of columns to display

137

column_config (dict, optional): Column configuration mapping

138

num_rows (str): Row editing mode ("fixed", "dynamic")

139

disabled (bool or list): Disable editing for columns

140

key (str, optional): Widget key for state management

141

on_change (callable, optional): Callback when data changes

142

143

Returns:

144

The edited dataframe

145

"""

146

147

def table(data, *, help=None):

148

"""

149

Display static table without interactive features.

150

151

Args:

152

data: pandas DataFrame, numpy array, or dict-like data

153

help (str, optional): Tooltip text

154

"""

155

156

def metric(label, value, delta=None, *, delta_color="normal", help=None, label_visibility="visible"):

157

"""

158

Display key metric with optional delta indicator.

159

160

Args:

161

label (str): Metric label

162

value (str or number): Metric value

163

delta (str or number, optional): Change from previous value

164

delta_color (str): Color of delta ("normal", "inverse", "off")

165

help (str, optional): Tooltip text

166

label_visibility (str): Label visibility ("visible", "hidden", "collapsed")

167

"""

168

169

def json(body, *, expanded=False, help=None):

170

"""

171

Display JSON data as expandable tree structure.

172

173

Args:

174

body: JSON-serializable object

175

expanded (bool): Whether to start expanded

176

help (str, optional): Tooltip text

177

"""

178

```

179

180

### Chart Display

181

182

Built-in charting functions for common visualization types with automatic formatting and interactivity.

183

184

```python { .api }

185

def line_chart(data, *, x=None, y=None, color=None, width=None, height=None, use_container_width=False, help=None):

186

"""

187

Display line chart connecting data points.

188

189

Args:

190

data: pandas DataFrame or dict-like data

191

x (str, optional): Column name for x-axis

192

y (str or list, optional): Column name(s) for y-axis

193

color (str, optional): Column name for color grouping

194

width (int, optional): Chart width in pixels

195

height (int, optional): Chart height in pixels

196

use_container_width (bool): Whether to use full container width

197

help (str, optional): Tooltip text

198

"""

199

200

def area_chart(data, *, x=None, y=None, color=None, width=None, height=None, use_container_width=False, help=None):

201

"""

202

Display area chart with filled regions under lines.

203

204

Args:

205

data: pandas DataFrame or dict-like data

206

x (str, optional): Column name for x-axis

207

y (str or list, optional): Column name(s) for y-axis

208

color (str, optional): Column name for color grouping

209

width (int, optional): Chart width in pixels

210

height (int, optional): Chart height in pixels

211

use_container_width (bool): Whether to use full container width

212

help (str, optional): Tooltip text

213

"""

214

215

def bar_chart(data, *, x=None, y=None, color=None, width=None, height=None, use_container_width=False, help=None):

216

"""

217

Display bar chart with categorical data.

218

219

Args:

220

data: pandas DataFrame or dict-like data

221

x (str, optional): Column name for x-axis

222

y (str or list, optional): Column name(s) for y-axis

223

color (str, optional): Column name for color grouping

224

width (int, optional): Chart width in pixels

225

height (int, optional): Chart height in pixels

226

use_container_width (bool): Whether to use full container width

227

help (str, optional): Tooltip text

228

"""

229

230

def scatter_chart(data, *, x=None, y=None, color=None, size=None, width=None, height=None, use_container_width=False, help=None):

231

"""

232

Display scatter plot with individual data points.

233

234

Args:

235

data: pandas DataFrame or dict-like data

236

x (str, optional): Column name for x-axis

237

y (str, optional): Column name for y-axis

238

color (str, optional): Column name for color grouping

239

size (str, optional): Column name for point size

240

width (int, optional): Chart width in pixels

241

height (int, optional): Chart height in pixels

242

use_container_width (bool): Whether to use full container width

243

help (str, optional): Tooltip text

244

"""

245

246

def map(data, *, latitude=None, longitude=None, color=None, size=None, zoom=None, use_container_width=False, help=None):

247

"""

248

Display map with data points overlaid on geographic coordinates.

249

250

Args:

251

data: pandas DataFrame with geographic data

252

latitude (str, optional): Column name for latitude values

253

longitude (str, optional): Column name for longitude values

254

color (str, optional): Column name for color grouping

255

size (str, optional): Column name for point size

256

zoom (int, optional): Initial zoom level

257

use_container_width (bool): Whether to use full container width

258

help (str, optional): Tooltip text

259

"""

260

```

261

262

### Advanced Charts

263

264

Integration with popular charting libraries for sophisticated visualizations.

265

266

```python { .api }

267

def altair_chart(altair_chart, *, use_container_width=False, help=None):

268

"""

269

Display Altair/Vega-Lite chart with full customization.

270

271

Args:

272

altair_chart: Altair Chart object

273

use_container_width (bool): Whether to use full container width

274

help (str, optional): Tooltip text

275

"""

276

277

def vega_lite_chart(data, spec, *, use_container_width=False, help=None):

278

"""

279

Display chart using Vega-Lite specification.

280

281

Args:

282

data: Chart data

283

spec (dict): Vega-Lite specification

284

use_container_width (bool): Whether to use full container width

285

help (str, optional): Tooltip text

286

"""

287

288

def plotly_chart(figure_or_data, *, use_container_width=False, sharing="streamlit", help=None):

289

"""

290

Display interactive Plotly chart with full interactivity.

291

292

Args:

293

figure_or_data: Plotly Figure object or data

294

use_container_width (bool): Whether to use full container width

295

sharing (str): Sharing mode for Plotly

296

help (str, optional): Tooltip text

297

"""

298

299

def bokeh_chart(figure, *, use_container_width=False, help=None):

300

"""

301

Display Bokeh plot with interactive capabilities.

302

303

Args:

304

figure: Bokeh Figure object

305

use_container_width (bool): Whether to use full container width

306

help (str, optional): Tooltip text

307

"""

308

309

def pyplot(fig=None, *, clear_figure=None, use_container_width=False, help=None):

310

"""

311

Display Matplotlib figure with optional automatic clearing.

312

313

Args:

314

fig (matplotlib.figure.Figure, optional): Figure to display

315

clear_figure (bool, optional): Whether to clear figure after display

316

use_container_width (bool): Whether to use full container width

317

help (str, optional): Tooltip text

318

"""

319

320

def graphviz_chart(figure_or_dot, *, use_container_width=False, help=None):

321

"""

322

Display Graphviz diagram from DOT notation or figure.

323

324

Args:

325

figure_or_dot: Graphviz figure or DOT string

326

use_container_width (bool): Whether to use full container width

327

help (str, optional): Tooltip text

328

"""

329

330

def pydeck_chart(pydeck_obj, *, use_container_width=False, help=None):

331

"""

332

Display 3D visualization using PyDeck for geographic data.

333

334

Args:

335

pydeck_obj: PyDeck chart object

336

use_container_width (bool): Whether to use full container width

337

help (str, optional): Tooltip text

338

"""

339

```

340

341

### Media Display

342

343

Functions for displaying images, audio, video, and document content.

344

345

```python { .api }

346

def image(image, caption=None, width=None, *, use_column_width=None, clamp=False, channels="RGB", output_format="auto", help=None):

347

"""

348

Display image with optional caption and sizing controls.

349

350

Args:

351

image: PIL Image, numpy array, or image URL/path

352

caption (str, optional): Image caption

353

width (int, optional): Image width in pixels

354

use_column_width (bool, optional): Whether to use column width

355

clamp (bool): Whether to clamp image values to valid range

356

channels (str): Color channel format ("RGB", "BGR")

357

output_format (str): Output format ("PNG", "JPEG", "auto")

358

help (str, optional): Tooltip text

359

"""

360

361

def audio(data, *, format="audio/wav", start_time=0, sample_rate=None, help=None, loop=False, autoplay=False, end_time=None):

362

"""

363

Display audio player with playback controls.

364

365

Args:

366

data: Audio data as bytes, file path, or URL

367

format (str): MIME type of audio format

368

start_time (int): Start playback time in seconds

369

sample_rate (int, optional): Sample rate for raw audio

370

help (str, optional): Tooltip text

371

loop (bool): Whether to loop playback

372

autoplay (bool): Whether to start playing automatically

373

end_time (int, optional): End playback time in seconds

374

"""

375

376

def video(data, *, format="video/mp4", start_time=0, help=None, loop=False, autoplay=False, subtitles=None, end_time=None, muted=False):

377

"""

378

Display video player with full playback controls.

379

380

Args:

381

data: Video data as bytes, file path, or URL

382

format (str): MIME type of video format

383

start_time (int): Start playback time in seconds

384

help (str, optional): Tooltip text

385

loop (bool): Whether to loop playback

386

autoplay (bool): Whether to start playing automatically

387

subtitles (str, optional): Subtitle file path or URL

388

end_time (int, optional): End playback time in seconds

389

muted (bool): Whether to start muted

390

"""

391

392

def pdf(data, *, width=None, help=None):

393

"""

394

Display PDF document with page navigation and zoom controls.

395

396

Args:

397

data: PDF data as bytes, file path, or URL

398

width (int, optional): Display width in pixels

399

help (str, optional): Tooltip text

400

"""

401

```

402

403

### Utility Display Functions

404

405

Additional display functions for badges, help, and generic content.

406

407

```python { .api }

408

def badge(label, *, icon=None, color="blue"):

409

"""

410

Display small badge with text content.

411

412

Args:

413

label (str): Badge text content

414

icon (str, optional): Optional icon or emoji

415

color (str, optional): Badge color ("red", "orange", "yellow", "blue", "green", "violet", "gray", "grey", "primary")

416

"""

417

418

def help(obj):

419

"""

420

Display help information about Python objects, functions, or modules.

421

422

Args:

423

obj: Python object to display help for

424

"""

425

426

def write(*args, unsafe_allow_html=False):

427

"""

428

Universal display function that automatically formats various data types.

429

430

Args:

431

*args: Variable arguments of any type to display

432

unsafe_allow_html (bool): Whether to allow HTML in strings

433

"""

434

435

def write_stream(stream, *, help=None):

436

"""

437

Display streaming content with real-time updates.

438

439

Args:

440

stream: Iterable that yields content to display

441

help (str, optional): Tooltip text

442

"""

443

444

def echo(code_location="above"):

445

"""

446

Display the code that is being executed in the current context.

447

448

Args:

449

code_location (str): Where to show code ("above" or "below")

450

"""

451

```