Regex Builder for Visual Studio Code

Regex Builder is a visual regular expression designer, tester, and explainer. Build, test, and debug regular expressions visually without writing syntax. Ideal for beginners learning regex and advanced developers structuring complex patterns.

Designed with a modern, fast, and keyboard-friendly workspace inspired by Figma and Linear.

Features at a Glance

• 🧩 Nested Block Builder: Drag and configure visual blocks representing anchors (^, $), character sets, lookbehinds, capturing groups, and custom repetition counters.
• 🚂 Real-Time Railroad Flowcharts: Automatically visualizes your block layout as a high-fidelity SVG flowchart detailing nesting layers, groups, and quantification tracks.
• 🧪 Interactive Split-Screen Tester: Type or paste sample text to see matches highlight instantly. Hover over any match to inspect captures and sub-group values.
• 📖 English Explainer: Translates any regular expression pattern into a clear, hierarchical English narrative explaining what each token matches.
• 🔄 Reverse Builder: Paste any existing regular expression string to automatically generate corresponding editable visual block cards.
• ✨ AI Prompt Assistant: Describe the validation you need in plain English (e.g., "Match hexadecimal color codes"), and let the builder construct the layout. Works offline and supports custom endpoints (Ollama, OpenAI).
• 📚 Searchable Template Library: Jump-start workflows by importing from 30+ production-tested pattern templates (Emails, IP Addresses, Credit Cards, HTML tags, casing structures, and UUIDs).
• ⚡ Live Diagnostics & Quick Fixes: Identifies performance risks (like nested loops causing catastrophic backtracking), empty capture blocks, or unescaped literal symbols, offering one-click automated fixes.
• 💻 12-Language Code Generator: Generates copy-paste ready code files for JavaScript, TypeScript, Python, Go, Rust, Java, C#, PHP, Ruby, Swift, Kotlin, and Dart.
• 🔍 Workspace Search Integration: Scan files across your entire project directory using your generated regex in one click, with direct jump-to-code navigation.

Getting Started

Installation

Search for Regex Builder in the VS Code Extensions pane (Ctrl+Shift+X / Cmd+Shift+X) and click Install.

Opening the Builder

You can launch the visual builder workspace dashboard in three ways:

1. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P), type Regex Builder: Open, and press Enter.
2. Highlight a regular expression string in your current file, right-click, and select Regex Builder: Explain Regex to parse it instantly.
3. Click the Regex Builder button in the editor toolbar or status bar.

Workspace Layout Walkthrough

The visual dashboard is divided into three responsive panels:

1. The Visual Canvas (Left / Middle)

This is where your regular expression is constructed:

• Anchors & Characters: Add blocks using the dropdown menus at the bottom.
• Modifiers & Quantifiers: Wrap blocks in standard loops (Zero or More, One or More, Ranges) or groups.
• Reordering: Use the handle (☰) or the up/down arrows to shift token order recursively.
• Parameters: Edit literal values, toggle case sensitivity, or customize occurrence counters inside card details.

2. Railroad Diagram (Top)

Renders a visual map of the compiled regex. It updates dynamically as you move blocks or edit parameters, showing connections, nested alternatives, and lookarounds.

3. Diagnostics & Live Tester (Right Split)

• Quick Diagnostics: Displays performance risks or syntax warnings. Click Fix to apply automatic refactoring.
• Live Tester: Input sample text on the left to see matched elements instantly highlighted on the right. Hover to view group assignments.

Configuration Settings

You can customize the extension behavior by opening VS Code Settings (Ctrl+, / Cmd+,) and searching for regexBuilder:

• regexBuilder.livePreview: Update search results and compiled codes in real-time as you drag blocks (default: true).
• regexBuilder.highlightMatches: Color matches in the Live Tester automatically (default: true).
• regexBuilder.autoExplain: Instantly display the English translation on updates (default: true).
• regexBuilder.theme: Select dashboard theme: system (matches editor background), dark, or light.
• regexBuilder.defaultLanguage: Sets the default target output in the Code Generator snippet tab (default: javascript).

Commands Reference

Example Walkthroughs

Example A: Build a Username Validator

We need a pattern checking for alphanumeric usernames between 3 and 16 characters allowing underscores/dashes:

1. Add a Starts With block (^).
2. Add a Count Between quantifier block.
3. Set min: 3 and max: 16.
4. Inside the Count Between block, add a Custom Set character block.
5. In the Custom Set field, input a-zA-Z0-9_-.
6. Add an Ends With block ($) at the top level.

Your pattern compiles automatically to: /^[a-zA-Z0-9_-]{3,16}$/

Example B: AI Prompt Generation

1. Click AI Assistant in the sidebar.
2. Type: "Match a standard US ZIP code (5 digits, or 5 digits followed by a dash and 4 digits)"
3. Click Generate Regex Blocks.
4. The assistant will parse the request and construct:
   • Digit block (\d) quantified exactly 5 times.
   • Optional group containing a literal dash - and another Digit block quantified exactly 4 times.
5. Review the layout, test strings like 90210 or 12345-6789, and click Copy Regex to use.

Extension License

Distributed under the MIT License. See LICENSE for details.