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

XLKA11 — Wed, 30 Sep 2026 23:18:30 +0000

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.

What it does

Ghost Regex is a panel inside VS Code. Opens with Ctrl+Alt+R.
Railroad diagram. Your regex becomes a visual scheme: you see every group, every quantifier, every alternation. Colors by semantics — anchors are green, groups purple, repetitions orange. Hover for a tooltip. Export to SVG.

Explain + AST tree. Breaks down the expression into tokens: what each character does, how groups are nested, where the quantifier is, where the anchor is. Supports 100+ token types.

ReDoS detector. Finds nested quantifiers and overlapping alternations — the stuff that can take down production on large strings. And immediately suggests a fix. Classic example: (a+)+$ becomes (a+)$.

Preview on real files. Open your file, type a pattern — matches are highlighted right in the content. Not on made-up test strings, on actual data.

Unit tests for regex. Save test strings, run them — see where it matched, where it didn't. So when you edit a regex, you don't break what already worked.
94 built-in snippets in 8 categories: validation, dates, numbers, Web, development, extraction, Russian documents, coordinates. From Email and IPv4 to INN, SNILS, and ISBN.

Convert. Code generation for 5 languages: Python, JavaScript, Go, Rust, Java. Plus compatibility analysis between dialects (JS, Python, Go, Rust, Java, PCRE) — which constructs don't port over.
Sync Back. Right-click on a regex in the editor → panel → back to code. No copy-paste.

Under the hood

Stack is simple, no exotics:
TypeScript + Node.js
VS Code Extension API — panel on webview
esbuild — build
@vscode/vsce — packaging
Libraries:
regex-inspector — AST parsing and ReDoS analysis
railroad-diagrams — diagram rendering
Architecture — 13 modules in 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.
How Railroad diagrams are built. The regex is first parsed into an AST. Then the AST is walked recursively: each node type — group, quantifier, alternation, anchor — becomes its own fragment of the scheme. railroad-diagrams can draw SVG, but without semantics: just black lines. I built a wrapper on top that passes CSS classes — anchors get green, groups purple, repetitions orange. Plus tooltips: hover shows what a specific node does. Rendering happens once, not on every mouse move, so even large expressions draw without lag.
I'm not a programmer by education, I learned from scratch. This project is the second major thing I've brought to publication.

Free and Pro

The extension uses a Free + Pro model. This isn't a "demo with cut features" — the Free version is fully functional, you can use it as long as you want.

Free:

Railroad diagram
Explain + AST tree
ReDoS detector with auto-fix
Live test with flags (g/i/m/s/u)
Convert for Python and JavaScript
Dialects: JS and Python
3 snippets (Email, URL, IPv4)
Pro — $6/month:
Everything from Free
Preview on real files
Unit tests for regex
Sync Back
SVG export of diagrams
Convert for Go, Rust, Java
Dialects: Go, Rust, Java, PCRE
All 94 snippets
Payment via Boosty. Subscription. Everything runs locally, no telemetry, no external

What's next

The project is alive and growing. Near-term plans:
Server-side license check. Right now keys are checked locally, in the client. That's fine for the first buyers, but doesn't scale. Next — Cloudflare Workers + KV: the server checks the key, the extension gets the response.
Snippet search. 94 snippets is already a lot, soon it'll be hard to find by eye. Need a search bar with filtering by name.
Step-by-step debugger. Not there yet — there's Railroad, AST, and Explain.
Automated key delivery. So after purchase the key arrives by email immediately, without manual work.

Feedback

You can install the extension for free from the Marketplace. If you find a bug or want a feature — write to me, I read everything.
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
I'd love to hear feedback.

DEV Community: XLKA11

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