How I built a VS Code extension that draws Railroad diagrams for regex and catches ReDoS

The Problem

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 line. I want everything in the editor. That's how Ghost Regex was born - a VS Code extension for working with regular expressions.

Ghost Regex Overview

Ghost Regex is a panel inside VS Code. It opens with Ctrl+Alt+R. The core feature is a Railroad diagram that turns your regex into a visual scheme: you see every group, every quantifier, every alternation. Colors encode semantics - anchors are green, groups purple, repetitions orange. Hovering reveals a tooltip. The panel also exports to SVG, provides an Explain view plus an AST tree that breaks down the expression into tokens: what each character does, how groups are nested, where the quantifier is, where the anchor is. It supports 100+ token types.

A built-in ReDoS detector finds nested quantifiers and overlapping alternations - the kinds of patterns that can crash production on large strings. When it detects an issue, it immediately suggests a fix. A classic example: (a+)+$ becomes (a+)$. The preview works on real files rather than made-up test strings, ensuring you see matching behavior on actual data.

Key Features

• Railroad diagrams: Parsed regex → AST → recursive walk → each node type (group, quantifier, alternation, anchor) becomes a fragment of the scheme. The underlying railroad-diagrams library handles SVG drawing, but without semantics - just black lines. A custom wrapper adds CSS classes (anchors green, groups purple, repetitions orange) and tooltips.
• Rendering performance: Drawing happens once, not on every mouse move, so even large expressions render without lag.
• Unit testing: Save test strings, run them - see where it matched and where it didn't. This ensures editing a regex won't break what already worked.
• 94 built-in snippets across 8 categories: validation, dates, numbers, Web, development, extraction, Russian documents, coordinates. Examples include Email and IPv4, INN, SNILS, and ISBN.
• Code generation for five languages: Python, JavaScript, Go, Rust, Java.
• Dialect compatibility analysis between JS, Python, Go, Rust, Java, PCRE - identifying which constructs don't port over.
• Sync Back: Right-click a regex in the editor → panel → back to code. No copy-paste required.

Architecture

The codebase is organized into 13 modules under src/:

• Entry point
• UI panel
• Parser
• AST
• Code generator
• ReDoS
• Railroad
• Diagram wrapper
• Pattern manager
• Dialects
• Snippets
• Licensing
• Tests

Each module is isolated so changes in one don't break the others.

Building Railroad Diagrams

The process begins by parsing the regex into an Abstract Syntax Tree (AST). Then the AST is walked recursively: each node type - group, quantifier, alternation, anchor - becomes its own fragment of the scheme. While railroad-diagrams can draw SVG, it produces plain black lines without semantic meaning. The wrapper I built sits on top and injects CSS classes (anchors get green, groups purple, repetitions orange), along with hover-enabled tooltips showing what each specific node does. Rendering occurs once at load time, not on every interaction, ensuring smooth performance even for very large expressions.

Pricing Model

The extension follows a Free + Pro subscription model. The Free version is fully functional and has no expiration - you can use it as long as you want. The Pro tier costs $6/month and includes everything from the Free version onward.

Free Tier

• Railroad diagram with Explain + AST tree
• ReDoS detector with auto-fix suggestions
• Live test with flags (g/i/m/s/u)
• Convert for Python and JavaScript
• Support for JS and Python 3 snippets (Email, URL, IPv4)

Pro Tier ($6/month)

• Everything from the Free tier
• Preview on real files
• Unit tests for regex
• Sync Back functionality
• SVG export of diagrams
• Convert for Go, Rust, Java
• Support for additional dialects (Go, Rust, Java, PCRE)
• All 94 snippets

Payment is handled through Boosty.

What's Next

The project remains active and expanding. Near-term plans include moving to a server-side license check (currently keys are verified locally, which scales poorly). The next phase involves adding Cloudflare Workers + KV so the server verifies the key and the extension receives the response. Additionally, snippet search will be added since 94 snippets is already a substantial collection that needs better discoverability. A step-by-step debugger is also planned, alongside automated key delivery so purchased keys arrive by email immediately without manual intervention.

Getting Started & Feedback

You can install Ghost Regex for free from the Marketplace: https://marketplace.visualstudio.com/items?itemName=ghost-regex.ghost-regex

Website: https://ghost-regex-site.vercel.app

GitHub: https://github.com/XLKA11/ghost-regex

If you find a bug or have a feature request, please write to me - I read everything. I'd love to hear your feedback!