st.json

st.json displays object or string as a pretty-printed JSON string.

We value your privacy.

Chart elements

st.metric

Table to concat. Optional.
Pyarrow tables are not supported by Streamlit's legacy DataFrame serialization
(i.e. with <cite>config.dataFrameSerialization = &quot;legacy&quot;</cite>).
To use pyarrow tables, please enable pyarrow by changing the config setting,
<cite>config.dataFrameSerialization = &quot;arrow&quot;</cite>.

data

The named dataset to concat. Optional. You can only pass in 1
dataset (including the one in the data parameter).

**kwargs

Concatenate a dataframe to the bottom of the current one.

add_rows

The Altair chart object to display.

altair_chart

If True, set the chart width to the column width. This takes
precedence over Altair's native <cite>width</cite> value.

use_container_width

Display a chart using the Altair library.

Data to be plotted.
Pyarrow tables are not supported by Streamlit's legacy DataFrame serialization
(i.e. with <cite>config.dataFrameSerialization = &quot;legacy&quot;</cite>).
To use pyarrow tables, please enable pyarrow by changing the config setting,
<cite>config.dataFrameSerialization = &quot;arrow&quot;</cite>.

The chart width in pixels. If 0, selects the width automatically.

width

The chart height in pixels. If 0, selects the height automatically.

height

If True, set the chart width to the column width. This takes
precedence over the width argument.

Display an area chart.
This is just syntax-sugar around st.altair_chart. The main difference
is this command uses the data's own column and indices to figure out
the chart's spec. As a result this is easier to use for many &quot;just plot
this&quot; scenarios, while being less customizable.
If st.area_chart does not guess the data specification
correctly, try specifying your desired chart using st.altair_chart.

area_chart

io.open().
Raw audio data, filename, or a URL pointing to the file to load.
Numpy arrays and raw data formats must include all necessary file
headers to match specified file format.

The time from which this element should start playing.

start_time

The mime type for the audio file. Defaults to 'audio/wav'.
See <a class="reference external" href="https://tools.ietf.org/html/rfc4281">https://tools.ietf.org/html/rfc4281</a> for more info.

format

audio

balloons

Display a bar chart.
This is just syntax-sugar around st.altair_chart. The main difference
is this command uses the data's own column and indices to figure out
the chart's spec. As a result this is easier to use for many &quot;just plot
this&quot; scenarios, while being less customizable.
If st.bar_chart does not guess the data specification
correctly, try specifying your desired chart using st.altair_chart.

bar_chart

<dl class="docutils">
<dt>If an int</dt>
<dd>Specifies the number of columns to insert, and all columns
have equal width.</dd>
<dt>If a list of numbers</dt>
<dd>Creates a column for each number, and each
column's width is proportional to the number provided. Numbers can
be ints or floats, but they must be positive.
For example, <cite>st.columns([3, 1, 2])</cite> creates 3 columns where
the first column is 3 times the width of the second, and the last
column is 2 times that width.
</dd>
</dl>

spec

Insert containers laid out as side-by-side columns.
Inserts a number of multi-element containers laid out side-by-side and
returns a list of container objects.
To add elements to the returned containers, you can use &quot;with&quot; notation
(preferred) or just call methods directly on the returned object. See
examples below.
<div class="admonition warning">
Warning
Currently, you may not put columns inside another column.
</div>

beta_columns

Insert a multi-element container.
Inserts an invisible container into your app that can be used to hold
multiple elements. This allows you to, for example, insert multiple
elements into your app out of order.
To add elements to the returned container, you can use &quot;with&quot; notation
(preferred) or just call methods directly on the returned object. See
examples below.

beta_container

A string to use as the header for the expander.

label

If True, initializes the expander in &quot;expanded&quot; state. Defaults to
False (collapsed).

expanded

Insert a multi-element container that can be expanded/collapsed.
Inserts a container into your app that can be used to hold multiple elements
and can be expanded or collapsed by the user. When collapsed, all that is
visible is the provided label.
To add elements to the returned container, you can use &quot;with&quot; notation
(preferred) or just call methods directly on the returned object. See
examples below.
<div class="admonition warning">
Warning
Currently, you may not put expanders inside another expander.
</div>

beta_expander

figure

If True, set the chart width to the column width. This takes
precedence over Bokeh's native <cite>width</cite> value.

To show Bokeh charts in Streamlit, call `st.bokeh_chart`

wherever you would call Bokeh's `show`.

Display an interactive Bokeh chart.
Bokeh is a charting library for Python. The arguments to this function
closely follow the ones for Bokeh's <cite>show</cite> function. You can find
more about Bokeh at <a class="reference external" href="https://bokeh.pydata.org">https://bokeh.pydata.org</a>.

bokeh_chart

A short label explaining to the user what this button is for.

An optional string or integer to use as the unique key for the widget.
If this is omitted, a key will be generated for the widget
based on its content. Multiple widgets of the same type may
not share the same key.

An optional tooltip that gets displayed when the button is
hovered over.

help

An optional callback invoked when this button is clicked.

on_click

An optional tuple of args to pass to the callback.

args

An optional dict of kwargs to pass to the callback.

kwargs

An optional boolean, which disables the button if set to True. The
default is False. This argument can only be supplied by keyword.

disabled

button

True if the button was clicked on the last run of the app,
False otherwise.

A short label explaining to the user what this widget is used for.

A tooltip that gets displayed next to the camera input.

An optional callback invoked when this camera_input's value
changes.

on_change

An optional boolean, which disables the camera input if set to
True. The default is False. This argument can only be supplied by
keyword.

Display a widget that returns pictures from the user's webcam.

camera_input

The UploadedFile class is a subclass of BytesIO, and therefore
it is &quot;file-like&quot;. This means you can pass them anywhere where
a file is expected.

body

By default, any HTML tags found in strings will be escaped and
therefore treated as pure text. This behavior may be turned off by
setting this argument to True.
That said, we strongly advise against it. It is hard to write secure
HTML, so by using this argument you may be compromising your users'
security. For more information, see:
<a class="reference external" href="https://github.com/streamlit/streamlit/issues/152">https://github.com/streamlit/streamlit/issues/152</a>
Also note that `unsafe_allow_html` is a temporary measure and may be
removed from Streamlit at any time.
If you decide to turn on HTML anyway, we ask you to please tell us your
exact use case here:
<a class="reference external" href="https://discuss.streamlit.io/t/96">https://discuss.streamlit.io/t/96</a> .
This will help us come up with safe APIs that allow you to do what you
want.

unsafe_allow_html

Display text in small font.
This should be used for captions, asides, footnotes, sidenotes, and
other explanatory text.

caption

A short label explaining to the user what this checkbox is for.

Preselect the checkbox when it first renders. This will be
cast to bool internally.

value

An optional tooltip that gets displayed next to the checkbox.

An optional callback invoked when this checkbox's value changes.

An optional boolean, which disables the checkbox if set to True.
The default is False. This argument can only be supplied by keyword.

checkbox

Whether or not the checkbox is checked.

The language that the code is written in, for syntax highlighting.
If omitted, the code will be unstyled.

language

Display a code block with optional syntax highlighting.
(This is a convenience wrapper around <cite>st.markdown()</cite>)

code

A short label explaining to the user what this input is for.

The hex value of this widget when it first renders. If None,
defaults to black.

An optional tooltip that gets displayed next to the color picker.

An optional callback invoked when this color_picker's value
changes.

An optional boolean, which disables the color picker if set to
True. The default is False. This argument can only be supplied by
keyword.

color_picker

The selected color as a hex string.

columns

container

The data to display.
If 'data' is a pandas.Styler, it will be used to style its
underyling DataFrame. Streamlit supports custom cell
values and colors. (It does not support some of the more exotic
pandas styling features, like bar charts, hovering, and captions.)
Styler support is experimental!
Pyarrow tables are not supported by Streamlit's legacy DataFrame serialization
(i.e. with <cite>config.dataFrameSerialization = &quot;legacy&quot;</cite>).
To use pyarrow tables, please enable pyarrow by changing the config setting,
<cite>config.dataFrameSerialization = &quot;arrow&quot;</cite>.

Desired width of the UI element expressed in pixels. If None, a
default width based on the page width is used.

Desired height of the UI element expressed in pixels. If None, a
default height is used.

Display a dataframe as an interactive table.

dataframe

A short label explaining to the user what this date input is for.

The value of this widget when it first renders. If a list/tuple with
0 to 2 date/datetime values is provided, the datepicker will allow
users to provide a range. Defaults to today as a single-date picker.

The minimum selectable date. If value is a date, defaults to value - 10 years.
If value is the interval [start, end], defaults to start - 10 years.

min_value

The maximum selectable date. If value is a date, defaults to value + 10 years.
If value is the interval [start, end], defaults to end + 10 years.

max_value

An optional tooltip that gets displayed next to the input.

An optional callback invoked when this date_input's value changes.

An optional boolean, which disables the date input if set to True.
The default is False. This argument can only be supplied by keyword.

date_input

The current value of the date input widget.

determine_delta_color_and_direction

The contents of the file to be downloaded. See example below for
caching techniques to avoid recomputing this data unnecessarily.

An optional string to use as the name of the file to be downloaded,
such as 'my_file.csv'. If not specified, the name will be
automatically generated.

file_name

The MIME type of the data. If None, defaults to &quot;text/plain&quot;
(if data is of type str or is a textual file) or
&quot;application/octet-stream&quot; (if data is of type bytes or is a
binary file).

mime

An optional boolean, which disables the download button if set to
True. The default is False. This argument can only be supplied by
keyword.

Display a download button widget.
This is useful when you would like to provide a way for your users
to download a file directly from your app.
Note that the data to be downloaded is stored in-memory while the
user is connected, so it's a good idea to keep file sizes under a
couple hundred megabytes to conserve memory.

download_button

Insert a single-element container.
Inserts a container into your app that can be used to hold a single element.
This allows you to, for example, remove elements at any point, or replace
several elements at once (using a child multi-element container).
To insert/replace/clear an element on the returned container, you can
use &quot;with&quot; notation or just call methods directly on the returned object.
See examples below.

empty

error

exception

expander

A short label explaining to the user what this file uploader is for.

Array of allowed extensions. ['png', 'jpg']
The default is None, which means all extensions are allowed.

type

If True, allows the user to upload multiple files at the same time,
in which case the return value will be a list of files.
Default: False

accept_multiple_files

A tooltip that gets displayed next to the file uploader.

An optional callback invoked when this file_uploader's value
changes.

An optional boolean, which disables the file uploader if set to
True. The default is False. This argument can only be supplied by
keyword.

Display a file uploader widget.
By default, uploaded files are limited to 200MB. You can configure
this using the <cite>server.maxUploadSize</cite> config option. For more info
on how to set config options, see
<a class="reference external" href="https://docs.streamlit.io/library/advanced-features/configuration#set-configuration-options">https://docs.streamlit.io/library/advanced-features/configuration#set-configuration-options</a>

file_uploader

<ul class="simple">
<li>If accept_multiple_files is False, returns either None or
an UploadedFile object.</li>
<li>If accept_multiple_files is True, returns a list with the
uploaded files as UploadedFile objects. If no files were
uploaded, returns an empty list.</li>
</ul>
The UploadedFile class is a subclass of BytesIO, and therefore
it is &quot;file-like&quot;. This means you can pass them anywhere where
a file is expected.

A string that identifies the form. Each form must have its own
key. (This key is not displayed to the user in the interface.)

If True, all widgets inside the form will be reset to their default
values after the user presses the Submit button. Defaults to False.
(Note that Custom Components are unaffected by this flag, and
will not be reset to their defaults on form submission.)

clear_on_submit

Create a form that batches elements together with a &quot;Submit&quot; button.
A form is a container that visually groups other elements and
widgets together, and contains a Submit button. When the form's
Submit button is pressed, all widget values inside the form will be
sent to Streamlit in a batch.
To add elements to a form object, you can use &quot;with&quot; notation
(preferred) or just call methods directly on the form. See
examples below.
Forms have a few constraints:
<ul class="simple">
<li>Every form must contain a <tt class="docutils literal">st.form_submit_button</tt>.</li>
<li><tt class="docutils literal">st.button</tt> and <tt class="docutils literal">st.download_button</tt> cannot be added to a form.</li>
<li>Forms can appear anywhere in your app (sidebar, columns, etc),
but they cannot be embedded inside other forms.</li>
</ul>
For more information about forms, check out our
<a class="reference external" href="https://blog.streamlit.io/introducing-submit-button-and-forms/">blog post</a>.

form

A short label explaining to the user what this button is for.
Defaults to &quot;Submit&quot;.

A tooltip that gets displayed when the button is hovered over.
Defaults to None.

Display a form submit button.
When this button is clicked, all widget values inside the form will be
sent to Streamlit in a batch.
Every form must have a form_submit_button. A form_submit_button
cannot exist outside a form.
For more information about forms, check out our
<a class="reference external" href="https://blog.streamlit.io/introducing-submit-button-and-forms/">blog post</a>.

form_submit_button

The Graphlib graph object or dot string to display

figure_or_dot

If True, set the chart width to the column width. This takes
precedence over the figure's native <cite>width</cite> value.

Display a graph using the dagre-d3 library.

graphviz_chart

The anchor name of the header that can be accessed with #anchor
in the URL. If omitted, it generates an anchor using the body.

anchor

header

The object whose docstring should be displayed.

Display object's doc string, nicely formatted.
Displays the doc string for this object.

Monochrome image of shape (w,h) or (w,h,1)
OR a color image of shape (w,h,3)
OR an RGBA image of shape (w,h,4)
OR a URL to fetch the image from
OR a path of a local image file
OR an SVG XML string like <cite>&lt;svg xmlns=...&lt;/svg&gt;</cite>
OR a list of one of the above, to display multiple images.

image

Image caption. If displaying multiple images, caption should be a
list of captions (one for each image).

Image width. None means use the image width,
but do not exceed the width of the column.
Should be set for SVG images, as they have no default image width.

If 'auto', set the image's width to its natural size,
but do not exceed the width of the column.
If 'always' or True, set the image's width to the column width.
If 'never' or False, set the image's width to its natural size.
Note: if set, <cite>use_column_width</cite> takes precedence over the <cite>width</cite> parameter.

use_column_width

Clamp image pixel values to a valid range ([0-255] per channel).
This is only meaningful for byte array images; the parameter is
ignored for image URLs. If this is not set, and an image has an
out-of-range value, an error will be thrown.

clamp

If image is an nd.array, this parameter denotes the format used to
represent color information. Defaults to 'RGB', meaning
<cite>image[:, :, 0]</cite> is the red channel, <cite>image[:, :, 1]</cite> is green, and
<cite>image[:, :, 2]</cite> is blue. For images coming from libraries like
OpenCV you should set this to 'BGR', instead.

channels

This parameter specifies the format to use when transferring the
image data. Photos should use the JPEG format for lossy compression
while diagrams should use the PNG format for lossless compression.
Defaults to 'auto' which identifies the compression type based
on the type and format of the image argument.

output_format

info

is_negative

The object to print as JSON. All referenced objects should be
serializable to JSON as well. If object is a string, we assume it
contains serialized JSON.

Display object or string as a pretty-printed JSON string.

json

The string or SymPy expression to display as LaTeX. If str, it's
a good idea to use raw Python strings since LaTeX uses backslashes
a lot.

Display mathematical expressions formatted as LaTeX.
Supported LaTeX functions are listed at
<a class="reference external" href="https://katex.org/docs/supported.html">https://katex.org/docs/supported.html</a>.

latex

Display a line chart.
This is syntax-sugar around st.altair_chart. The main difference
is this command uses the data's own column and indices to figure out
the chart's spec. As a result this is easier to use for many &quot;just plot
this&quot; scenarios, while being less customizable.
If st.line_chart does not guess the data specification
correctly, try specifying your desired chart using st.altair_chart.

line_chart

or None
The data to be plotted. Must have columns called 'lat', 'lon',
'latitude', or 'longitude'.

Zoom level as specified in
<a class="reference external" href="https://wiki.openstreetmap.org/wiki/Zoom_levels">https://wiki.openstreetmap.org/wiki/Zoom_levels</a>

zoom

Display a map with points on it.
This is a wrapper around st.pydeck_chart to quickly create scatterplot
charts on top of a map, with auto-centering and auto-zoom.
When using this command, we advise all users to use a personal Mapbox
token. This ensures the map tiles used in this chart are more
robust. You can do this with the mapbox.token config option.
To get a token for yourself, create an account at
<a class="reference external" href="https://mapbox.com">https://mapbox.com</a>. It's free! (for moderate usage levels). For more
info on how to set config options, see
<a class="reference external" href="https://docs.streamlit.io/library/advanced-features/configuration#set-configuration-options">https://docs.streamlit.io/library/advanced-features/configuration#set-configuration-options</a>

The string to display as Github-flavored Markdown. Syntax
information can be found at: <a class="reference external" href="https://github.github.com/gfm">https://github.github.com/gfm</a>.
This also supports:
<ul class="simple">
<li>Emoji shortcodes, such as <cite>:+1:</cite> and <cite>:sunglasses:</cite>.
For a list of all supported codes,
see <a class="reference external" href="https://raw.githubusercontent.com/omnidan/node-emoji/master/lib/emoji.json">https://raw.githubusercontent.com/omnidan/node-emoji/master/lib/emoji.json</a>.</li>
<li>LaTeX expressions, by wrapping them in &quot;$&quot; or &quot;$$&quot; (the &quot;$$&quot;
must be on their own lines). Supported LaTeX functions are listed
at <a class="reference external" href="https://katex.org/docs/supported.html">https://katex.org/docs/supported.html</a>.</li>
</ul>

By default, any HTML tags found in the body will be escaped and
therefore treated as pure text. This behavior may be turned off by
setting this argument to True.
That said, we strongly advise against it. It is hard to write
secure HTML, so by using this argument you may be compromising your
users' security. For more information, see:
<a class="reference external" href="https://github.com/streamlit/streamlit/issues/152">https://github.com/streamlit/streamlit/issues/152</a>
Also note that `unsafe_allow_html` is a temporary measure and may
be removed from Streamlit at any time.
If you decide to turn on HTML anyway, we ask you to please tell us
your exact use case here:
<a class="reference external" href="https://discuss.streamlit.io/t/96">https://discuss.streamlit.io/t/96</a>
This will help us come up with safe APIs that allow you to do what
you want.

markdown

The header or Title for the metric

Value of the metric. None is rendered as a long dash.

Indicator of how the metric changed, rendered with an arrow below
the metric. If delta is negative (int/float) or starts with a minus
sign (str), the arrow points down and the text is red; else the
arrow points up and the text is green. If None (default), no delta
indicator is shown.

delta

If &quot;normal&quot; (default), the delta indicator is shown as described
above. If &quot;inverse&quot;, it is red when positive and green when
negative. This is useful when a negative change is considered
good, e.g. if cost decreased. If &quot;off&quot;, delta is shown in gray
regardless of its value.

delta_color

Display a metric in big bold font, with an optional indicator of how the metric changed.
Tip: If you want to display a large number, it may be a good idea to
shorten it using packages like <a class="reference external" href="https://github.com/azaitsev/millify">millify</a>
or <a class="reference external" href="https://github.com/davidsa03/numerize">numerize</a>. E.g. <tt class="docutils literal">1234</tt> can be
displayed as <tt class="docutils literal">1.2k</tt> using <tt class="docutils literal">st.metric(&quot;Short number&quot;, millify(1234))</tt>.

metric

A short label explaining to the user what this select widget is for.

Labels for the select options. This will be cast to str internally
by default. For pandas.DataFrame, the first column is selected.

options

List of default values. Can also be a single value.

default

Display a multiselect widget.
The multiselect widget starts as empty.

Function signature
st.json(body)
Parameters
body (Object or str)	The object to print as JSON. All referenced objects should be serializable to JSON as well. If object is a string, we assume it contains serialized JSON.

st.json

Example

Still have questions?