Regex Visualizer
See the structure of a regex pattern as a diagram — not just whether it matches.
Diagram
Plain-language explanation
Test string (optional)
How this tool reads a regex pattern
Most regex tools only tell you whether a pattern matches some text. This one parses the pattern itself — with a real recursive-descent parser, not a lookup table — into a syntax tree, then renders that tree two ways: a structure diagram and a plain-English walkthrough. That's useful for reading someone else's regex, reviewing a pattern in a pull request, or understanding a pattern you wrote six months ago:
Pattern: /^(\w+)@(\w+\.\w+)$/
Diagram: [start]──Group 1: \w+──"@"──Group 2: \w+──"."──\w+──[end]
Explain: The start of the string. Group 1: one or more word characters.
The literal text "@". Group 2: one or more word characters,
then the literal text ".", then one or more word characters.
The end of the string.
Each box in the diagram is colored by node type — character classes, groups and quantifier badges each get their own color — and its size is calculated from the pattern's actual structure before anything is drawn, so nested groups and long alternations stay legible instead of overlapping.
Frequently asked questions
Does this test my regex against text?
This tool focuses on the pattern's structure, not matching. A small optional test-string field is included so you can see it in action, but for full match testing with capture-group detail, use RegexLens.
What regex syntax does it support?
A JS-RegExp-compatible subset: capturing, non-capturing and named groups, alternation, all quantifiers (including lazy), character classes with ranges and negation, anchors, backreferences and lookaround. It's parsed with a real recursive-descent parser, not string matching.
What happens if my pattern has a syntax error?
The diagram and explanation are replaced with a clear error message showing exactly where the problem is, such as an unclosed group or character class.
Is it safe to paste sensitive patterns or text here?
Yes. All parsing and rendering happens in your browser using native JavaScript; nothing is ever sent to a server.