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:
- Static: By default, it shows the code and the
outputparameter you passed to the shortcode. - Fast: No heavy editor is loaded until the user clicks “Interact”.
- Interactive: Once enabled, it uses browser-based
eval()for JavaScript and Pyodide (Python in WASM) for Python.