cjex/regulex

★ 5,836TypeScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((regulex))
    What it does
      Regex visualization
      Railroad diagrams
    Features
      Browser-based
      Error pinpointing
      iframe embed
    API
      Node.js package
      Parse to AST
      Draw diagram
    Tech
      TypeScript
      Raphael graphics

mindmap root((regulex)) What it does Regex visualization Railroad diagrams Features Browser-based Error pinpointing iframe embed API Node.js package Parse to AST Draw diagram Tech TypeScript Raphael graphics

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Paste a complex regex into Regulex to instantly see a visual diagram of how the pattern is structured.

USE CASE 2

Embed a visual regex explanation in your own documentation using an HTML iframe.

USE CASE 3

Use the Node.js package to parse a regex into an abstract syntax tree for your own tooling.

USE CASE 4

Debug a regex syntax error by seeing exactly where the parser fails rather than getting a generic message.

Tech stack

TypeScriptJavaScriptNode.jsRaphael

Getting it running

Difficulty · easy Time to first run · 5min

Hosted demo at jex.im/regulex requires no setup, local build uses TypeScript on the default branch and an older bundler on the legacy branch.

In plain English

Regular expressions are a compact notation for describing text patterns, used in almost every programming language to search, match, or replace strings. They can be hard to read, especially once they grow beyond a few characters. Regulex is a tool that takes a regular expression and draws it as a visual railroad diagram, making the structure easier to understand at a glance. The project runs entirely in the browser with no server needed. You visit the site, paste in your regex, and it generates a diagram showing each part of the pattern as a connected flow chart. You can also embed one of these diagrams on your own site using a standard HTML iframe, so you can include a visual explanation of a regex in your own documentation. When a regex contains a syntax error, the tool tries to pinpoint exactly where the problem is, rather than just reporting that something is wrong. It treats decimal escape sequences strictly and will throw an error in cases where the meaning is ambiguous, which aligns with how JavaScript strict mode works. For developers who want to use the underlying logic in their own code, there is a Node.js package available. The API has two main functions: one parses a regex into an abstract syntax tree (a structured data representation of the pattern), and another takes that parsed result and draws the visual diagram using the Raphael graphics library. The README notes the project is currently under reconstruction. The current active code lives in the default branch and is written in TypeScript. The browser-compatible bundle is on a separate legacy branch and requires a build step with an older JavaScript bundler. The hosted demo at jex.im/regulex is the easiest way to try the visualizer without any setup.

Copy-paste prompts

Prompt 1

I have a complex regular expression and want to understand its structure. How do I use Regulex to generate a railroad diagram for it, using the hosted demo or the Node.js package?

Prompt 2

I'm writing documentation and want to include a visual diagram explaining a regex inline. How do I use Regulex's iframe embed feature to add it to my page?

Prompt 3

Using the regulex Node.js package, write code that parses a regex string into an abstract syntax tree and then renders a visual diagram using the Raphael library.

Prompt 4

My regex has a syntax error but I don't know where. How does Regulex pinpoint the exact location of the problem?

Open on GitHub → Explain another repo

← cjex on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.