About MRHTML

A focused toolkit for front-end developers. No account required.

What is MRHTML?

MRHTML helps you try common front-end development tasks in your browser. Adjust a tool’s inputs, inspect the result, and copy or download the output for your own project.

Available tools

  • Flexbox Generator: Configure direction, alignment, wrapping, and spacing for a CSS flex container.
  • Box Shadow Generator: Adjust a CSS shadow’s offset, blur, spread, color, and opacity with a live preview.
  • Button Generator: Style a button’s label, spacing, border, and colors, then copy its HTML and CSS.
  • Gradient Generator: Create linear or radial CSS gradients with three adjustable color stops.
  • Code Diff: Compare code with word or character highlights, then merge selected changes locally.
  • HTML Formatter: Format HTML with Prettier, including embedded CSS and JavaScript.
  • CSS Formatter: Format CSS with Prettier and consistent indentation, spacing, and line breaks.
  • JavaScript Formatter: Format JavaScript with Prettier without executing your code.
  • JSON Formatter & Validator: Format and validate JSON while preserving numeric precision and detecting duplicate keys.
  • HTML Table Generator: Turn quoted CSV or TSV into an escaped HTML table with semantic headers.
  • HTML Entity Encoder & Decoder: Escape HTML text or decode named and numeric character references.
  • URL Encoder & Decoder: Encode or decode URL components, full URLs, and form values with explicit modes.
  • Color Converter: Convert HEX, RGB, and HSL colors with alpha support and a color preview.
  • Contrast Checker: Calculate text contrast and compare it with WCAG AA and AAA thresholds.
  • CSS Grid Generator: Build fixed or responsive CSS grids with adjustable tracks and gaps.
  • Meta Tag Generator: Generate escaped page metadata with an approximate search result preview.
  • Open Graph & Twitter Card Generator: Create social sharing metadata and inspect an approximate card preview.
  • Markdown to HTML: Convert Markdown into sanitized HTML and inspect a sandboxed preview.
  • JavaScript Regex Tester: Test JavaScript patterns with match details in a worker that can be stopped.
  • Fluid Typography Clamp Generator: Generate a CSS clamp value between chosen font sizes and viewport widths.
  • PX to REM Converter: Convert pixels and rem units using your chosen root font size.
  • Unicode Base64 Encoder & Decoder: Encode UTF-8 text as Base64 or decode valid Base64 back into Unicode text.
  • Robots.txt Generator: Build robots.txt groups, path rules, and sitemap directives with validation.
  • Border Radius Generator: Adjust four independent corner radii and copy the matching CSS.
  • JSON, CSV & YAML Converter: Convert JSON, CSV, and YAML with exact numeric tokens, explicit CSV typing, and spreadsheet export controls.
  • HTML & SVG to JSX Converter: Convert HTML and SVG into JSX with React attribute names, style objects, and clear conversion notices.
  • Image Optimizer & Converter: Resize and convert local PNG, JPEG and WebP images with transparency controls and actual output-size comparison.
  • Favicon Generator: Create a real local favicon ZIP with PNG sizes, a multi-entry ICO, icon manifest and ready-to-use HTML links.
  • Responsive Image Markup Builder: Generate escaped img and picture markup with srcset, sizes, dimensions, alt text and loading hints from your existing assets.
  • SVG Optimizer: Optimize SVG locally with preserved viewBox, IDs and accessible labels, exact output, and a restricted preview.
  • CSS Selector & Specificity Lab: Calculate selector weights, resolve CSS nesting, and inspect matches against inert sample HTML.
  • CSS Animation & Easing Builder: Build transform and opacity keyframes, tune cubic Bézier easing, and export CSS with a reduced-motion fallback.
  • Responsive HTML & CSS Playground: Edit HTML and CSS, inspect explicit viewport sizes in an isolated preview, and export the exact filtered standalone document.
  • Accessible Form Builder: Build native fields with labels, help text, required choices, and fieldsets. Check local validity and export a complete form example.
  • HTML Accessibility Preflight: Check pasted HTML for scoped source issues in labels, ID references, image alternatives, headings, and document metadata. Local parsing with source locations.
  • JSON to TypeScript: Infer a TypeScript type from a JSON sample with quoted property keys, nested shapes, mixed array unions, and explicit empty-value limits. Runs locally.
  • JSON Schema Validator: Validate a JSON instance against a bounded Draft 7 schema with Ajv in a cancellable local worker. Read JSON Pointer diagnostics without remote reference requests.
  • Palette & Design Tokens: Build named color ramps, assign interface roles, check text contrast, and export CSS variables or JSON tokens.
  • Mock Data Generator: Create reproducible fictional records from a seed, choose field types and bounds, and export JSON or escaped CSV.
  • JSONPath Tester: Query local JSON with a bounded RFC 9535 engine and inspect matching values with normalized paths.
  • JWT Inspector: Decode JWT header and payload JSON locally with exact numeric tokens and clear untrusted-claim notices. No signature verification.
  • Unix Timestamp Converter: Convert Unix seconds, milliseconds, and ISO dates with explicit offsets, exact millisecond values, and UTC or IANA timezone displays.
  • UUID Generator & Inspector: Generate secure UUIDv4 and UUIDv7 batches locally, inspect version and variant fields, and extract untrusted v7 timestamps.
  • File Hash & SRI Generator: Hash local file bytes with SHA-256, SHA-384, or SHA-512 and export matching hex, Base64, or SRI values without uploading.
  • CSS Clip-path Builder: Create circle, ellipse, inset and polygon clips with numeric geometry and exact CSS export.
  • CSS Transform & Perspective Playground: Explore transform order, 3D origin and parent perspective with matching CSS and HTML.
  • CSS Filter & Backdrop Composer: Compose ordered element or backdrop filters with a local before-and-after preview and CSS fallback.
  • Modular Type Scale & Rhythm Calculator: Calculate modular rem sizes, line heights and spacing rhythm with CSS tokens and CSV export.
  • JSON-LD Structured Data Builder: Create escaped Article, BreadcrumbList and Organization JSON-LD scripts from your own facts, with local URL and date checks.
  • Sitemap XML Builder & Validator: Build URL-set or index XML from a URL list or CSV, and check local sitemap structure, namespaces, dates, duplicates and URL scope.

How the tools work

The tools process inputs locally in your browser. Each tool includes instructions, examples, and limitations alongside its controls. Generated code is a starting point: test it with your own content, layout, and accessibility requirements.

You can navigate the controls with a keyboard and choose a light or dark theme. The site does not claim a complete accessibility certification.

Availability

The tool directory lists working browser tools. 25 original HTML templates include live previews, local assets, and complete ZIP downloads. 35 runnable snippets demonstrate useful interface patterns. Contact submissions are not currently available.