UD5 Toolkit
Canvas Compositing Demo - Online Blend & Clip Visual
Draw shapes and experiment with globalCompositeOperation. See PorterâDuff operators in action. Great for game devs.
WebGPU Bunny Demo - Online Simple 3D Renderer
đ° Stanford Bunny — WebGPU 3D Renderer
Real-time Phong-shaded 3D bunny • Drag to rotate • Scroll to zoom
Drag to orbit
Scroll to zoom
Touch: swipe / pinch
Triangles: ~--
GeoJSON Map Previewer - Online Render on Interactive Map
Paste GeoJSON and instantly see it drawn on a draggable map. Supports points, lines, and polygons. Local fetch of tiles.
Live Drawing Board - Online Freehand Sketch & Save
A beautiful fullâscreen drawing canvas with variable brush sizes, colors, and an eraser. Export your sketch as PNG. All data stays local.
Flappy Bird Clone - Online SideâScroll Tap Game
Help the bird fly through pipes without touching them. Click or tap to flap. Track your high score in localStorage. Classic timeâwaster.
CSS Paint Worklet Live Editor - Online Houdini Sandbox
Write a paint worklet in JavaScript and see it used as a CSS background instantly. Experiment with Houdini. Local.
Tessellation Maker - Online M.C. Escher Style Tiling
Create a simple tessellation by deforming a square or triangle and repeating it across the canvas. Hypnotic patterns.
scrollâstart Property Playground - Online Carousel Initial Snap
Define the initial scroll position for a scroll container with scrollâstart. Test with and without snapping. New feature.
CSS Paint Worklet Playground - Online Houdini Backgrounds
Register and apply a custom paint worklet to draw a background pattern dynamically. Write the paint function in the browser.
CSS Paint Cost Benchmark - Online Measure Style Performance
Add many complex CSS styles and measure frames per second. Isolate expensive properties. Practical performance lab.
Intersection Observer Sandbox - Online Visual Threshold
Adjust root, margin, and threshold. See a live log of intersection events as you scroll. Debug lazy loading.
HTML Meta Inspector - Online View All Page Meta
Paste a URL and extract all meta tags, Open Graph, Twitter Cards, and JSONâLD. View in a friendly table. Clientâside fetch.
Canvas Splatter Paint - Online Random Jackson Pollock
Move your mouse or finger to create colorful paint splatters on canvas. Great stress reliever. Download as PNG.
JavaScript Proxy Playground - Online Observe Object
Apply a Proxy to an object and see the get/set traps log fired in real time. Understand metaprogramming. Local.
Tip Pool Splitter - Online Fair Share for Staff
Divide pooled tips among staff based on hours worked or weighted percentages. Ensures fair distribution. Instant local calculation.
Soap Recipe Calculator - Online Lye & Oil Saponification
Create a custom soap recipe by selecting oils and their percentages. Get precise lye and water amounts. Safety warnings included.
Launch Handler API Demo - Online Control App Launch Behavior
Configure how your PWA launches: focus existing or create new. Test with the launch_handler manifest field.
HTML to Image Renderer - Online Capture DOM to Canvas
Paste HTML/CSS and render it to a canvas image. Download as PNG. For creating dynamic social share images.
Web Worker Fibonacci Demo - Online NonâBlocking Calculation
Calculate large Fibonacci numbers in a Web Worker. See the UI remain responsive. Copy the pattern for your app.
3D Color Space Viewer - Online Explore RGB Cube
Rotate and explore the RGB color space as a 3D cube. Pick colors directly from the volume. Interactive Three.js.
CSS Grid Auto Placement Demo - Online How Items Flow
See how grid-auto-flow: row vs column changes item placement. Add and remove items to understand the algorithm. Visual.
EventSource Polyfill Demo - Online See SSE with Custom Headers
Demonstrate how to add custom headers and POSTâlike functionality to EventSource using a polyfill. Code and example.
prefersâcolorâscheme Live Preview - Online Dark/Light
Toggle between light and dark mode for a demo page. See how to use the media query. Copy the pattern.
CSS Grid Baseline Alignment Demo - Online Typography Sync
See how alignâitems: baseline works in grid to align different font sizes on the same baseline. Visual guide.
Built-in Translation API Demo - Online OnâDevice Translate
Test the experimental Translation API to translate text between languages directly in the browser, without cloud calls. Check support and copy the JavaScript starter.
WebGPU Shader Playground - Online WGSL Editor
Write a compute shader in WGSL and run it in the browser. See the output on a canvas. Learn WebGPU. Realâtime compilation.
CSS Grid Implicit Tracks Tester - Online AutoâRows & Columns
Add grid items beyond defined tracks and see how implicit rows/columns expand. Set sizes interactively. Master the grid.
AutoâFill vs AutoâFit Visualizer - Online CSS Grid
Resize the container and see the difference between repeat(autoâfill, âŚ) and autoâfit. Understand responsive grid behavior.
transformâstyle: preserveâ3d Tester - Online 3D Nesting
Nest elements in 3D space with preserveâ3d vs flat. Rotate the parent and see children behave differently.
scrollbarâgutter Tester - Online Prevent Layout Shift
Toggle scrollbarâgutter: stable to reserve space for the scrollbar and avoid content jumps. Visual demo with two columns.
overscrollâbehavior Tester - Online Prevent PullâtoâRefresh
Test overscrollâbehavior: contain to prevent background scroll or pullâtoârefresh. See the effect in a live demo.