To be able to edit code and run cells, you need to run the notebook yourself. Where would you like to run the notebook?

This notebook takes about 20 seconds to run.

In the cloud (experimental)

Binder is a free, open source service that runs scientific notebooks in the cloud! It will take a while, usually 2-7 minutes to get a session.

On your computer

(Recommended if you want to store your changes.)

  1. Copy the notebook URL:
  2. Run Pluto

    (Also see: How to install Julia and Pluto)

  3. Paste URL in the Open box

Frontmatter

If you are publishing this notebook on the web, you can set the parameters below to provide HTML metadata. This is useful for search engines and social media.

Author 1
2
👀 Reading hidden code
a = b
12.9 μs
2
👀 Reading hidden code
b = 2
10.7 μs

This notebook is not executable.

👀 Reading hidden code
md"_This notebook is not executable._"
220 μs

You already have interactivity in Pluto - by defining variables in separate cells, and changing their value. The only thing missing is UI to replace the process of type-new-value-and-run. Because this is only a minor change, the syntax should be minimal.

You should be able to go from a cell like:

👀 Reading hidden code
md"You already have interactivity in Pluto - by defining variables in separate cells, and changing their value. The only thing missing is UI to replace the process of _type-new-value-and-run_. Because this is only a minor change, the syntax should be minimal.

You should be able to go from a cell like:"
284 μs
Error message

Multiple definitions for t

Combine all definitions into a single reactive cell using a `begin ... end` block.

Silly computer!
👀 Reading hidden code
t = 5
---

to something like

👀 Reading hidden code
md"to something like"
172 μs
Error message

Multiple definitions for t

Combine all definitions into a single reactive cell using a `begin ... end` block.

Everything is going to be okay!
@bind t Slider(1:9)
👀 Reading hidden code
---

this @bind var domobject expression will modify the domobject and return the modified object, which will show to text/html as:

<input type="range" min="1" max="9" defines="x">

this custom modifies attribute contains the space-separated list of workspace variable names that it will set its value to.

The Pluto JS client will check all output for HTML inputs with this attribute set, and attach the appropriate event listeners.

md"""this `@bind var domobject` expression will modify the domobject and return the modified object, which will `show` to `text/html` as:

```
<input type="range" min="1" max="9" defines="x">
```

this custom `modifies` attribute contains the space-separated list of workspace variable names that it will set its value to.

The Pluto JS client will check all output for HTML inputs with this attribute set, and attach the appropriate event listeners."""
👀 Reading hidden code
318 μs
myslider = html"""<input type="range" min="1" max="9" defines="x">"""
👀 Reading hidden code
1.9 ms

exactly what the Slider object will be, I still haven't decided - it would be nice to re-use a lightweight DOM library, like Hyperscript.jl.

md"exactly _what_ the `Slider` object will be, I still haven't decided - it would be nice to re-use a lightweight DOM library, like `Hyperscript.jl`."
👀 Reading hidden code
305 μs

Type

md"### Type"
👀 Reading hidden code
180 μs

The variable t is still of type Int64, and changing its value using the DOM input will behave identically to changing the code from t = 1 to t = 2. This means that you write 'interactive listeners' using the syntax:

md"The variable `t` is still of type `Int64`, and changing its value using the DOM input will behave identically to changing the code from `t = 1` to `t = 2`. This means that you write 'interactive listeners' using the syntax:"
👀 Reading hidden code
234 μs
Error message

Another cell defining t contains errors.

sqrt(t)
👀 Reading hidden code
---

Complex UI

md"### Complex UI"
👀 Reading hidden code
172 μs

the "@bind expression returns the slider object, so you can create more complicated UI like this:

md"""the `"@bind` expression returns the slider object, so you can create more complicated UI like this:"""
👀 Reading hidden code
221 μs
Error message

UndefVarError: Slider not defined

Stack trace

Here is what happened, the most recent locations are first:

  1. macro expansion
    from This cell: line 125
  2. Show more...
begin
	xslider = @bind x Slider(1:9)
	yslider = @bind y Slider(1:9)
	
	md"Lorem $(xslider) ipsum $(yslider)"
end
👀 Reading hidden code
---
(you can put HTML objects like  inside a markdown literal)


md"(you can put HTML objects like $(myslider) inside a markdown literal)"
👀 Reading hidden code
264 μs