{
  "id": 11054443,
  "title": "How I built a VS Code extension that draws Railroad diagrams for regex and catches ReDoS",
  "url": "https://urgent.news/2026/09/30/how-i-built-a-vs-code-extension-that-draws-railroad-diagrams-for",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-30T23:18:30.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/xlka11/how-i-built-a-vs-code-extension-that-draws-railroad-diagrams-for-regex-and-catches-redos-30f5"
  },
  "original_language": "en",
  "account": "This story chronicles the development of a Visual Studio Code (VS Code) extension that creates Railroad diagrams for regular expressions and detects ReDoS (Regular Expression Denial-of-Service) vulnerabilities. The author, frustrated by the time-consuming process of testing regex patterns using external tools, decided to create Ghost Regex to streamline the workflow within the editor.\n\nGhost Regex is a panel within VS Code that, when opened with a keyboard shortcut (Ctrl+Alt+R), displays a visual representation of the regex pattern – a Railroad diagram. This diagram highlights every group, quantifier, and alternation in the pattern, using colors to differentiate semantic elements such as anchors, groups, and repetitions. Users can hover over nodes for tooltips explaining the function of each component. The extension also offers an exported SVG and AST tree, breaking down the expression into its constituent tokens, including the purpose of each character, nested group structures, quantifiers, anchors, and overlaps.\n\nIn addition to visual aids, Ghost Regex includes a ReDoS detector, identifying problematic patterns that may cause performance issues on larger strings and providing automated fixes. The extension allows users to preview regex patterns directly within their source files, enhancing the debugging experience by highlighting matches in real-time rather than relying on test strings.\n\nThe extension comes equipped with 94 built-in code snippets categorized into eight groups, covering various use cases such as validation, date formats, numbers, web development, extraction, Russian documents, coordinates, and more. Users can convert their regex patterns into code in five programming languages: Python, JavaScript, Go, Rust, and Java, with compatibility analysis between dialects. The extension supports sync back functionality, enabling users to revert from the panel to their code seamlessly without manual copy-pasting.\n\nUnder the hood, Ghost Regex is built using TypeScript and Node.js, coupled with the VS Code Extension API for creating the webview panel. It leverages esbuild for building the extension package and the @vscode/vsce library for packaging. The core libraries include regex-inspector for AST parsing and ReDoS analysis, and railroad-diagrams for rendering the diagrams. The architecture is modular, consisting of 13 separate modules, each isolated to prevent conflicts when updates are made to one module.\n\nThe project follows a Free + Pro model, with the free version providing all core functionalities, including the ability to use the tool indefinitely. The Pro version is available for a monthly subscription fee ($6), which unlocks additional features, such as previewing regex patterns on real files, automated unit testing, syncing back positions, exporting diagrams as SVGs, and converting regex patterns into code for Go, Rust, Java, and PCRE dialects. The author offers the extension as free software, with the Pro model providing ongoing updates, support, and premium features.\n\nLooking ahead, the project is set to implement several enhancements. Plans include server-side license verification using Cloudflare Workers and KV storage to replace the current local key verification method, enabling larger user bases without the need for local key management. Additionally, the extension aims to introduce a snippet search feature, allowing users to quickly locate snippets by name. The author is also working on a step-by-step debugger for the extension and intends to automate the delivery of purchase keys via email, streamlining the user experience further.",
  "summary": "It started with frustration. I write code every day. And every time I need a regex more complex than \\d+, the same thing happens: I open my browser, go to a website, type the pattern, test it, copy it back to the editor. An hour later — again. And so on in a loop. The problem isn't that tools don't exist. The problem is they're not where I work. I don't want to switch windows to check a single…",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}