{"id":50800639,"url":"https://github.com/jamdesk/utilities","last_synced_at":"2026-06-12T19:03:54.809Z","repository":{"id":345106357,"uuid":"1184364617","full_name":"jamdesk/utilities","owner":"jamdesk","description":"Free, open-source MDX utilities — Markdown table generator, JSON to frontmatter converter, and more","archived":false,"fork":false,"pushed_at":"2026-06-10T18:34:45.000Z","size":2572,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-10T20:10:35.393Z","etag":null,"topics":["developer-tools","jamdesk","markdown","mdx","nextjs","open-source","react","utilities"],"latest_commit_sha":null,"homepage":"https://www.jamdesk.com/utilities","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jamdesk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":"NOTICE","maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-17T14:14:34.000Z","updated_at":"2026-06-10T18:35:34.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/jamdesk/utilities","commit_stats":null,"previous_names":["jamdesk/jamdesk-utilities"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jamdesk/utilities","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamdesk%2Futilities","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamdesk%2Futilities/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamdesk%2Futilities/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamdesk%2Futilities/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamdesk","download_url":"https://codeload.github.com/jamdesk/utilities/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamdesk%2Futilities/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34258372,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-12T02:00:06.859Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["developer-tools","jamdesk","markdown","mdx","nextjs","open-source","react","utilities"],"created_at":"2026-06-12T19:03:53.385Z","updated_at":"2026-06-12T19:03:54.800Z","avatar_url":"https://github.com/jamdesk.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Jamdesk Utilities\n\n[![License: Apache 2.0](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](./LICENSE)\n[![Next.js 16](https://img.shields.io/badge/Next.js-16-black?logo=next.js)](https://nextjs.org)\n[![Website](https://img.shields.io/badge/jamdesk.com%2Futilities-live-brightgreen)](https://www.jamdesk.com/utilities)\n\nFree, open-source tools for MDX, Markdown, YAML, JSON, and Mermaid diagrams that run in your browser wherever possible. No uploads, no accounts. Paste your content, get results. (The OpenGraph Preview is the exception: it fetches the URL you enter through a small server endpoint, since browsers block cross-site reads — nothing is stored or logged.)\n\n**[jamdesk.com/utilities](https://www.jamdesk.com/utilities)**\n\nBuilt with Next.js 16, React 19, CodeMirror 6, Prettier, Mermaid, and the unified/remark ecosystem. Licensed under Apache 2.0.\n\n---\n\n## Tools\n\n### MDX Formatter\n\nPaste messy MDX and get clean, consistently indented output. Uses Prettier's MDX parser under the hood, so the formatting rules match what most documentation projects already enforce in CI. Handles frontmatter, JSX component props, nested markdown, and code blocks without mangling anything inside fences.\n\nOptions: 2-space or 4-space indentation.\n\n### MDX Validator\n\nCatches syntax errors before your build does. Paste MDX and the validator parses it with the same remark-mdx pipeline that documentation compilers use. Unclosed JSX tags, malformed frontmatter, unbalanced expressions: each error shows the line number, column, and a description. Click an error to jump to that line in the editor.\n\n### MDX Viewer\n\nLive preview of your MDX without spinning up a dev server. The viewer parses MDX to an AST and renders headings, paragraphs, lists, code blocks, and frontmatter as styled elements. JSX components show as labeled stubs with their props displayed, so you can see your content structure without the actual component implementations.\n\n`\u003cCallout type=\"warning\"\u003e` renders as a bordered box with \"Callout (type: warning)\" as the label. Self-closing components like `\u003cApiEndpoint method=\"GET\" path=\"/users\" /\u003e` render as compact badges.\n\n### MDX to Markdown\n\nStrips JSX from MDX and gives you standard Markdown. Import and export statements are removed. JSX wrapper components (`\u003cCallout\u003etext\u003c/Callout\u003e`) keep their children text and lose the tags. Self-closing components (`\u003cApiEndpoint /\u003e`) are removed entirely. Frontmatter stays untouched.\n\nUseful when migrating away from MDX, publishing to Markdown-only platforms, or diffing content without JSX noise.\n\n### Markdown to HTML\n\nConvert Markdown into clean, semantic HTML. Paste Markdown and get headings, lists, links, tables, code blocks, and inline formatting as standards-compliant markup, ready to drop into a template, email, or CMS. Runs entirely in the browser through the remark/rehype pipeline.\n\n### YAML Validator\n\nCatch YAML errors before they break a build. Paste frontmatter, a CI config, or a Kubernetes manifest and the validator parses it, reporting syntax errors with the line and column. Valid documents show a parsed-structure preview so you can confirm the shape is what you expected.\n\n### JSON ↔ YAML\n\nConvert between JSON and YAML in either direction. Paste one format and get the other with formatting preserved. Handy for moving config between tools that disagree on format, or reading a dense block of JSON as more legible YAML.\n\n### Markdown Table Generator\n\nTurn CSV or TSV into a Markdown table. Paste comma- or tab-separated rows and get a properly aligned Markdown table to drop into docs, a README, or a GitHub issue. The delimiter and header row are detected automatically.\n\n### Mermaid Editor\n\nWrite [Mermaid](https://mermaid.js.org/) syntax and watch the diagram render live as you type. Supports every Mermaid diagram type — flowcharts, sequence diagrams, timelines, pie charts, Gantt charts, class and state diagrams, and entity relationship diagrams — each with a built-in sample to start from. A light/dark preview toggle matches the diagram to the background you're targeting. Mermaid runs in strict security mode and every rendered SVG is sanitized (the diagram source can arrive through a share link), so a pasted diagram can't smuggle in a script.\n\n### OpenGraph Preview\n\nPreview and validate how any URL renders when shared on X, Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage, and Google — with tag-level validation, image dimension checks, and fix hints. Uses a small server endpoint (`/api/og-preview`) because browsers block cross-site reads.\n\n---\n\n## How It Works\n\nProcessing happens client-side wherever the browser allows it — only the OpenGraph Preview calls a server, to work around cross-site read restrictions. Otherwise your content never leaves the browser.\n\nEach tool lazy-loads only the engine it needs, so a page pays only for what it uses:\n\n1. **Formatting** uses Prettier's standalone browser build with the built-in MDX parser. About 400KB gzipped, loaded when you first open the formatter.\n2. **Parsing, validation, and stripping** use a remark pipeline: `remark-parse` + `remark-mdx` + `remark-frontmatter`. About 100KB gzipped, lighter than the full `@mdx-js/mdx` compiler since it skips the compilation step.\n3. **Diagrams, Markdown, and config** load on demand too: the Mermaid editor pulls in Mermaid (~1.5MB) only when you open it, the Markdown tools use the remark/rehype pipeline, and the YAML/JSON tools load a small YAML parser.\n\nThe formatter page doesn't load the remark pipeline. The validator doesn't load Prettier. Open the Mermaid editor and nothing else pulls in Mermaid. Each tool pays only for what it needs.\n\nThe editor is CodeMirror 6 with markdown + JSX syntax highlighting, line numbers, and bracket matching. Paste events trigger processing immediately; keystrokes are debounced at 300ms.\n\n---\n\n## Features\n\n**Share links.** Content is encoded in the URL hash (`#content=base64...`). Copy the URL to share a pre-populated tool state with someone. Nothing hits a server.\n\n**File upload.** Drag and drop `.mdx` or `.md` files onto the input panel, or click Upload. You can also fetch raw files from any URL (handy for GitHub raw links).\n\n**Sample content.** Each tool loads with example MDX that shows off what it does. Hit \"Load Sample\" to reset.\n\n**Command palette.** `Cmd+K` / `Ctrl+K` opens a search palette to jump between tools.\n\n**Copy and download.** One click to copy output to clipboard or download as a file. The MDX-to-Markdown tool saves as `.md`; the others save as `.mdx`.\n\n**Mobile layout.** Responsive two-panel design with a tab toggle (Input / Output) on narrow screens.\n\n---\n\n## Tech Stack\n\n| Layer | Technology |\n|-------|-----------|\n| Framework | Next.js 16 (App Router) |\n| UI | React 19, Tailwind CSS 4, shadcn/ui |\n| Code editor | CodeMirror 6 |\n| MDX formatting | Prettier standalone (browser build) |\n| MDX parsing | unified + remark-parse + remark-mdx + remark-frontmatter |\n| Command palette | cmdk |\n| Testing | Vitest + Testing Library |\n| OG images | Satori + @resvg/resvg-js (build-time) |\n\n---\n\n## Development\n\n```bash\ngit clone https://github.com/jamdesk/utilities.git\ncd utilities\nnpm install\nnpm run dev\n```\n\nOpens at [localhost:3000/utilities](http://localhost:3000/utilities). The `/utilities` prefix comes from `basePath` in `next.config.ts`.\n\n### Project Structure\n\n```\napp/\n├── layout.tsx              # Root layout, header, footer, fonts\n├── page.tsx                # Hub page with tool grid\n├── sitemap.ts              # Auto-generated sitemap\n├── llms.txt/route.ts       # Machine-readable tool list for AI crawlers\n└── [tool]/\n    ├── layout.tsx          # Per-tool metadata, OG, JSON-LD\n    └── page.tsx            # Tool UI + SEO content\ncomponents/\n├── editor/                 # CodeMirror wrapper, input/output panels, toolbar\n├── tools/                  # MdxFormatter, MdxValidator, MdxViewer, MdxToMarkdown\n├── shell/                  # Header, footer\n├── command-palette/        # cmdk integration\n└── seo/                    # JSON-LD, FAQ, conversion CTA\nlib/\n├── mdx-engine.ts           # Remark pipeline (parse, validate, strip)\n├── mdx-formatter.ts        # Prettier standalone wrapper\n├── tools.ts                # Tool registry (drives routing, sitemap, metadata)\n├── samples.ts              # Sample MDX per tool\n├── share.ts                # URL hash encode/decode for share links\n└── analytics.ts            # Plausible event tracking\n```\n\n### Adding a New Tool\n\n1. Add an entry to `lib/tools.ts` (slug, name, description, SEO fields, CTA text)\n2. Create a component in `components/tools/YourTool.tsx`\n3. Add the slug case in `components/tools/ToolEditor.tsx`\n4. Add sample content in `lib/samples.ts`\n5. Add SEO content (how-to, FAQ) in `lib/tool-seo-content.ts`\n\nThe tool registry drives everything else: hub grid, routing, sitemap, OG images, llms.txt, and the command palette.\n\n---\n\n## Testing\n\n```bash\nnpx vitest run          # 92 unit + integration tests\nnpx tsc --noEmit        # Type check\nnpm run build           # Production build (generates OG images)\n```\n\nTests cover the MDX engines (formatting, validation, stripping with edge cases), tool registry, share link encoding, analytics helper, and component rendering.\n\n---\n\n## License\n\nApache 2.0. See [LICENSE](LICENSE).\n\nBuilt by [Jamdesk](https://www.jamdesk.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamdesk%2Futilities","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamdesk%2Futilities","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamdesk%2Futilities/lists"}