Live Coding
Edit and Execute Code Blocks
September 22, 2025
Samantha Monty
Chair for Human-Computer Interaction, University of Würzburg

Live Coding in Code Blocks

No Jupyter, but a self-hosted server with standard Docker images that run the code snippets:

The server runs at:

Languages (so far):

  • Python
  • Rust
  • Haskell
  • Java

TODO

Python

Live

msg = "Hello, World!"
print(msg)

Source code

``` {macro="live-code" language="python"}
msg = "Hello, World!"
print(msg)
```

Rust

Live

fn main() {
   print!("Hello, World!"); 
}

Source code

``` {macro="live-code" language="rust"}
fn main() {
   print!("Hello, World!"); 
}
```

Haskell

Live

main = putStrLn "Hello, World!"

source code

``` {macro="live-code" language="haskell"}
main = putStrLn "Hello, World!"
```

language="haskell" expects a complete Haskell program with a proper main function.

Haskell

Live

let a = 1
let b = 2
a + b

Source code

``` {macro="live-code" language="haskell" sandbox="ghci"}
let a = 1
let b = 2
a + b
```

language="haskell" sandbox="ghci" expects a Haskell snippet which is fed to GHCi instead of a complete Haskell program.

Java

Live

record FortyTwo(int value) {}
var ft = new FortyTwo(42);
System.out.println(ft);

Source code

``` {macro="live-code" language="java"}
record FortyTwo(int value) {}
var ft = new FortyTwo(42);
System.out.println(ft);
```

language="java" expects a Java snippet which is fed to jshell. Also, jshell needs a lot of memory and is dog slow.

JavaScript

Live

console.log("42")

Source code

``` {macro="live-code" language="javascript" engine="browser"}
console.log("42")
```

language="javascript" engine="browser" executes the code directly in the browser.

Live Code with Template (Haskell)

A simple template is used around the code.

The template

import Data.Text
mario = "MARIO"
main = do
  print "the template added this"
  
  ##CODE##
  
  print "the template added this"

Source code

``` {macro="live-code" language="haskell" template="../static/live-code-template.hs.txt"}
print (mario <> mario <> mario)

Two Dependent Haskell Cells

The next cell depends on this code

a = 1
b = 2
a + b

This depends on the previous cell

c = 3
a + b + c

Source code

# Two Dependent Haskell Cells {.columns}

## {.left}

The next cell depends on this code

``` {#lcm-cell-1 macro="live-code" language="haskell" sandbox="ghci"}
a = 1
b = 2
a + b
```

## {.right}

This depends on the previous cell

``` {#lcm-cell-2 macro="live-code" language="haskell" sandbox="ghci" depends-on="lcm-cell-1"}
c = 3
a + b + c
```

Two Dependent Python Cells

Independent cell

print("Hello, World 0!")

Depends on left cell

print("Hello, World 1!")

Source code

# Two Dependent Python Cells {.columns}

## Independent cell {.left}

``` {#py-cell-1 macro="live-code" language="python"}
print("Hello, World 0!")
```

## Depends on left cell{.right}
 
``` {macro="live-code" language="python" depends-on="py-cell-1"}
print("Hello, World 1!")
```

Plot SVG

import io
import numpy as np
import matplotlib.pyplot as plt

data = {"a": np.arange(50), "c": np.random.randint(0, 50, 50), "d": np.random.randn(50)}
data["b"] = data["a"] + 10 * np.random.randn(50)
data["d"] = np.abs(data["d"]) * 100

plt.scatter("a", "b", c="c", s="d", data=data)
plt.xlabel("entry a")
plt.ylabel("entry b")
plt.show()

stream = io.StringIO()
plt.savefig(stream, format="svg")
print(stream.getvalue())

(live-code-server?)

Source code

``` {macro="live-code" language="python" output-mode="svg"}
import io
import numpy as np
import matplotlib.pyplot as plt

data = {"a": np.arange(50), "c": np.random.randint(0, 50, 50), "d": np.random.randn(50)}
data["b"] = data["a"] + 10 * np.random.randn(50)
data["d"] = np.abs(data["d"]) * 100

plt.scatter("a", "b", c="c", s="d", data=data)
plt.xlabel("entry a")
plt.ylabel("entry b")
plt.show()

stream = io.StringIO()
plt.savefig(stream, format="svg")
print(stream.getvalue())
```