Quarto + Interactive Editor

This page demonstrates how to use the Interactive Code Editor while still benefiting from Quarto’s build-time rendering.

JavaScript Demo

The block below shows the output generated during the build, but you can click Interact to change the code and re-run it in your browser.

javascript Editor 
console.log("Hello from Victor's Quest!");
const x = 10;
const y = 5;
console.log("Result:", x + y);
Build-time Output:
Hello from Victor's Quest!
Result: 15
Live Output:
Python Demo
This example shows a Python code block. Both JavaScript and Python are now interactive!
python Editor

print("Hello from Python!")
squares = [x**2 for x in range(1, 6)]
print(f"Squares: {squares}")
Build-time Output:
Hello from Python!
Squares: [1, 4, 9, 16, 25]


Live Output:
How it works:
  1. Static: By default, it shows the code and the output parameter you passed to the shortcode.
  2. Fast: No heavy editor is loaded until the user clicks “Interact”.
  3. Interactive: Once enabled, it uses browser-based eval() for JavaScript and Pyodide (Python in WASM) for Python.