A modern, visual, debuggable workbench for regular expressions
English · 简体中文
Features · Quick Start · Development · Contributing · License
RegexStudio is an open-source regular-expression workbench that aims to make writing, understanding, debugging and sharing regex effortless through a modern UI and rich visualizations.
Beyond the basics like live matching and capture-group inspection, RegexStudio offers multiple visual perspectives — railroad diagrams, a node-based editor, and plain-language explanations — so you can understand any regex from every angle.
📝 The project is under active development.
- 🎨 Syntax-highlighted editor — Powered by CodeMirror 6 with live coloring, error hints and flag toggles
- 🔍 Live match testing — Multi-line test input with instant highlighting and detailed capture-group info
- 🚂 Railroad diagram — Render regex structure as a clean, intuitive railroad diagram
- 🧩 Visual node editor — Build and refactor regex by manipulating nodes — beginner-friendly
- 📖 Plain-language explanations — Automatically translate regex into a human-readable breakdown
- 🔁 Replace preview — See the before/after diff in real time
- � Step-by-step debugger — Walk through the matching process step by step, with backtracking visualization and capture-group snapshots
- ✅ Test-case panel — Manage multiple test strings with expected match / no-match outcomes and one-click batch run
⚠️ Compatibility warnings — Static checks that flag features unsupported by your target engine
- 🌐 Flavor selector — Switch between JavaScript, PCRE, Python, Java, Go, .NET, Rust, Ruby and more
- 🛠️ Code generator — One-click snippets for 10 languages: JavaScript / TypeScript, Python, Java, Go, Rust, C# (.NET), PHP, Ruby, Swift, Kotlin
- 🎓 Interactive tutorial — Curated lessons covering basics, quantifiers, groups, lookaround and practical patterns, with live validation
- 🏆 Challenges — Bite-sized practice problems with automatic grading to sharpen your skills
- � Pattern library — Curated patterns for emails, URLs, IPs, dates and more
- 📋 Quick reference — Built-in cheat sheet so you never have to leave the page
- 🔗 Share links — Encode regex, flags, test text and replacement into a shareable URL
- 🌍 i18n — Full English & Simplified Chinese UI powered by Paraglide; locale-aware routes
- 🌗 Light & dark theme — Follow system or toggle manually
- ⚡ SSR-ready — Built on TanStack Start for fast first paint, friendly to SEO and link sharing
| Category | Technology |
|---|---|
| Framework | React 18 + TanStack Start + TanStack Router |
| Build | Vite 7 |
| Language | TypeScript 5 |
| Styling | Tailwind CSS + shadcn/ui + Radix UI |
| Editor | CodeMirror 6 |
| State | Zustand |
| Icons | Lucide |
| i18n | Inlang Paraglide JS |
| Lint & Format | Biome |
- Node.js ≥ 20
- pnpm ≥ 9 (recommended) or npm / yarn
# 1. Clone the repository
git clone https://github.com/chenz24/regex-studio.git
cd regex-studio
# 2. Install dependencies
pnpm install
# 3. Start the dev server
pnpm devThe dev server starts at http://localhost:5173 by default.
pnpm build # build production bundle
pnpm preview # preview the production bundle locally| Command | Description |
|---|---|
pnpm dev |
Start the dev server (HMR + SSR) |
pnpm build |
Build production bundle |
pnpm build:dev |
Build in development mode (handy for debugging) |
pnpm preview |
Preview production bundle |
pnpm lint |
Run Biome lint |
pnpm format |
Format the codebase with Biome |
pnpm check:biome |
Run Biome check + fix |
pnpm typecheck |
Run TypeScript type-check |
pnpm check |
Run typecheck + lint together |
regex-studio/
├── messages/ # Paraglide i18n source (en.json, zh.json)
├── project.inlang/ # Inlang project config
├── public/ # Static assets (favicon, sitemap, ...)
├── src/
│ ├── challenges/ # Challenge definitions & evaluator
│ ├── components/
│ │ ├── challenges/ # Challenges UI (catalog, runner, drawer)
│ │ ├── diagram/ # Railroad diagram & node editor
│ │ ├── editor/ # Regex input, flavor selector, compat warnings
│ │ ├── layout/ # Test area, tool panel, footer
│ │ ├── sidebar/ # Pattern library & quick reference
│ │ ├── tools/ # Debugger, code gen, explanation, replace, test cases
│ │ ├── tutorial/ # Tutorial UI (catalog, runner, hints, ...)
│ │ └── ui/ # shadcn/ui primitives
│ ├── hooks/ # Custom hooks
│ ├── lib/ # AST, i18n, share-link helpers
│ ├── paraglide/ # Paraglide compiled output (generated)
│ ├── routes/ # TanStack Router file-based routes
│ │ ├── __root.tsx # Root route (with SSR shell)
│ │ ├── index.tsx # Default locale entry
│ │ └── $locale/ # Locale-aware routes (en, zh)
│ ├── stores/ # Zustand stores (regex, tutorial, challenges)
│ ├── tutorial/ # Lessons, validators, registry
│ ├── utils/ # Parser, matcher, diagram IR, codegen, ...
│ │ └── codegen/ # Code generators for 10 target languages
│ ├── ssr.tsx # SSR entry
│ ├── router.tsx # Router instance
│ └── index.css # Global styles
├── biome.json # Biome config
├── vite.config.ts
└── package.json
Contributions of any kind are warmly welcomed — bug reports, feature suggestions, doc improvements and code patches all matter.
- Open an Issue
- 🐛 Bug reports: include reproduction steps, expected vs. actual behavior, and your environment
- 💡 Feature requests: describe the use case and value
- Submit a Pull Request
- Fork the repo and create a feature branch off
main - Run
pnpm checkbefore pushing to ensure lint and type-check pass - Keep commit messages clear; we recommend Conventional Commits
- In the PR description, explain the motivation, scope and how you tested
- Fork the repo and create a feature branch off
- Spread the Word
- Share RegexStudio in your projects, blog posts or social media
- A ⭐ on the repo is the most direct encouragement to the maintainers
- Code style is enforced by Biome (lint + format)
- Use functional components + Hooks; avoid class components
- Prefer Tailwind utility classes; fall back to CSS only when needed
- Manage business state with Zustand; keep UI-local state in
useState/useReducer - For UI strings, add entries to
messages/en.jsonandmessages/zh.jsonand consume them via Paraglide
This project is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0).
- ✅ You are free to use, modify and distribute the source code
⚠️ If you modify the project and offer it as a network service, you must publish the full modified source under the same AGPL-3.0 license⚠️ Derivative works must retain the original copyright notice and license
See the official AGPL-3.0 page for the full text.
💼 Commercial use: If AGPL-3.0's network-service clause does not fit your company's use case, please reach out to discuss a commercial license.
Other small, focused developer tools from the same author — you might find them handy:
- rename.tools — Batch-rename files right in your browser with live previews and regex rules
- crontab.cv — Visualize, build and explain crontab expressions at a glance
- json.tools — Format, validate, diff and query JSON without leaving the tab
- easing.tools — Craft and preview CSS / motion easing curves interactively
- open-awesome.com — Browse and discover curated "awesome-*" lists from the open-source community
RegexStudio stands on the shoulders of giants. Special thanks to:
- TanStack — for the modern full-stack Router / Start solution
- CodeMirror — for a powerful editor core
- shadcn/ui & Radix UI — for elegant UI primitives
- Tailwind CSS — for making styling enjoyable
If RegexStudio helps you, please consider giving it a ⭐ Star!