Component Playground

Interactive demos of custom components used by this site. Adjust the controls to see how they respond.

CodeRunner

An interactive code editor that executes JavaScript (via Web Workers) or Python (via Pyodide) directly in the browser. Features sandboxed execution, timeout protection, and live output.

Language

Interactive JAVASCRIPT Runner

Timeout (ms)

// Try editing this code and click Run
const fibonacci = (n) => {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
};

console.log("First 10 Fibonacci numbers:");
for (let i = 0; i < 10; i++) {
  console.log(`fib(${i}) = ${fibonacci(i)}`);
}

return fibonacci(10);

// Try editing this code and click Run
const fibonacci = (n) => {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
};

console.log("First 10 Fibonacci numbers:");
for (let i = 0; i < 10; i++) {
  console.log(`fib(${i}) = ${fibonacci(i)}`);
}

return fibonacci(10);

Usage:

<CodeRunner
  language="javascript"
  initialCode="console.log('Hello!');"
  timeoutMs={2000}
/>

ThemeImage

Displays different images based on the current theme. Uses CSS to show/hide images rather than JavaScript, ensuring the correct image loads immediately without flicker. Toggle the theme (top-right corner) to see the image swap.

Usage:

<ThemeImage
  srcLight="/photos/example-light.png"
  srcDark="/photos/example-dark.png"
  alt="Example image"
  width={500}
  height={200}
/>

Lattice Path Components

I created these components to visualize lattice paths for my writeup on Project Euler Problem 15. The grids and paths are rendered as SVGs.

LatticeGrid

Visualizes a single path through a lattice grid. Use R (right) and D (down) to define the path.

Grid Size: 3×3

Path (R/D)

Max 3 R's and 3 D's

Start (0,0)

End (3,3)

Usage:

<LatticeGrid size={3} path="RRRDDD" />

AllPaths

Generates and displays all possible paths through a grid. The number of paths follows the central binomial coefficient: C(2n, n).

Grid Size: 2×2

6 unique paths

Usage:

<AllPaths size={2} />