UD5 Toolkit
Mermaid Diagram Renderer - Online Markdown to Chart
Write Mermaid syntax inside Markdown blocks and instantly see rendered flowcharts, sequence diagrams, and Gantt charts. Copy SVG.
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: ~--
View Transitions API Demo - Online Smooth Page Switch
See the View Transitions API in action. Crossâfade and morph between two states. Copy the JavaScript starter code.
Canvas Compositing Demo - Online Blend & Clip Visual
Draw shapes and experiment with globalCompositeOperation. See PorterâDuff operators in action. Great for game devs.
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.
contentâvisibility: auto Tester - Online Render Deferral
Apply contentâvisibility: auto to offâscreen sections and see the rendering cost drop. Demos for infinite scroll optimization.
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.
Touch Paint Canvas - Online MultiâTouch Drawing Board
A fullâscreen drawing canvas supporting multiple touch points simultaneously. Different colors per finger. Works on mobile.
contentâvisibility: auto Benchmark - Online Render Cost
Toggle contentâvisibility: auto on long blocks and see the rendering time difference. Understand this powerful property.
HTML Live Previewer - Online Code to Rendered View
Write or paste HTML, CSS, and JavaScript and instantly see the rendered output in a sandboxed iframe. A handy frontend prototyping tool.
CSS Snowfall Effect Generator - Online Winter Animation
Customize falling snow particles with pure CSS or canvas. Adjust speed, size, and wind. Copy the code for your website.
Web Animations API Sandbox - Online JS Animation Editor
Write JavaScript using element.animate() and see the result in a live preview. Compare with CSS keyframes. Debugger included.
Web Component Slot Demo - Online Shadow DOM Playground
Create a custom element with named slots and see content projection in action. Learn Web Components basics.
CSSâinâJS Runtime Cost Simulator - Online Render 1000 Nodes
Render 1000 styled elements using inline styles vs. CSS classes and compare time. Understand CSSâinâJS tradeâoffs.
Matrix Rain Effect - Online Falling Code Animation
A customisable Matrixâstyle digital rain animation. Adjust speed, characters, and colors. Fullscreen mode for ambiance.
Gantt Chart Dummy Generator - Online Project Timeline Visual
Enter task names, start dates, and durations to generate a simple Gantt chart as an image. Quick project view.
HTML Escape/Unescape Live Preview - Online Sandbox
Type raw HTML and see the escaped version, then see how it renders when unescaped. Understand encoding better.
Leftover Paint Coverage Calculator â Online TouchâUp Planning
Enter the amount of leftover paint and see how many square feet it still covers. Plan touch-ups.
Scroll Timeline Playground - Online ScrollâDriven Animation
Create an animation that advances with scroll using animationâtimeline: scroll(). See the visual timeline editor. Modern CSS.
Handwritten Digit Recognizer - Online Canvas & Guess
Draw a digit (0â9) on the canvas and a simple neural net guess the number. Educational demo. No upload.
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.
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.
Prime Factor Tree Generator - Online Visual Factorization
Enter a number and see an animated factor tree breaking it down to primes. Perfect for teaching factorization.
Markdown Previewer - Online Live MD to HTML Renderer
Write Markdown and see the formatted HTML preview in real time. Syntax highlighting and GitHub-flavored Markdown support. No upload, fully local.
CSS Paint Cost Benchmark - Online Measure Style Performance
Add many complex CSS styles and measure frames per second. Isolate expensive properties. Practical performance lab.
CSS Glassmorphism Generator - Online Frosted UI Design
Visually create the glassmorphism effect: background blur, transparency, and border. Copy the complete CSS. Modern UI design.
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.
Mosaic Tile Calculator â Online Tessera Size & Grout Gap
Enter mosaic area and choose tessera size to find the approximate number of tiles required. Includes grout joint factor.
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.
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.
Web Page Screenshot Tool - Online Capture Browser Tab
Take a screenshot of the current browser tab using Screen Capture API. Crop, annotate with text and arrows, and download as PNG. Local only.