UD5 Toolkit
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.
GeoJSON Map Previewer - Online Render on Interactive Map
GeoJSON Map Previewer
Paste or upload GeoJSON to instantly render it on an interactive map.
GeoJSON Input
Click features for details
Frequently Asked Questions
GeoJSON is a lightweight format for encoding geographic data structures. It supports points, lines, polygons, and their multi-part equivalents. It's widely used in web mapping libraries like Leaflet, Mapbox, and OpenLayers.
Yes, this tool renders GeoJSON client-side without size limits beyond browser memory. However, extremely large files (e.g., over 50MB) may slow down rendering. For better performance, simplify your geometries using tools like Mapshaper.
GeoJSON mandates the WGS84 coordinate system (EPSG:4326) with longitude/latitude pairs in decimal degrees. If your data uses a different CRS, convert it before preview.
You can download the GeoJSON file using the Download button and share it. To save the exact map view, take a screenshot. The tool does not store any data on servers.
Absolutely. All processing is done locally in your browser. No data is sent to any server. You can use the tool offline after the page loads.
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.
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.
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.
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 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.
Promise State Viewer - Online Check Resolve & Reject
Create promises that resolve or reject after a delay. See state changes and chain .then/.catch. Debug async code.
WebGPU Bunny Demo - Online Simple 3D Renderer
Render the classic Stanford Bunny with a basic WebGPU pipeline. Rotate and zoom. Check if your browser supports WebGPU.
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.
content‑visibility: auto Benchmark - Online Render Cost
Toggle content‑visibility: auto on long blocks and see the rendering time difference. Understand this powerful property.
Drag & Drop File Upload Demo - Online With Preview
Drop files onto a zone and see a preview with name, size, and type. Copy the JavaScript pattern for your site.
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.
Text to Line Array - Online Split for Code
Split text into a JavaScript or JSON string array. Wrap in quotes, add commas. Ready to paste into code.
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.
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.
Canvas Compositing Demo - Online Blend & Clip Visual
Draw shapes and experiment with globalCompositeOperation. See Porter‑Duff operators in action. Great for game devs.
Simple Dockerfile Generator - Online for Node/Python/Go
Select a runtime (Node.js, Python, Go) and generate a basic, optimized Dockerfile with multi‑stage build. Copy and refine.
Cache Storage Viewer - Online Inspect Cache API
List cached responses for your domain. View headers, content, and delete individual entries. Understand your PWA's cache.
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.
PWA Manifest Generator - Online Create app.webmanifest
Fill in your PWA details to generate a valid manifest.json file. Include icons, theme color, display mode.
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.
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.
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.
Generator Function Explorer - Online Step by Step
Write a generator function and step through it with next(). See values and done state. Understand iterators.
Navigation Timing API Viewer - Online Page Load Breakdown
See your current page load broken down into DNS, TLS, request, and DOM phases. Understand where time is spent.
Navigation Timing API Viewer - Online Page Load Breakdown
See your current page load broken down into DNS, TLS, request, and DOM phases. Understand where time is spent.
Lazy Loading Image Snippet Generator - Online
Generate an <img> tag with the loading='lazy' attribute and optional low‑quality placeholder. Improve Core Web Vitals. Copy the snippet.
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.
Prioritized Task Scheduler Demo - Online scheduler.postTask()
Schedule tasks with user‑visible, user‑blocking, or background priority. See execution order and delays. Modern web perf.
Caching Strategy Visualizer – Online Cache First vs Network First
Select a caching strategy and see a flow diagram of how requests are handled. Learn PWA patterns.