A slider over the given values.

Examples

@bind x Slider(1:10)

@bind x Slider(0.00 : 0.01 : 0.30)

@bind x Slider(1:10; default=8, show_value=true)

@bind x Slider(range(-π, π, 1000); default=0, show_value=x-> "$(round(x, digits=2)) rad")

@bind x Slider(["hello", "world!"])

An inline number that can be changed by clicking and dragging the mouse.

Examples

md"""
_If Alice has $(@bind a Scrubbable(20)) apples, 
and she gives $(@bind b Scrubbable(3)) apples to Bob..._
"""

md"""
_...then Alice has **$(a - b)** apples left._
"""

In the examples above, we give the initial value as parameter, and the reader can change it to be lower or higher.

Custom range

Besides an initial value, a scrubbable number also has an array of possible values that can be reached. When you pass a single number to Scrubbable, this array is automatically created.

You can also specify the array manually:

@bind apples Scrubbable(200 : 300; default=220)

Formatting

The library d3-format is used to format floating-point numbers. You can specify a format string like ".2f" to be used to format the scrubbable value. Have a look at their documentation to see more examples.

@bind money Scrubbable(30e6, format=".0s", prefix="€ ")

@bind coolness Scrubbable(0.80 : 0.01 : 1.00, format=".0%", prefix="you are 🌝 ", suffix=" cool")

Scrubbable(A::Matrix{<:Real}; kwargs...)

The PlutoUI.Scrubbable widget, but in a 2D grid. Additional keyword arguments will apply to all scrubbables.

A box where you can type in a number, optionally within a specific range.

Examples

@bind x NumberField(1:10)

@bind x NumberField(0.00 : 0.01 : 0.30)

@bind x NumberField(1:10; default=8)

Without a predefined range:

@bind x NumberField()

@bind x NumberField(default=37)

Switch(; default::Bool=false)

A false/true input element, displayed as a sliding switch. This is the same as PlutoUI.CheckBox, but with a different visual style.

A checkbox to choose a Boolean value true/false.

Examples

@bind programming_is_fun CheckBox()

@bind julia_is_fun CheckBox(default=true)

md"Would you like the thing? $(@bind enable_thing CheckBox())"

# single-line:
TextField(default="", placeholder=nothing)

# with specified size:
TextField(size; default="", placeholder=nothing)

A text input - the user can type text, the text is returned as String via @bind.

Keyword arguments

• default: the initial value

• placeholder: a value to display when the text input is empty

size argument

• If size is a tuple (cols::Integer, row::Integer), a multi-line <textarea> will be shown, with the given dimensions.

• If size is an integer, it controls the width of the single-line input.

Examples

@bind author TextField()

@bind poem TextField((30,5); default="Hello\nJuliaCon!")

Select(options::Vector; [default])
# or with a custom display value:
Select(options::Vector{Pair{Any,String}}; [default::Any])

A dropdown menu - the user can choose an element of the options vector.

See MultiSelect for a version that allows multiple selected items.

Examples

@bind veg Select(["potato", "carrot"])

@bind f Select([sin, cos, tan, sqrt])

f(0.5)

You can also specify a display value by giving pairs bound_value => display_value:

@bind f Select([cos => "cosine function", sin => "sine function"])

f(0.5)

MultiSelect(options::Vector; [default], [size::Int])
# or with a custom display value:
MultiSelect(options::Vector{Pair{Any,String}}; [default], [size::Int])

A multi-selector - the user can choose one or more of the options.

See Select for a version that allows only one selected item.

Examples

@bind vegetables MultiSelect(["potato", "carrot"])

if "carrot" ∈ vegetables
	"yum yum!"
end

@bind chosen_functions MultiSelect([sin, cos, tan, sqrt])

[f(0.5) for f in chosen_functions]

You can also specify a display value by giving pairs bound_value => display_value:

@bind chosen_functions MultiSelect([
	cos => "cosine function", 
	sin => "sine function",
])

[f(0.5) for f in chosen_functions]

The size keyword argument may be used to specify how many rows should be visible at once.

@bind letters MultiSelect(string.('a':'z'), size=20)

MultiCheckBox(options::Vector; [default::Vector], [orientation ∈ [:row, :column]], [select_all::Bool])

A group of checkboxes - the user can choose which of the options to return. The value returned via @bind is a list containing the currently checked items.

See also: MultiSelect.

options can also be an array of pairs key::Any => value::String. The key is returned via @bind; the value is shown.

Keyword arguments

• defaults specifies which options should be checked initally.

• orientation specifies whether the options should be arranged in :row's :column's.

• select_all specifies whether or not to include a "Select All" checkbox.

Examples

@bind snacks MultiCheckBox(["🥕", "🐟", "🍌"]))

if "🥕" ∈ snacks
    "Yum yum!"
end

@bind functions MultiCheckBox([sin, cos, tan])

[f(0.5) for f in functions]

@bind snacks MultiCheckBox(["🥕" => "🐰", "🐟" => "🐱", "🍌" => "🐵"]; default=["🥕", "🍌"])

@bind animals MultiCheckBox(["🐰", "🐱" , "🐵", "🐘", "🦝", "🐿️" , "🐝",  "🐪"]; orientation=:column, select_all=true)

A button that sends back the number of times that it was clicked.

You can use it to trigger reactive cells.

Examples

In one cell:

@bind go CounterButton("Go!")

and in a second cell:

begin
	# reference the bound variable - clicking the button will run this cell
	go

	md"My favorite number is $(rand())!"
end

A button that sends back the same value every time that it is clicked.

You can use it to trigger reactive cells.

See also CounterButton to get the number of times the button was clicked.

Examples

In one cell:

@bind go Button("Go!")

and in a second cell:

begin
	# reference the bound variable - clicking the button will run this cell
	go

	md"My favorite number is $(rand())!"
end

A file upload box. The chosen file will be read by the browser, and the bytes are sent back to Julia.

The optional accept argument can be an array of MIMEs. The user can only select files with these MIME. If only image/* MIMEs are allowed, then smartphone browsers will open the camera instead of a file browser.

Examples

@bind file_data FilePicker()

file_data["data"]

You can limit the allowed MIME types:

@bind image_data FilePicker([MIME("image/jpg"), MIME("image/png")])
# and use MIME groups:
@bind image_data FilePicker([MIME("image/*")])

Button to download a Julia object as a file from the browser.

See FilePicker to do the opposite.

Examples

DownloadButton("Roses are red,", "novel.txt")

DownloadButton(UInt8[0xff, 0xd8, 0xff, 0xe1, 0x00, 0x69], "raw.dat")

import JSON
DownloadButton(JSON.json(Dict("name" => "merlijn", "can_cook" => true)), "staff.json")

If you want to make a local file available for download, you need to read the file's data:

let
    filename = "/Users/fonsi/Documents/mydata.csv"
    DownloadButton(read(filename), basename(filename))
end

No documentation found for public binding PlutoUI.ClockNotebook.Clock.

Summary

struct PlutoUI.ClockNotebook.Clock

Fields

interval      :: Real
fixed         :: Bool
start_running :: Bool
max_value     :: Union{Nothing, Int64}
repeat        :: Bool

confirm(element::Any; label::Union{String, Nothing}=nothing)

Normally, when you move a Slider or type in a TextField, all intermediate values are sent back to @bind.

By wrapping an input element in confirm, you get a button to manually control when the value is sent, intermediate updates are hidden from Pluto.

One case where this is useful is a notebook that does a long computation based on a @bind input.

label specifies a custom label for the confirm button.

Examples

@bind x confirm(Slider(1:100))

x == 1 # (initially)

Now, when you move the slider, nothing happens, until you click the "Confirm" button, and x is set to the new slider value.

The result looks like:

See also

You can combine this with PlutoUI.combine!

@bind speeds confirm(
	combine() do Child
		@htl("""
		<h3>Wind speeds</h3>
		<ul>
		$([
			@htl("<li>$(name): $(Child(name, Slider(1:100)))")
			for name in ["North", "East", "South", "West"]
		])
		</ul>
		""")
	end
)

The result looks like:

PlutoUI.combine(render_function::Function)

Combine multiple input elements into one. The combined values are sent to @bind as a single tuple.

render_function is a function that you write yourself, take a look at the examples below.

Examples

🐶 & 🐱

We use the do syntax to write our render_function. The Child function is wrapped around each input, to let combine know which values to combine.

@bind values PlutoUI.combine() do Child
	md"""
	# Hi there!

	I have $(
		Child(Slider(1:10))
	) dogs and $(
		Child(Slider(5:100))
	) cats.

	Would you like to see them? $(Child(CheckBox(true)))
	"""
end

values == (1, 5, true) # (initially)

The output looks like:

And the bound value (1, 5, true).

🎏

The combine function is most useful when you want to generate your input elements dynamically. This example uses HypertextLiteral.jl for the @htl macro:

function wind_speeds(directions)
	PlutoUI.combine() do Child
		@htl("""
		<h6>Wind speeds</h6>
		<ul>
		$([
			@htl("<li>$(name): $(Child(Slider(1:100)))</li>")
			for name in directions
		])
		</ul>
		""")
	end
end

@bind speeds wind_speeds(["North", "East", "South", "West"])

speeds == (1, 1, 1, 1) # (initially)

# after moving the sliders:
speeds == (100, 36, 73, 60)

The output looks like:

And the bound value (1, 1, 1, 1).

Named variant

In the last example, we used Child to wrap around contained inputs:

Child(Slider(1:100))

We can also use the named variant, which looks like:

Child("East", Slider(1:100))

When you use the named variant for all children, the bound value will be NamedTuple, instead of a Tuple.

Let's rewrite our example to use the named variant:

function wind_speeds(directions)
	PlutoUI.combine() do Child
		@htl("""
		<h6>Wind speeds</h6>
		<ul>
		$([
			@htl("<li>$(name): $(Child(name, Slider(1:100)))</li>")
			for name in directions
		])
		</ul>
		""")
	end
end

@bind speeds wind_speeds(["North", "East", "South", "West"])

speeds == (North=1, East=1, South=1, West=1) # (initially)

# after moving the sliders:
speeds == (North=100, East=36, South=73, West=60)

md"The Eastern wind speed is $(speeds.East)."

The output looks like:

Why?

You can make a new widget!

You can use combine to create a brand new widget yourself, by combining existing ones!

In the example above, we created a new widget called wind_speeds. You could put this function in a package (e.g. WeatherUI.jl) and people could use it like so:

import WeatherUI: wind_speeds

@bind speeds wind_speeds(["North", "East"])

In other words: you can use combine to create application-specific UI elements, and you can put those in your package!

Difference with repeated @bind

The standard way to combine multiple inputs into one output is to use @bind multiple times. Our initial example could more easily be written as:

md"""
# Hi there!

I have $(@bind num_dogs Slider(1:10)) dogs and $(@bind num_cats Slider(5:10)) cats.

Would you like to see them? $(@bind want_to_see CheckBox(true))
"""

The combine function is useful when you are generating inputs dynamically, like in our second example. This is useful when:

• The number of parameters is very large, and you don't want to write @bind parameter1 ..., @bind parameter2 ..., etc.

• The number of parameters is dynamic! For example, you can load in a table in one cell, and then use combine in another cell to select which rows you want to use.

Resource(src::String, mime=mime_from_filename(src)[, html_attributes::Pair...])

A container for a URL-addressed resource that displays correctly in rich IDEs.

Examples

Resource("https://julialang.org/assets/infra/logo.svg")

Resource("https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm", :width => 100)

md"""
This is what a duck sounds like: $(Resource("https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3"))
md"""

Create a Resource for a local file (a base64 encoded data URL is generated).

WARNING

LocalResource will not work when you share the script/notebook with someone else, unless they have those resources at exactly the same location on their file system.

Recommended alternatives (images)

1. Go to imgur.com and drag&drop the image to the page. Right click on the image, and select "Copy image location". You can now use the image like so: PlutoUI.Resource("https://i.imgur.com/SAzsMMA.jpg").

2. If your notebook is part of a git repository, place the image in the repository and use a relative path: PlutoUI.LocalResource("../images/cat.jpg").

Examples

LocalResource("./cat.jpg")

LocalResource("/home/fons/Videos/nijmegen.mp4", :width => 200)

md"""
This is what a duck sounds like: $(LocalResource("../data/hannes.mp3"))
md"""

Add a reading time estimate to your Pluto notebook based on markdown content.

Arguments

• wpm::Int=200: Words per minute reading speed (typical range: 150-300)

• position::Symbol=:top: Where to display (:top or :floating)

• style::Symbol=:minimal: Display style (:minimal or :detailed)

Examples

reading_time()  # Simple "📖 5 min read"

reading_time(wpm=250, style=:detailed)  # "📖 Reading time: 4 minutes (850 words at 250 wpm)"

reading_time(position=:floating)  # Floating in corner

details(summary, contents; open::Bool=false)

Create a collapsable details disclosure element (<details>).

Useful for initially hiding content that may be important yet overly verbose or exposing advanced variables that may not always need displayed.

Arguments

• summary::Any: the always visible summary of the details element.

• contents::Any: the item(s) to nest within the details element.

Keyword arguments

• open::Bool=false: whether the details element is initially open.

Examples

details("My summary", "Some contents")

details(
	"My summary",
	[
		"My first item",
		(@bind my_var Slider(1:10)),
		md"How are you feeling? $(@bind feeling Slider(1:10))",
	],
	open=true,
)

# This example will cause an error
details(
	"My summary",
	[
		"My first item",
		@bind my_var Slider(1:10),
	]
)

WideCell(something_to_display::Any; max_width::Int64=1000)

Display something in an extra wide cell, breaking out of the usual margins of the Pluto notebook (usually constrained to be 700px wide). The second argument controls the new maximum width, in pixels.

The cell remains responsive: if the window is not wide enough to display the cell, the cell will resize to fit. In particular, on a screen less than 700px wide, this function has no effect.

Example

This function has to be returned directly from a cell to work. For example:

let
	content = md"""
	# Hello from an extra wide cell!
	Here is a picture:
	
	![panorama from the Vlieland lighthouse, Netherland](https://upload.wikimedia.org/wikipedia/commons/b/b0/Panorama_view_from_Vlieland_lighthouse_%28Netherlands_2015%29_%2820250182305%29.jpg)
	"""

	WideCell(content)
end

Combination with Layout

This function works well in combination with PlutoUI.ExperimentalLayout to create a dashboard-like experience.

Single-argument version

WideCell(; max_width::Int64=1000)::Function

A single-argument method that returns an anonymous function that makes an object wider. This is useful together with the |> operator in Julia:

plot(x, y) |> WideCell(; max_width=1200)

No docstring found for internal module PlutoUI.ExperimentalLayout.

Public names

DOMElement, Div, em, fr, grid, hbox, pc, pt, px, vbox, vh, vmax, vmin, vw

Package description from README.md:

PlutoUI.jl

A small package with interactive elements to be used in Pluto.jl.

@bind x PlutoUI.Slider(1:100)

repeat("Hello ", x)

For documentation, read the PlutoUI.jl featured notebook.

NotebookCard(notebook_url::String; [link_text::String])

Create a nice-looking card to showcase another notebook. You can use this to create a link to a notebook that stands out clearly in your document.

This only works for notebooks hosted on websites that are generated with PlutoPages.jl or PlutoSliderServer.jl. Support for pluto.land notebooks can be added upon request.

The notebook_url argument should be the public URL where users can read the notebook. If you are working on a (course) website, go to your website, and just copy the URL of the web page that you want to link to. You can add a #hash subsection at the end of the URL if you wish.

Frontmatter

The image, title and description will be taken from notebook frontmatter (of the notebook you are linking to). You can edit frontmatter of that notebook using Pluto's built-in frontmatter editor.

Example

Here is an example card, linking to a page in the Pluto documentation website (generated with PlutoPages.jl):

NotebookCard("https://plutojl.org/en/docs/expressionexplorer/")

This is what it looks like in a notebook:

A slider over the given values.

Examples

@bind x Slider(1:10)

@bind x Slider(0.00 : 0.01 : 0.30)

@bind x Slider(1:10; default=8, show_value=true)

@bind x Slider(range(-π, π, 1000); default=0, show_value=x-> "$(round(x, digits=2)) rad")

@bind x Slider(["hello", "world!"])