Changelog

• Added the Social Preview Inspector: fetch a URL or paste HTML to preview how a page renders as a share card on Twitter/X, Facebook, LinkedIn, and Slack. Resolves each platform's real fallback chain (Twitter's own twitter:* tags first, falling back to og:*; Facebook/LinkedIn/Slack read Open Graph directly, falling back to <title>/meta description), and flags missing title/description/image plus title/description truncation per platform's display limits. Reuses the existing SEO Inspector's URL-fetch proxy; dependency-free regex-based meta-tag parsing in src/util/ogSocialPreview.ts, with unit tests.

• Added the Keyboard Event Viewer: press any key and see its live JavaScript event.key, event.code, and legacy event.keyCode values, plus modifier state (Ctrl/Alt/Shift/Meta), repeat, and physical location (standard/left/right/numpad) — useful when wiring up keybindings, shortcut handlers, or game controls. Includes a common key/code/keyCode reference table and a copy-as-JSON button for the last event. Pure client-side keydown listener, no dependencies. Helper logic + reference table in src/util/keyboardEventCodes.ts, with unit tests.

• Added the Gzip / Brotli Inspector: compress text or decompress and inspect an existing gzip, zlib/deflate, raw deflate, or Brotli payload — the kind of base64/hex blob you'd find in a Kubernetes secret or a Lambda response body. Shows a before/after size comparison for compression, and auto-detects the format from magic bytes for decompression (falling back to letting you pick). Gzip/zlib/deflate run via the existing fflate dependency; Brotli uses the browser-native Compression Streams API (feature-detected, with a clear message when unsupported) so no new dependency was added. Dependency-free hex/base64 codecs and format sniffing in src/util/gzipBrotliInspector.ts, with unit tests.

• Added the HTML to JSX Converter: paste raw HTML markup and get a React component back. It applies the fixes JSX requires — class → className, for → htmlFor, attributes like tabindex, colspan, readonly, srcset, and contenteditable mapped to their React spelling, inline style strings → a style object, void elements (img, br, input, ...) self-closed, and HTML comments removed — while preserving data-*/aria-*, and auto-wraps multiple top-level elements in a fragment. Dependency-free string transform in src/util/htmlToJsx.ts, with unit tests.

• Added the SVG to JSX Converter: paste raw SVG markup and get a typed React component back. It applies the fixes JSX requires — class → className, hyphenated/namespaced attributes (stroke-width, xlink:href) → camelCase, inline style strings → a style object, and HTML comments → JSX comments — while preserving data-*/aria-*, and spreads props onto the root <svg>. Dependency-free string transform in src/util/svgToJsx.ts, with unit tests.

• Added the JSON to Zod Schema Converter: paste JSON and get back z.object(...) declarations, inferring .optional() for fields missing from some samples, .nullable() for fields sometimes null, and z.union([...]) for fields whose type varies. Repeated nested shapes are deduplicated into shared schema constants — mirrors the existing JSON to TypeScript converter's structural-merge approach. Dependency-free inference in src/util/jsonToZod.ts (no zod runtime dependency added), with unit tests.

• Extended the UUID / GUID Generator beyond v4/v7 with version 1 (timestamp + node), version 3 (namespace + MD5), and version 5 (namespace + SHA-1). v3/v5 add a namespace picker (DNS/URL/OID/X.500 presets or a custom namespace UUID) and a name field, so entering the same namespace + name always reproduces the same deterministic UUID. Namespace validation logic lives in src/util/uuidNamespaces.ts with unit tests.

• Added the CSS Box Shadow Generator: a visual box-shadow builder with per-layer controls for offset-x/offset-y, blur, spread, color (with alpha), and inset, support for stacking multiple layers, one-click Material elevation / neumorphism / long-shadow / glow presets, a live preview against a light or dark background, and copyable generated CSS. All shadow math runs client-side in src/util/boxShadow.ts.

• Added Hash table with chaining: a new curated Excalidraw template (Interview: Coding category) showing a 5-slot hash table with a worked key collision resolved via chaining, alongside the existing array/linked-list/tree/graph interview-prep templates. New preview image and OG image rendered via Playwright.

• Added How to create a Use Case diagram in PlantUML: a per-type landing page covering actor/use-case declaration syntax, a worked customer/support-agent example, a reference table for association/include/extend/generalization relationships, system boundaries via rectangle, and a live PlantUML Playground link — mirrors the existing create_sequence_diagram / create_class_diagram / create_activity_diagram pages. Renders 2 new PNGs via the live PlantUML playground + Playwright, committed under public/static/plantuml_pics/.

• Added How to create an Activity diagram in PlantUML: a per-type landing page covering start/:Action;/stop syntax, a worked order-fulfillment if/else example, a reference table for conditions, loops (repeat/repeat while), parallel forks (fork/fork again/end fork), and swimlanes, plus a swimlane example and a live PlantUML Playground link — mirrors the existing create_sequence_diagram / create_class_diagram pages. Renders 2 new PNGs via the live PlantUML playground + Playwright, committed under public/static/plantuml_pics/.

• Added How to create a Class diagram in PlantUML: a per-type landing page covering class/attribute/method syntax, a worked inheritance + composition example (Animal/Dog/Owner), a relationship reference table covering all 5 UML arrows (inheritance, composition, aggregation, association, dependency), visibility modifiers, abstract classes/interfaces, and a live PlantUML Playground link — mirrors the existing create_sequence_diagram page and MermaidJS class-diagram page. Renders 2 new PNGs via the live PlantUML playground + Playwright, committed under public/static/plantuml_pics/.

• Added How to create a Sequence diagram in PlantUML: a per-type landing page covering @startuml/@enduml sequence syntax, a worked login-flow example (Client/API Gateway/Auth Service/User DB with an alt/else valid/invalid-credentials branch), a message-type reference table (sync call, async call, sync return, colored arrow, activation bar + self call) with a rendered legend, and a live PlantUML Playground link — mirrors the existing MermaidJS per-type diagram pages and links to the built-in /plantuml/ editor.

• Added How to create a Git graph diagram in MermaidJS: a per-type landing page covering gitGraph syntax, a worked main/develop example with branching, a hotfix merged from main, a feature merge back with a v1.0 tag, a syntax reference table (commit, branch, checkout, cherry-pick, highlighted commit) with a rendered legend, and merge/tag notes, with a live MermaidJS Playground link — mirrors the existing sequence/flowchart/class/ER/state/Gantt-diagram pages.

• Added How to create Gantt chart in MermaidJS: a per-type landing page covering gantt syntax, a worked Website Redesign example with sections and after-chained task dependencies, a task-status reference table (done, active, default, critical) with a rendered legend, and section/date-format notes, with a live MermaidJS Playground link — mirrors the existing sequence/flowchart/class/ER/state-diagram pages.

• Added Du Command Generator: build du commands interactively with human-readable sizes, summarize/grand-total flags, max-depth, apparent-size, exclude patterns, and an option to pipe to sort -hr for largest-first output — mirrors the existing curl/tar/mysql command generators.

• Added How to create State diagram in MermaidJS: a per-type landing page covering stateDiagram-v2 syntax, a worked Idle/Running/Paused state-machine example, a transitions/pseudostates reference table (transition, start, end, choice) with rendered previews, and a composite/nested-state example, with a live MermaidJS Playground link — mirrors the existing sequence/flowchart/class/ER-diagram pages.

• Added How to create ER diagram in MermaidJS: a per-type landing page covering erDiagram syntax, a worked CUSTOMER/ORDER/LINE_ITEM example with attributes, and a crow's-foot cardinality reference table (exactly-one, zero-or-one, zero-or-more, one-or-more) with rendered previews, with a live MermaidJS Playground link — mirrors the existing sequence/flowchart/class-diagram pages.

• Added How to create Class diagram in MermaidJS: a per-type landing page covering class syntax (attributes/methods, visibility modifiers), the 5 UML relationship arrows (inheritance, composition, aggregation, association, dependency) with rendered previews, and multiplicity labels, with a live MermaidJS Playground link — mirrors the existing sequence/flowchart pages.

• Added How to create Flowchart diagram in MermaidJS: a per-type landing page covering node shapes (rectangle, rounded, diamond, cylinder) and TD/LR direction, with a live MermaidJS Playground link to explore the example — mirrors the existing sequence-diagram page.

• Added Code Screenshot Generator: turn a code snippet into a beautiful, shareable image with syntax highlighting, gradient backgrounds, and optional window chrome, rendered and exported entirely in your browser.

• Added JSON to TypeScript: paste JSON and get TypeScript interface declarations, inferred entirely in your browser with optional fields and union types when array samples differ.

• Added DBML Editor: write DBML and see a live entity-relationship diagram, then export SQL DDL for PostgreSQL, MySQL, SQL Server, or Oracle — the inverse of our existing SQL DDL to ERD diagram tool.

• Added ULID Generator & Decoder: generate time-sortable ULIDs (batch of up to 50) and decode existing ones back into their embedded timestamp, computed entirely in your browser.

• Added JSON Graph Visualizer: paste JSON and see it rendered as a force-directed node graph — every object, array, and value becomes a node linked to its parent, computed entirely in your browser.

• Added CSS Unit Converter: convert between px, rem, em, pt, pc, in, cm, mm, vw, and vh, with adjustable root/parent font size and viewport width/height — built entirely in your browser.

• Added a searchable pattern library to Regex Tester (Email, IPv4, IPv6, URL, semver, JWT). Picking a pattern fills the Expression field, and named test cases below it re-evaluate live against your current expression with PASS/FAIL badges — so you can tweak a pattern and immediately see which sample strings still match.

• Added a "Preview sample UI" split pane to Color Palette Generator: see the generated palette applied to a form, hero section, page frame (header/footer), and app-like screen — each collapsible, updating live as you change the base color.

• Added UTM Builder: enter a destination URL and campaign parameters (utm_source, utm_medium, utm_campaign, term, content, id) to generate a ready-to-share, percent-encoded campaign tracking URL — built entirely in your browser.

• Added Color Palette Generator: enter a HEX/RGB/HSL color and get a 50–950 tonal scale, tints, shades, and complementary/analogous/triadic harmonies, each copyable as hex.

• Added CIDR / Subnet Calculator: enter an IPv4 CIDR block and get the network/broadcast address, subnet mask, wildcard mask, usable host range, and address count.

• Added "Open in JQ editor" action on JSON Formatter for quick handoff to JQ Playground.

• Improved compare layout and formatting in File Diff
• Improved rendering/styling in Markdown Editor preview.

• Added File Diff tool for side-by-side text comparison.

• Improved Interview problems layout and dark mode readability.

• Improved tab rename/delete flow in Excalidraw.

• Added Stack Trace Formatter tool: format and beautify stack traces from any language or log.

• Added kubectl cheatsheet to the cheatsheets collection.

• Added Excalidraw tool for drawing diagrams.

• SQL playground

• Base64 encoder
• Base64 decoder
• Timezones cities list - frequent cities with timezones

• Timezone compare
• CSV Viewer - view csv as a table
• CSV to SQL - convert csv to sql create table and inserts
• CSV to JSON - convert csv to json
• CSV query with SQL - query csv with sql playground (as sqlite)

• JSON viewer
• CSV Viewer

• Mysql in docker and Postgres in docker how to guides

• Git cheatsheet added help about bisect, checkout tags, checking out to new folder and branch
• added random number code hints for java, python, and javascript

• Inline SQL variables quick tool to replace ? in your SQL with vars

• MySQL command builder got an option to share via url link and more options
• added zip and unzip cheatsheets Zip cheatsheet Unzip cheatsheet

• base64 image encoder Base64 image encoder

• mysql command line builder + code generator for popular libraries MySQL command builder

• tar command line builder is added at Tar command builder

• see at Interview solutions here

• see at Interview questions here

• Added multiple blog posts about emailing from Azure

• Added new JSON diff viewer based on codemirror merge plugin
• see it here JSON diff viewer

• Just started on Canvas playground
• Canvas cheatsheet
• unicode flags cheatsheet
• small internal improvements on SEO for cheatsheets

• tuned codemirror dracula theme for better "selected" visibility
• "Add Element" button in the Graphviz playground has a dropdown with options
• new ASCII Tree tool is added
• blog post about ASCII is published

• ASCII characters page - to just see all ASCII characters in one place
• ASCII Box Drawing - to see how to draw shapes/boxes/trees with ASCII
• ASCII Comment Art - fun ASCII art to use in code comments
• Text to ASCII Art - text to ascii art for comments (big letters)
• Added popup/full-width to ddl-to-diagram page

• Added pan/zoom/full width controls for MermaidJS diagrams see MermaidJS Playground Page
• Added pan/zoom/full width controls for Graphviz diagrams see Graphviz Playground Page

Added premium packages for the site and pricing page, see at Pricing page

Added download as PNG and copy as RichText options for google doc/word export of diagrams:

• MermaidJS editor
• Graphviz
• DDL to ERD diagram

• Added a new blog post build mermaidjs markup in python
• Updated the mermaidJS cheatsheet with new examples on style, subgraph, and more.

• Add Table DDL tab to the SQL playground page
• Tables show row count e.g customers (10)

• Display error in the MermaidJS editor when the markup is invalid.

see XML formatter page

• show inline errors in the editor
• more examples of sqlite imports
• updated layout see SQL playground page

• added AI on python playground
• added AI on JS playground
• added AI on Regex tester page

• website is rewritten from scratch from GatsbyJS to NextJS (still static site rendering)
• from JS to TS