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

You can use it to trigger reactive cells.

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 0.7400068317139821!"
end

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())"

A color input (<input type="color">) - the user can pick an RGB color, the color is returned as color hex String via @bind. The value is lowercase and starts with #.

Use default to set the initial value.

See the Mozilla docs about <input type="color">

Examples

@bind color ColorStringPicker()

@bind color ColorStringPicker(default="#aabbcc")

A date input (<input type="date">) - the user can pick a date, the date is returned as Dates.DateTime via @bind.

Use default to set the initial value.

See the Mozilla docs about <input type="date">

Examples

@bind best_day_of_my_live DateField()

@bind best_day_of_my_live DateField(default=today())

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

Dump(x; maxdepth=8)

Every part of the representation of a value. The depth of the output is truncated at maxdepth.

This is a variant of Base.dump that returns the representation directly, instead of printing it to stdout.

See also: Print and with_terminal.

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/*")])

A multi-selector (<select multi>) - the user can choose one or more of the options, an array of `Strings.

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

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

See the Mozilla docs about select

Examples

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

@bind veg MultiSelect(["potato" => "🥔", "carrot" => "🥕"])

@bind veg MultiSelect(["potato" => "🥔", "carrot" => "🥕"], default=["carrot"])

A box where you can type in a number, 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)

A password input (<input type="password">) - the user can type text, the text is returned as String via @bind.

This does not provide any special security measures, it just renders black dots (•••) instead of the typed characters.

Use default to set the initial value.

See the Mozilla docs about <input type="password">

Examples

@bind secret_poem PasswordField()

@bind secret_poem PasswordField(default="Te dansen omdat men leeft")

A group of radio buttons - the user can choose one of the options, an array of Strings.

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

Examples

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

@bind veg Radio(["potato" => "🥔", "carrot" => "🥕"])

@bind veg Radio(["potato" => "🥔", "carrot" => "🥕"], default="carrot")

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"""

A dropdown menu (<select>) - the user can choose one of the options, an array of Strings.

See MultiSelect for a version that allows multiple selected items.

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

See the Mozilla docs about select

Examples

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

@bind veg Select(["potato" => "🥔", "carrot" => "🥕"])

@bind veg Select(["potato" => "🥔", "carrot" => "🥕"], default="carrot")

Show(mime::MIME, data)

An object that can be rendered as the mime MIME type, by writing data to the IO stream. For use in environments with rich output support. Read more about Base.show.

Examples

Show(MIME"text/html"(), "I can be <b>rendered</b> as <em>HTML</em>!")

Show(MIME"image/png"(), read("dog.png"))

Base.showable and Base.show are defined for a Show.

s = Show(MIME"text/latex"(), "\\frac{hello}{world}")

showable(MIME"text/latex"(), s) == true

repr(MIME"text/latex"(), s) == "\\frac{hello}{world}"

A Slider on the given range.

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)

A text input (<input type="text">) - the user can type text, the text is returned as String via @bind.

If dims is a tuple (cols::Integer, row::Integer), a <textarea> will be shown, with the given dimensions

Use default to set the initial value.

See the Mozilla docs about <input type="text"> and <textarea>

Examples

@bind poem TextField()

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

A time input (<input type="time">) - the user can pick a time, the time is returned as String via @bind (e.g. "15:45"). Value is "" until a time is picked.

Use default to set the initial value.

See the Mozilla docs about <input type="time">

Examples

@bind lunch_time TimeField()

@bind lunch_time TimeField(default=now())

WithIOContext(x, properties::Pair...)

A wrapper around x with extra IOContext properties set, just for the display of x.

Examples

WithIOContext(rand(100,100), :compact => false)

large_df = DataFrame(rand(100,100))
WithIOContext(large_df, :displaysize => (9999,9999))

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"""

Print(xs...)

The text that would be printed when calling print(xs...). Use string(xs...) if you want to use the result as a String.

See also: Dump and with_terminal.

Attempt to find the MIME pair corresponding to the extension of a filename. Defaults to text/plain.

@skip_as_script expression

Marks a expression as Pluto-only, which means that it won't be executed when running outside Pluto. Do not use this for your own projects.