On‑Screen Pixel Ruler - Online Measure Elements in Browser
Drag a virtual ruler across your screen to measure pixel distances. Horizontal and vertical guides. Useful for UI designers checking alignment.
UD5 Toolkit
Paste your HTML snippet, select any DOM element, and capture it as a high-quality screenshot — entirely in your browser.
<canvas> by traversing the DOM and drawing each node. It works entirely client‑side — your data never leaves your browser.<style> block inside your snippet.Drag a virtual ruler across your screen to measure pixel distances. Horizontal and vertical guides. Useful for UI designers checking alignment.
Record your screen, window, or tab with audio directly in the browser. Download as WebM. No extension required.
Record your screen, window, or tab with audio directly in the browser. Download the recording as a WebM file. No upload.
Click any element on a demo page and see which events are attached. Visual debugger for event handling.
Count total DOM nodes on the current page and show warnings if limits exceed best practices. Keep the DOM lean.
Paste a user agent string to get a human-readable breakdown of browser, operating system, and device. See your own current agent info automatically.
Create a custom element with named slots and see content projection in action. Learn Web Components basics.
Adjust opacity visually with a slider and see the different CSS representations (opacity property vs RGBA/HSLA). Copy best option.
Generate a Lit Element web component skeleton with styles and properties. Copy and start coding immediately.
Create a reflection effect for images or text using box‑reflect. Adjust direction and offset. Copy the CSS.
Convert REM values to pixels and vice versa based on your root font size. Essential for scalable web typography.
Find the centroid (center of mass) of any convex polygon by entering vertex coordinates. Useful for physics and design.
See a comprehensive table of which modern web APIs your current browser supports. Includes WebGPU, AVIF, and more.
Paste HTML and see a before/after comparison of minified output. Check the byte savings. All local.
Compare :focus and :focus‑visible styling. See which one applies when using mouse vs. keyboard. Accessible focus management.
Turn your browser screen into a full‑color flashlight or strobe. Adjust brightness and color. Simple utility.
Paste robots.txt content and parse it to check validity, find disallowed paths. Educational SEO tool. Local processing.
Change the text input cursor color. See the effect live. Copy the minimal CSS. Simple but delightful.
Enter a URL and generate a responsive iframe embed code with correct aspect ratio. Supports YouTube, maps, and more.
Tune your guitar using the browser microphone. Detects pitch and shows deviation from standard tuning. No installation, pure client-side audio processing.
Convert pixel values to em and rem units based on a base font size. Bidirectional. Must‑have for front‑end developers.
Build a properly formatted robots.txt file with user-agent rules and sitemap location. Validate syntax in real time. Essential for webmasters.
Paste text and align it left, center, right, or fully justify by inserting spaces. Simple formatting helper. Pure browser.
Fill in your details and generate a professional-looking invoice ready to print or save as PDF. No sign-up, all data stays on your device. Great for freelancers.
Request a USB device and communicate with it using the Web USB API. See vendor and product IDs. Experimental.
Convert pixel values to viewport‑relative units (vw, vh, vmin, vmax) based on a selected breakpoint. Precise responsive design.
Visualize audio in real time from your microphone or uploaded audio file. See the waveform dance. Uses Web Audio API locally.
Paste a robots.txt file and validate its syntax. See if a specific user‑agent can access a path. Essential for webmasters.
Set watering schedules for multiple plants with visual alerts. Shows which plants need water today based on last watered date. Data stored locally.
Track attendance for multiple subjects. Mark present/absent and see percentage. Data in localStorage. Simple student tool.