iHateRegex

iHateRegex is an open-source regex cheatsheet and playground that turns any regular expression into an interactive railroad diagram with plain-English explanations, live match highlighting, and exportable graphics.

What is iHateRegex?

iHateRegex is the codebase behind the site iHateregex.io, a visual cheat sheet for regular expressions. It accepts a regex string and flags as input and produces a railroad diagram rendered in the browser, a hoverable breakdown of each part, and a test area that highlights matching lines from sample text. The project is maintained by geongeorge and the community, and the current v2 is written in TypeScript, TanStack Start, and PostgreSQL. The original Nuxt.js version remains on the v1 branch.

Key Features

• Visual railroad diagrams — Every regex is rendered as a railroad diagram client-side using the regexper renderer, so no external embed server is needed.
• Hover explanations — Hover any part of an expression to see what that construct does in plain English.
• Live match highlighting — The testing area takes line-by-line sample strings and highlights all matches using the expression's flags.
• SVG and PNG export — Any diagram can be downloaded as SVG or PNG for use in documentation or presentations.
• Regex validation and syntax highlighting — The editor highlights valid syntax and surfaces errors as you type.
• Playground with accounts — Sign in to save regexes privately, then publish them to a public community page with a stable link.
• Community cheat sheet — A large collection of curated regexes is browsable on the homepage, contributed through pull requests.

Who is it for?

• Developers — Decode unfamiliar or legacy regex patterns by pasting them in and reading the diagram and hover descriptions.
• Students — Learn how quantifiers, groups, and character classes interact by experimenting in the playground.
• Technical writers — Produce SVG or PNG diagrams of regexes for blog posts, books, and API documentation.
• Open source contributors — Add new expressions by editing regexes.json and writing a markdown explanation, following the contribution guide in the README.

What can you do with iHateRegex?

• Decode a cryptic pattern: Paste a regex from a production codebase, and the diagram instantly lays out its structure for review.
• Build and validate new regexes: Use the playground to iterate on a pattern, testing it against sample lines before saving.
• Share visual explanations: Export a diagram and embed it in documentation or slide decks.
• Compile a custom cheat sheet: Save your own expressions privately and publish the ones you want to share with the community.

How does iHateRegex work?

The repository is a pnpm monorepo with two packages: a TanStack Start web application that includes PostgreSQL migrations, and a browser-only TypeScript package called regex-railroad-diagram that renders the diagrams. After you enter a regex, the renderer runs locally in the browser using the regexper algorithm, and the test strings are matched against the expression live with the given flags. Saving and publishing requires a user account; private saves are stored with an opaque ID, not a query-string version of the regex.

FAQ

Is iHateRegex free?

Yes, iHateRegex is open source and free to use at iHateregex.io. You can also self-host it by cloning the repository and following the setup steps for Node.js, pnpm, and PostgreSQL.

Can I export diagrams from the site?

Yes, the diagram for any regex can be exported as SVG or PNG. This is available both for the community cheat sheet entries and your own playground expressions.

How do I contribute a regex?

Follow the guide in the README: add your expression to apps/web/src/content/regexes.json with fields such as id, title, tagline, description, regex, flag, matchText, and tags, then create a markdown file explaining the expression. Open a pull request.

What is the difference between v1 and v2?

v1 was built on Nuxt.js and remains on the v1 branch. v2 is a ground-up rewrite using TypeScript, TanStack Start, and PostgreSQL, with a new monorepo layout and browser-only diagram rendering.

How do I publish a saved regex?

Sign in to the playground, create and save a regex, then click publish. The site creates a public community page at /community/:id; you can unpublish at any time.