🎨

Regex Visualizer

Visual regex editor & AST viewer

Loading Regex Visualizer...

About Regex Visualizer — Free Online Tool

Visualize regular expressions as an interactive AST (Abstract Syntax Tree) graph. Edit nodes directly on the graph, test against sample text with real-time highlights. Supports JavaScript, Python, and PCRE regex flavors. Perfect for learning regex, debugging complex patterns, and sharing visual explanations.

How to Use Regex Visualizer — Step by Step

  1. ① Type or paste a regex

    Enter any regular expression in the input box (e.g. /(\d{3})-\d{4}/). The AST graph appears instantly as you type. Supported flags: g (global), i (case-insensitive), m (multiline), s (dotall), u (unicode), y (sticky).

  2. ② Read the AST graph

    Each node represents one regex construct: Character (direct match), CharacterClass (brackets [...]), Group (capturing/non-capturing/named), Quantifier (* + ? {n,m}), Assertion (^ $ \b), and Alternation (|). Hover a node to see its properties; click to select it.

  3. ③ Edit visually (Edit tab)

    Select a node on the graph → the Edit tab lights up. You can: insert a node before/after, wrap selection in a group, add a quantifier, change character class type, toggle flags, and more. The regex updates in real-time as you edit.

  4. ④ Test with sample text (Test tab)

    Switch to the Test tab, paste your sample text. All matches are highlighted in real-time. Use the flavor dropdown (JS / Python / PCRE) to switch regex engines. The match list shows each capture group's value.

  5. ⑤ Share & export

    Click 'Copy permalink' to get a URL with your regex encoded. Share it — opening the link restores the exact graph. Use the Legends tab to learn what each node shape/color means.

Use Cases for Regex Visualizer

Learning regex

See how any regex decomposes into an AST. Great for understanding groups, quantifiers, lookahead/lookbehind, and character classes visually instead of guessing from the string.

Debugging complex patterns

When a regex matches unexpectedly, paste it in and inspect the graph. Each node is selectable — you can pinpoint exactly which group or quantifier is causing the issue.

Writing regex by visual editing

Don't want to write the regex string by hand? Build it visually: add nodes, group them, add quantifiers — the regex updates automatically as you edit the graph.

Teaching & documentation

Generate AST screenshots to include in blog posts, docs, or Stack Overflow answers. A picture of the AST is worth 1000 words of regex explanation.

Cross-flavor testing

Test the same regex under JS, Python, and PCRE flavors. See how behavior differs (e.g. lookbehind support, Unicode handling).

FAQ — Regex Visualizer Free Online Tool

What is an AST in regex?

AST stands for Abstract Syntax Tree. It is a tree representation of your regex pattern. Each node is a construct: Group, Quantifier, CharacterClass, Assertion, etc. The tree structure shows how they nest — which is much clearer than reading the raw string.

Can I edit the regex visually without writing the string?

Yes! Select a node in the graph and use the Edit tab to modify that specific construct (add quantifier, change group type, insert characters, etc.). The regex string updates automatically as you edit.

Which regex flavors are supported?

JavaScript (ECMAScript), Python, and PCRE. Switch flavors using the dropdown in the Test tab. Note: not all syntax is supported in all flavors — the tool will warn you.

What do the node colors/shapes mean?

See the Legends tab (📖 icon) for a full legend: blue = character/class, green = group, orange = quantifier, purple = assertion, gray = alternation. The legend is always one click away.

How do I share my regex with someone else?

Click 'Copy permalink' in the top-right. The URL encodes your regex and flags. Send it — when they open it, the exact same graph and test text load automatically.

Why does my regex look different in the graph vs. what I typed?

The parser normalizes your regex: redundant groups are simplified, character classes are expanded for clarity, and implicit concatenations become explicit nodes. This is intentional — it helps you see the true structure.

Related Free Online Tools