GUI components

These components keep graphical state and render frames in a browser host. Most return KTX2 images; some return SVG. Open the browser demos to try them, or download a .wasm file to host one in your own application. The GUI contract describes KTX2 output, events, and timing.

Editors and tools #

• calculator.wasm implements a graphical calculator.
• graph-calculator.wasm plots entered expressions.
• paint.wasm draws with pointer input.
• spreadsheet.wasm edits a grid of cells.
• svg-path-editor.wasm edits vector paths and returns SVG frames.
• textedit.wasm provides a plain-text editor.
• photo-light-table.wasm arranges and browses photos.
• gameboy-camera.wasm recreates a camera interface.
• gif-player.wasm advances GIF frames over time without input events.

Games #

• aces-up.wasm plays Aces Up solitaire and returns SVG frames.
• klondike.wasm plays draw-one Klondike and returns SVG frames.
• liars-dice.wasm plays Liar's Dice.
• peon-gold.wasm runs the Peon Gold game loop.
• side-scroller-platformer.wasm runs a side-scrolling platform game.
• snake.wasm combines key input with scheduled movement.
• sudoku.wasm edits a Sudoku grid.
• tetris.wasm runs a falling-block game.
• tic-tac-toe-sun-moon.wasm plays a Sun and Moon tic-tac-toe variant.
• tile-world-12x12.wasm moves through a small tile map.
• vertical-shooter.wasm runs a scrolling shooter.

Interface studies #

• browser-security.wasm presents a browser-security interface.
• cover-flow.wasm and cover-flow-lofi.wasm browse a Cover Flow layout.
• dock-magnification.wasm magnifies icons around the pointer.
• layout-systems.wasm compares layout behavior.
• macintosh-1bit.wasm renders a monochrome Macintosh interface.
• macos9-desktop.wasm and macosx-leopard-desktop.wasm render desktop interfaces.
• org_planner.wasm presents an organization planner.
• ps2-menu.wasm renders a PlayStation 2 style menu.
• webos-card-view.wasm presents a card interface.
• windows95-desktop.wasm renders a Windows 95 style desktop.
• xbox-dashboard.wasm renders an Xbox style dashboard.

Visualizations and rendering #

• chronograph.wasm renders a timed chronograph.
• formula-1-map.wasm shows a Formula 1 venue map.
• god-rays.wasm and god-rays-optimized.wasm render animated light shafts.
• ieee-754-floats.wasm explains floating-point values visually.
• mandelbrot.wasm explores the Mandelbrot set.
• moon-phases.wasm shows the lunar phase cycle.
• openai-anthropic-arr.wasm charts annual recurring revenue data.
• openai-anthropic-arr-svg.wasm draws the same interactive chart as SVG.
• page-load-waterfall.wasm draws a page-load timeline.
• perlin-noise.wasm visualizes procedural noise.
• render-counts.wasm displays render and update counts.
• shadow-rendering.wasm demonstrates shadow rendering.
• shutterstock-earnings.wasm overlays earnings data.
• web-mechanics.wasm illustrates browser mechanics.

For one-shot image transforms, use the image content components. For terminal interfaces, browse the TUI components.