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.
UD5 Toolkit
Visualize & debug intersection thresholds, rootMargin, and real-time ratio
threshold?
Threshold defines at what percentage of target visibility the callback fires. A value of 0 means the callback fires as soon as even one pixel is visible. 1.0 means the callback only fires when 100% of the target is visible. You can pass an array like [0, 0.5, 1] to fire at multiple visibility levels.
rootMargin?
rootMargin expands or shrinks the observation area of the root element. A positive margin (e.g., 20px) makes the observer fire earlier β before the target actually enters the root. A negative margin (e.g., -20px) delays firing until the target is further inside.
isIntersecting vs intersectionRatio
isIntersecting is true when any part of the target is within the observation area (ratio > 0). intersectionRatio represents the fraction of the target that is visible, ranging from 0.0 to 1.0.
πΌοΈ Lazy loading images when they scroll into view
π Infinite scroll β load more content as user approaches the bottom
π Analytics β track when elements become visible to users
π¬ Animations β trigger entrance animations on scroll
[0, 0.5, 1]), the observer fires a callback each time the intersection ratio crosses one of those thresholds β either going up (entering) or down (leaving). This is by design and allows you to respond to different levels of visibility.
IntersectionObserver instance can observe multiple target elements. Simply call observer.observe(element) for each element. The callback receives an array of all entries that had an intersection change. This is more efficient than creating separate observers.
rootMargin expands the observation area, which may cause the observer to track more elements and fire more callbacks. This has a minor performance cost. Negative margins shrink the area and can slightly improve performance. For most use cases, the impact is negligible β the Intersection Observer API is asynchronous and highly optimized by browsers.
observer.disconnect()) to prevent memory leaks. For lazy loading, consider using rootMargin to start loading resources slightly before they become visible.
Apply a Proxy to an object and see the get/set traps log fired in real time. Understand metaprogramming. Local.
Draw shapes and experiment with globalCompositeOperation. See PorterβDuff operators in action. Great for game devs.
A beautiful fullβscreen drawing canvas with variable brush sizes, colors, and an eraser. Export your sketch as PNG. All data stays local.
Write a paint worklet in JavaScript and see it used as a CSS background instantly. Experiment with Houdini. Local.
Add many complex CSS styles and measure frames per second. Isolate expensive properties. Practical performance lab.
Define the initial scroll position for a scroll container with scrollβstart. Test with and without snapping. New feature.
Render the classic Stanford Bunny with a basic WebGPU pipeline. Rotate and zoom. Check if your browser supports WebGPU.
Help the bird fly through pipes without touching them. Click or tap to flap. Track your high score in localStorage. Classic timeβwaster.
Paste GeoJSON and instantly see it drawn on a draggable map. Supports points, lines, and polygons. Local fetch of tiles.
Move your mouse or finger to create colorful paint splatters on canvas. Great stress reliever. Download as PNG.
Register and apply a custom paint worklet to draw a background pattern dynamically. Write the paint function in the browser.
Divide pooled tips among staff based on hours worked or weighted percentages. Ensures fair distribution. Instant local calculation.
Create a custom soap recipe by selecting oils and their percentages. Get precise lye and water amounts. Safety warnings included.
Create a simple tessellation by deforming a square or triangle and repeating it across the canvas. Hypnotic patterns.
Paste a URL and extract all meta tags, Open Graph, Twitter Cards, and JSONβLD. View in a friendly table. Clientβside fetch.
Type JavaScript expressions and see output like a real browser console. Supports console.log, error, warn. Use for quick testing without DevTools.
Set up multiple @layers and use revertβlayer to fall back. See the computed style and cascade resolution live.
See your current push subscription details. Trigger push and notificationclick events manually to debug.
Create errors with the cause option and see chained error objects. Learn error wrapping for better debugging.
Highlight elements with ariaβdescribedby and see the linked description text. Verify a11y annotations.
Adjust a brightness threshold slider and see the live vector trace of an image. Export as SVG. Potraceβstyle.
Select any element on the test page and monitor its size changes with ResizeObserver. See log of all entries.
See the current Service Worker registration, its state, and scope. Send 'skipWaiting' and update. PWA debug.
Load an image and see the exact events fired (load, error, abort). Monitor progress. Dev helper.
Fill in a form and see the FormData object as JSON. Perfect for debugging multipart form submissions. Client-side.
See the current AudioContext state (suspended, running). Resume it with a button. Understand autoplay policies.
Test required, pattern, minlength etc. See validity states and custom error messages. Learn browserβnative validation.
Inject dynamic messages into ARIA live regions and monitor how they trigger screen reader announcements. Debug a11y.
Start recording and watch for Long Tasks that block the main thread. See task duration and attribution. Improve Interaction to Next Paint.
Paste a `SetβCookie` header and see all attributes parsed: domain, path, MaxβAge, SameSite, Secure, HttpOnly. Debug cookies easily.