Changelog

• Added the AI Chat Screenshot Generator: create realistic ChatGPT, Claude, or Copilot chat screenshots (with markdown and code-block rendering), or Copilot CLI / Claude Code terminal-session screenshots (with tool-call and diff-line coloring) — editable turn-by-turn, exported as a PNG entirely in your browser. A mockup/parody generator for docs, tutorials, and social posts; not affiliated with OpenAI, Anthropic, or Microsoft/GitHub.

• Added the Lua Cheat Sheet: variables and types, control flow, tables (arrays, maps, nesting), the string library, functions/closures/varargs, metatables (the standard Lua OOP pattern with setmetatable/__index), coroutines, and pcall/assert error handling. Cross-linked with the Lua Playground.

• Added the Lua Playground: write and run Lua code directly in your browser via Fengari (a pure-JS Lua 5.3 VM — no WASM, no server). Ships with 4 examples (hello world, tables, strings, recursion/coroutines), print()-based console output, share-by-URL, and a 2-second execution-time guard so a runaway loop can't freeze the page. Fills the last gap in the interview-judge language set's <lang>/online pattern (go/java/rust/c++/ruby all run remotely via toyapi; python/javascript/lua now run client-side).

• Added the Live-code Audio Playground: write JavaScript against the real Tone.js API (synths, sequences, the Transport) and hear it play live in your browser via the Web Audio API — pure JS, no WASM, no server. Ships with 5 examples (single note, arpeggio sequence, drum pattern, chord progression, generative random melody), a log() status-output panel (no visible console otherwise), share-by-URL, and inline runtime-error reporting. Every Run swaps in a fresh Tone.js audio context so re-running or switching examples never stacks overlapping sounds (src/util/liveCodeAudio.ts).

• The Graphviz editor, Mermaid playground, JQ playground, and XPath playground now have a "Saved sessions" menu (same save/restore pattern as OpenSCAD and SQL Playground): save your current source under a name, reopen it later, and sign in to sync across devices instead of only sharing via URL.
• Also fixed the Graphviz page's "About this editor" section, which was rendering centered instead of left-aligned like every other playground's intro text.

• The Box-Drawing Characters page's "Ask AI" button now opens an embedded, page-aware assistant (instead of linking out to the generic chat) that already knows the full character list and your current search/selection, so you can ask things like "which character makes a rounded corner?" without re-explaining the page.

• Added the L-system Generator: type an axiom + rewrite rules (a Lindenmayer system) and watch the fractal turtle-graphics drawing update live. Ships with 5 classic examples (Koch snowflake, Sierpinski triangle, dragon curve, fractal plant, Levy C curve), adjustable iteration count/angle/step length, share-by-URL, and runaway-expansion/line-count guards so a heavy rule set can't hang the browser (src/util/lsystem.ts).

• Added the Blockly Playground: drag blocks together (Logic, Loops, Math, Text, Lists, Variables, Functions) using Google's Blockly library, see the generated JavaScript update live, and click Run to execute it with a custom print block feeding an output panel. 3 starter examples (Hello World loop, simple math, if/else), share-by-URL (encodes the serialized block workspace), and inline runtime-error reporting (src/util/blocklyPlayground.ts).

• Added the p5.js Sketch Playground: write a p5.js sketch (p.setup/p.draw instance-mode API) and see it render live in your browser, same engine as the official p5.js web editor. Pure JavaScript, no server. Ships with 4 examples (bouncing ball, particle system, Perlin noise flow field, mouse-reactive grid), share-by-URL, and inline runtime-error reporting that keeps the canvas area from silently breaking (src/util/p5Playground.ts).

• Added the GLSL Shader Playground: write a ShaderToy-style mainImage(out vec4 fragColor, in vec2 fragCoord) GLSL fragment shader and see it render live and animated via real WebGL, right in your browser. Pure WebGL, no WASM, no server round-trip. Ships with 4 examples (UV gradient, animated plasma, soft circle, mouse-reactive glow), iResolution/iTime/iMouse uniforms, share-by-URL, and inline compile-error reporting remapped back to your own source line numbers (src/util/glslPlayground.ts).

• Added Mind Map Maker: build a mind map by adding branches off any selected node, drag nodes anywhere to rearrange, double-click to rename, and color-code branches. Fully client-side (SVG canvas + pointer-event dragging, no new dependency), auto-saved to localStorage — no account, no backend. Mirrors the existing Kanban Board's local-storage-only approach. Node-tree data model + tests in src/util/mindMap.ts.

• Added the JSCAD Playground: write JavaScript against the @jscad/modeling CSG API (cubes, spheres, unions, subtractions, extrusions) and see the resulting 3D model rendered live in an interactive three.js viewer. Pure JS, no WASM, runs entirely in your browser — the direct JavaScript sibling to the OpenSCAD Playground. Ships with cube/union/subtract/extrude examples, share-by-URL, and unit-tested geometry conversion (src/util/jscadConvert.ts).

• Added the Logo Turtle Graphics Playground: type classic Logo turtle commands (forward, right, repeat N [ ... ], penup/pendown, color, and more) and watch the turtle draw on an HTML5 canvas, live. Ships with square/star/flower/spiral examples, share-by-URL, and a truncation guard against runaway repeat counts. Hand-rolled parser/interpreter (no eval, no new dependencies) with unit tests in src/util/logoTurtle.ts.

• Added the Messaging Screenshot Generator: build a fake text-message conversation and export it as an image styled like iMessage, WhatsApp, or Telegram. Add messages from either side, set optional timestamps, a contact name, and status text, then download a PNG or copy it to your clipboard — fully client-side, nothing is uploaded. Sibling to the existing Social Post Screenshot Generator, but for multi-message conversations instead of single posts.

• Added the Ruby Playground: write and run Ruby code in the browser against a real Ruby interpreter, with the same editor, example dropdown, share-by-URL, and embedded AI chat as the existing Go/Rust/Java/C++ playgrounds. Ships with hello world + recursion, collections (Hash/Array/Enumerable), and classes/inheritance examples. Reuses the existing /playground/execute backend (already supported ruby) and the existing Ruby CodeMirror editor — no new dependencies.

• Added the C++ Playground: write, compile, and run C++ code in the browser against a real C++ toolchain, with the same editor, example dropdown, share-by-URL, and embedded AI chat as the existing Go/Rust/Java playgrounds. Ships with hello world + recursion, STL containers (std::map/std::vector/std::sort), and classes/polymorphism examples. Reuses the existing /playground/execute backend (already supported c++) and the existing C++ CodeMirror editor — no new dependencies.

• Added the Kanban Board: a lightweight scrum/task board with draggable cards and columns (To Do / In Progress / Done by default, add/rename/delete your own). Drag cards within or between columns via @hello-pangea/dnd (the same drag library already used by the TODO List). Fully client-side with no backend — state is saved to localStorage via @mantine/hooks' useLocalStorage, so it persists across reloads but stays private to this browser/device.

• 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