UD5 Toolkit
Design Token Generator â Export Colors, Spacing & Typography
Define and export design tokens for your project. Choose colors, spacing, and fonts, then download as CSS custom properties, JSON, or SCSS variables.
Developer Tools - Utilities for Coders
999+ toolsAccessible Name & Description Inspector â Generate Aria Labels
Enter a visual UI element and the tool suggests proper ariaâlabels and descriptions. Learn to write meaningful text for screen readers.
Online Text Diff Checker â Compare Two Versions Side by Side
Paste two text blocks to see a lineâbyâline diff with added lines in green and removed lines in red. Ideal for code reviews and editing.
HTML <head> Element Optimizer â Best Practice Checklist
Paste your <head> section to check for missing favicon links, social meta tags, preload hints, and proper charset. Get a score and improvement list.
FullâPage Website Screenshot Tool â Enter URL, Get PNG
Enter a public URL and capture a fullâlength PNG screenshot of the entire page. No install needed, processed in the cloud.
JSON to GraphQL Schema Converter â Quick Type Defs
Paste a sample JSON response and get back a GraphQL type definition. Speeds up mocking an API layer from a REST endpoint.
Web Font Subset Generator â Reduce Font File to Only Used Glyphs
Paste the characters your site uses and upload a TTF/OTF font. Download a smaller, subsetted WOFF2 for faster page loads.
Semantic Versioning Range Intersection Finder
Enter two semver ranges (e.g., ^1.2.3 and >=1.2.4 <2.0.0) to see if they intersect and what the maximum satisfying version is.
Semantic Versioning Bump Calculator â Whatâs My Next Version?
Select the type of change (breaking, feature, fix) and your current version to see the next semantic version number and git tag suggestion.
Wireframe to HTML Skeleton â Quick Layout Boilerplate
Select a layout (headerâcontentâfooter, sidebar, grid) and get the basic HTML5 structure with CSS grid or flexbox to start prototyping.
CSS Specificity Battle â Compare Two Selectors Side by Side
Enter two CSS selectors and see which one wins in a specificity battle. Displays the (a,b,c) score and explains why one overrides the other.
Glassmorphism Generator â Background Blur & Transparency CSS
Design glassmorphic UI elements by tweaking blur, transparency, border, and shadow. Copy the resulting CSS for cards, navbars, or modals.
Image Silhouette to clipâpath â Online Polygon Extraction
Trace the edge of an object in an image and generate a CSS clipâpath polygon. For nonârectangular layouts.
Data URI Generator â Convert Any File to Inline Data
Convert any small file (CSS, font, image) into a data URI that can be placed directly in HTML or CSS. Reduces HTTP requests for tiny assets.
Custom Lorem Ipsum Generator â Words, Sentences & Paragraphs
Generate dummy text with precise control: number of paragraphs, sentences per paragraph, and words per sentence. Also choose between Lorem Ipsum and random English.
PX to REM & EM Converter â Scalable CSS Units
Convert pixel values to rem or em based on the root font size. Also batchâconvert an entire CSS snippet, replacing px with rem for accessibility.
CSS Obfuscator â Minify & Mangle Class Names
Obfuscate CSS by mangling class names and removing whitespace for production. Use with caution and export a mapping file to keep references intact.
HTML Boilerplate Generator â Custom HTML5 Skeleton
Configure a modern HTML5 boilerplate with your choice of meta tags, social media cards, favicon links, and CSS/JS includes. Download or copy the code.
Typing Effect Text Generator â Animated HTML & CSS Snippet
Type your message and get a selfâcontained HTML/CSS snippet that animates a typing cursor. Customize speed, blink rate, and text color.
International Slug Transliterator â Remove Diacritics for URLs
Convert text containing accented characters (Ă©, ĂŒ, ñ) to their ASCII equivalents for clean, readable URL slugs. Supports many European languages.
Interactive GraphQL Query Builder â Point & Click
Paste a GraphQL schema or introspection result and build queries by checking fields. See the resulting query string and copy it for use in your app.
Date Locale Previewer â Online Intl.DateTimeFormat Visualizer
Select a date, time zone, and locale to see how it appears in various formats (long, short, etc.). Ensure correct i18n.
SRI Hash Generator â Generate Integrity Attributes for Scripts
Paste the content of a JavaScript or CSS file and get its SHAâ256, SHAâ384, or SHAâ512 integrity hash. Build the full <script> tag with crossorigin.
Grid Overlay Tester â Overlay Custom Grids on Live Sites
Enter a URL and apply a custom CSS grid overlay to check alignment. A quick frontend design tool for verifying column placement and baseline grids.
Favicon Badge Generator â Add Notification Dot to Tab Icon
Upload your favicon and overlay a small numbered badge. Download the modified .ico and the JavaScript snippet to dynamically update the count.
Cookie String Parser & Editor â Read document.cookie
Parse a raw cookie string into a readable table. Edit values or create new cookies, then get the properly formatted string to set via JavaScript.
CSS Text Gradient Generator â Gradient Fill for Headings
Apply smooth color gradients to text with a live preview. Generates crossâbrowser CSS including the webkitâbackgroundâclip property.
HTML Character Entity Lookup â Search by Name or Symbol
Search over 1,400 HTML character entities by name, number, or just by typing a symbol. Click to copy the entity code for your markup.
Cron Expression Tester â See Next 10 Execution Times
Enter a cron expression (e.g., */15 * * * *) and see the next 10 dates and times it will trigger. Also explains the schedule in plain English.
Emmet Live Tester â Preview Expansions Instantly
Type any Emmet abbreviation and see the expanded HTML or CSS in real time. A playground for learning and perfecting your Emmet skills.
Markdown Link Checker â Find Broken Hyperlinks in Your Docs
Paste your Markdown file content and the tool extracts all links, then checks each one for a live response. Flag dead links before publishing your docs.
Windows Shortcut Driller â Online Random Win+Key Prompt
Randomly prompts you to press a Windows keyboard shortcut (e.g., Win+E). Learn to be a power user.
Pair Programming Role Assigner â Online Random Driver/Navigator
Enter names and randomly assign driver and navigator roles. Rotate fairly. Team tool.
Ember.js Component Generator - Online Glimmer Starter
Build an Ember.js component with template, class, and styles. Follows Octane conventions. Copy the .hbs and .js.
@fontâface Generator - Online Custom Web Font Snippet
Upload a font file or specify a URL and generate the complete @fontâface rule with modern formats and fontâdisplay. Copy instantly.
MySQL ENUM to TypeScript Union - Online Schema Converter
Paste a MySQL ENUM definition and get a TypeScript union type string literal. For typeâsafe database schemas.
Jest/Vitest Unit Test Generator - Online Function Stub
Write a function name and get a complete unit test stub with describe, it, and expect. Follows AAA pattern.
Remix Route Generator - Online Loader & Action Template
Create a Remix route file with loader, action, and default export. TypeScript ready. Copy the route.tsx.
Viewport Meta Tag Simulator - Online Test Mobile Rendering
Change the viewport meta tag and see how a page would render at different device widths. Understand responsive basics.
Web Component Generator - Online Create Custom Element
Fill in a name and template to generate a complete Web Component class with shadow DOM. Start your library.
!important in Layers Tester - Online Cascade Behavior
Understand how !important behaves inside @layer vs unlayered styles. Interactive example. Avoid common pitfalls.
Changelog from Git Commits - Online Conventional Commits Parser
Paste a git log and generate a polished changelog grouped by type (feat, fix, etc.). Follows Keep a Changelog format. Local.
PostCSS Config Generator - Online Plugin Setup
Select PostCSS plugins (Autoprefixer, nesting, customâmedia) and generate a postcss.config.js file. Streamline your CSS pipeline.
ASCII Text to SVG Converter â Monospaced Diagram Art
Paste ASCII art or textâbased diagrams and convert them into a crisp SVG image. Preserves spacing and can be styled with CSS for documentation.
CSS Declaration Sorter â Online Organize Properties
Paste a CSS rule and sort its declarations alphabetically or by box model grouping. Clean up styles.
Docker Compose File Generator - Online MultiâService Setup
Add services like Node, Postgres, Redis, and Nginx. Configure ports, volumes, and env vars. Download the dockerâcompose.yml.
Stencil.js Component Generator - Online Web Component Starter
Fill in a component name and generate a complete Stencil.js component with TSX, CSS, and test files. Quick start.
Advanced Number Base Converter - Online Bin Oct Dec Hex Custom
Convert numbers between binary, octal, decimal, hex, and any custom base up to 36. With live preview of all bases.
URL Component Encoder/Decoder - Online encodeURIComponent
Encode or decode a string for use in a URL query parameter. See the raw and encoded versions. Dev tool.
Chakra UI Theme Builder - Online Custom Design Tokens
Define brand colors, fonts, and spacing. Generate the Chakra UI extendTheme object. Export as JSON or JavaScript.
CSS Inset Box Shadow Generator - Online Inner Depth
Create inner shadows for a pressed or sunken effect. Visually adjust and copy the CSS. Learn inset.
Service Worker Debugger - Online View States & Update
See the current Service Worker registration, its state, and scope. Send 'skipWaiting' and update. PWA debug.
CSS tabâsize Property Demo - Online Control Indentation
Set tabâsize to any number and see how tabs are displayed in a pre element. Essential for code snippets.
<progress> & <meter> CSS Styler - Online Generator
Style the <progress> and <meter> elements with crossâbrowser CSS. Adjust colors and sizes. Copy the final styles.
Custom Radio & Checkbox CSS Generator - Online
Design custom radio buttons and checkboxes using pure CSS. Choose sizes, colors, and animation. Copy the code.
Accessible Form Builder - Online Semantic HTML Generator
Create a fully accessible form by adding fields; the tool generates the proper labels, inputs, and ARIA attributes. Copy the clean HTML.
CSS Cursor Demo - Online Preview All Pointer Styles
Hover over tiles to see every CSS cursor value in action. Quick visual reference for choosing the right UI feedback.
Logical Properties Playground - Online RTL & Writing Mode
Swap between physical and logical properties (marginâinline vs marginâleft). Live preview with writingâmode. Internationalize your CSS.
Periodic Background Sync Registration - Online PWA Tool
Register a periodic background sync with a minimum interval. See the registration state and tags. Keep content fresh.
ESLint Config Generator - Online Rule Setup
Choose a base style guide (Airbnb, Standard, Google) and add plugins. Generate a readyâtoâuse .eslintrc config.