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.
UD5 Toolkit
Online check all browser permission states using the navigator.permissions.query() API
The Permissions API lets you query the status of browser permissions without triggering a permission prompt. Statuses: Granted — user has allowed; Prompt — not yet decided; Denied — user has blocked; Unsupported — browser doesn't support querying this permission.
navigator.permissions.query(). It returns whether a permission is granted, denied, or prompt (meaning the user hasn't decided yet). This enables websites to adapt their UI based on permission states without triggering intrusive permission popups.clipboard-read is supported in Chrome and Safari but not Firefox, while camera and microphone are widely supported across all modern browsers.clipboard-read, the browser may require a user gesture (click or keypress) before even returning a meaningful status.navigator.permissions object itself is only available in secure contexts. On localhost, browsers treat the connection as secure for development purposes. If you're on HTTP, many permissions will be unavailable or throw errors.navigator.geolocation.getCurrentPosition() for location, Notification.requestPermission() for notifications, or navigator.mediaDevices.getUserMedia() for camera/microphone. After the user responds, the permission state updates accordingly.local-fonts is only in Chrome 103+), the permission name differs across browsers, or the browser throws a TypeError when attempting to query it. It does not mean the underlying API is unavailable — just that you can't query its permission state through this API.onchange event listener on the permission status object. You can use status.addEventListener('change', callback) to detect when a user grants or revokes a permission, allowing your app to react dynamically without polling. This is especially useful for features like live camera/mic indicators.clipboard-read permission is considered powerful because it could expose sensitive data from the user's clipboard. To protect privacy, browsers like Chrome require a transient user activation (a recent click, tap, or keypress) before the permission query returns a meaningful result. Without it, the query may reject or return prompt. Clicking the "Check All" button in this tool provides that activation.<iframe> attribute that controls whether a feature is allowed to be used at all in a given context. For example, a site owner can use Permissions-Policy: camera=() to completely disable camera access for all embedded content, regardless of user permissions. They work at different layers but complement each other for comprehensive permission management.navigator.permissions.query({name:'...'}) — returns a Promise resolving to a PermissionStatus object..state → granted | denied | prompt; .onchange → event listener for state changes.query() in try-catch — unsupported permission names throw TypeError.window.isSecureContext must be true for the API to be available.permissionStatus.addEventListener('change', ...) for real-time monitoring.Configure how your PWA launches: focus existing or create new. Test with the launch_handler manifest field.
Compress and decompress text using the browser's native Compression Streams API. See the binary output size.
Build a horizontal scroll‑snap container with configurable snap‑type and alignment. Perfect for image galleries.
Compare all CSS easing presets side by side on a bouncing ball. See which curve fits your UI animation.
Unified input demo: see pressure, tilt, and type from any pointer. Compare pointerType values. Essential for drawing apps.
Toggle a screen wake lock to prevent the device from dimming or sleeping. See the lock state and learn the API.
Decode an image progressively using the ImageDecoder API. See partial results and metadata. Modern alternative to <img>.
Decode individual video frames from a local file using the VideoDecoder API. Step through frames. Cutting‑edge browser feature.
Experiment with the Federated Credential Management API. Simulate a sign‑in flow without third‑party cookies. Privacy‑first.
Request HID devices and list them. Read input reports and send output. For custom hardware and controllers.
Request permission and detect when the user is idle (away from keyboard). See screen lock state. For native‑like apps.
Demonstrate how the Web OTP API automatically reads one‑time codes from SMS (mobile). Simulation with a fake SMS input.
Acquire and release locks across tabs. Prevent race conditions in IndexedDB or localStorage. Visual queue and lock state.
Register a periodic background sync to fetch fresh data even when the tab is closed. Understand the API and limits.
Connect a gamepad and see all button presses and axis movements visually. Check that every input is detected correctly.
Trigger different vibration patterns on mobile devices. Test if your phone supports haptic feedback. Simple demo.
Display your effective connection type (4g, 3g, etc.) and downlink speed using the Navigator API. Adapt your app accordingly.
See your device's battery level, charging status, and discharge time using the Battery Status API. Fun utility.
Check current screen orientation and test the lock API. Useful for mobile web apps. Demo with code.
Test the Fullscreen API: request fullscreen on a colored div, detect changes, and copy the JavaScript boilerplate.
Test the new HTML popover attribute for creating accessible tooltips, menus, and dialogs without JavaScript. Copy code snippets.
See the View Transitions API in action. Cross‑fade and morph between two states. Copy the JavaScript starter code.
Experiment with the Async Clipboard API: read/write text and images from the clipboard. Verify permissions and see demo code.
Test the Web Share API by sharing text, links, and files directly from the browser. Check compatibility and see example code.
Enter an API URL and quickly check its HTTP status code and response time. See response headers and body. Browser fetch.
Pick a method, URL, headers, and body, then send an HTTP request directly from your browser. Debug APIs easily.
Find safe mixing ratios for the classic elephant toothpaste demonstration. Volume adjustments for different container sizes.
Generate random JSON data with customizable fields (users, products, orders). Useful for frontend mocking. All local.
Execute GraphQL queries against any endpoint with variables and headers. Explore schema via introspection. All requests made directly from your browser.
Format and beautify SQL queries for improved readability. Supports various SQL dialects. Quick syntax highlighting and local processing ensure a secure experience.