Visualise any regex as nested colour-coded boxes
Render a regex into a structural tree with one card per node and quantifiers attached. Runs entirely in your browser.
How to visualise a regex
See a regex as colour-coded nested boxes — anchors, classes, groups and literals at a glance.
- 01
Paste a pattern
Type a regex and watch the structure render as nested coloured cards.
Patterns compile through the JavaScript RegExp constructor, so syntax errors surface immediately and engine quirks like Unicode property escapes (\p{L}) work when the u flag is on.
patternECMAScriptliteralliveinput · literalpattern · regex(?:hi|hello) \w+loaded · ECMAScriptPCRE · ready - 02
Scan node types
Anchors are blue, character classes green, groups purple, escapes amber. Quantifiers attach to their target.
Each flag character mirrors the ECMAScript literal: g enables iteration, i folds case, m anchors per line, s lets . match newlines, u unlocks proper Unicode, y is sticky, and d emits indices.
flagsoptionsg · i · mlivelegend · optionscolour · flagsanchor · class · groupflags applied · liveECMA · live - 03
Drill into groups
Lookarounds and named groups keep their decorators, so you can see exactly how nesting flows.
Watch for catastrophic backtracking on nested quantifiers — a common ReDoS source. The tool caps match counts to keep the page responsive on pathological patterns.
matchgroupshighlightReDoS-safetree · outputnested · matches(?<name>...)matches · livegroups · live - 04
Copy or export
Grab the output as JSON, CSV, or plain text — ready for your editor or pipeline.
Copy writes via navigator.clipboard.writeText; downloads use a Blob and object URL, so nothing transits the network and the output is byte-identical to what you see on screen.
copyexportclipboardblobexport · exportedready · savedCopiedready to shipsuccess
Regex patterns that don't melt down
Use named groups
(?<year>\d{4}) reads better than $1 and survives reordering. Supported in ECMAScript 2018+.
Anchor strictly
Use ^/$ with the m flag when matching whole lines. Without anchors, partial matches sneak through.
Avoid catastrophic backtracking
Nested quantifiers like (a+)+ can explode. Run patterns through ReDoS Detector first.
Escape every literal
Backslash any meta character you want literally: \.\$\^\*\+\?\(\)\[\]\{\}\|\\.
Test edge cases
Empty string, single character, unicode, the maximum length you expect — write fixtures for each.
Patterns aren’t parsers
Don’t parse HTML, JSON, or balanced parens with regex. Use a proper parser when the grammar is recursive.
When the visualiser helps
See structure before chasing syntax.
Audit complex regex
Spot accidental nesting or stray quantifiers fast. Compiles through the JavaScript RegExp constructor — engine quirks (Unicode property escapes, sticky matching, named groups) work when their flags are on. Error messages cite the exact position of any syntax issue.
ReDoS-safeOnboard new devs
Show shape, not just syntax. Pairs with the ReDoS detector to catch catastrophic backtracking before you deploy. A pattern that handles 1k-character input fine can become a denial-of-service vector on attacker-controlled 1M-character input.
ECMA-compliantCompare drafts
Render before/after to see structural changes. Output exports as JavaScript, Python re, Java util.regex, .NET System.Text.RegularExpressions, PCRE, and POSIX — language quirks are highlighted on conversion so you don't ship a JS-only pattern to a Go service.
spec-gradeDebug captures
Confirm which groups are capturing. Capture groups (named or numbered) round-trip cleanly into replacement strings, JSON output, or CSV extraction without re-typing. Backreferences ($1, ${name}) preserve semantics across languages.
cross-engineExplain in chat
Screenshot the tree instead of pasting cryptic text. Test against edge cases — empty input, single character, max length, multibyte boundaries — to catch off-by-one and zero-length match bugs before they reach production.
test-readyLearn structure
Map regex theory onto a real example. All matching runs client-side so secret patterns never leave the browser. Useful when the pattern itself is sensitive (PII regexes, internal data formats, security filters).
production-readyFrequently asked questions
Something missing?
Tell us what you need. We ship the top requests every two weeks.