{"id":50888401,"url":"https://github.com/chenz24/regex-studio","last_synced_at":"2026-06-15T19:03:15.202Z","repository":{"id":357249953,"uuid":"1231459492","full_name":"chenz24/regex-studio","owner":"chenz24","description":"A modern, visual, debuggable workbench for regular expressions — railroad diagrams, node editor, step debugger, multi-flavor \u0026 multi-language code generation.","archived":false,"fork":false,"pushed_at":"2026-05-12T12:07:31.000Z","size":450,"stargazers_count":35,"open_issues_count":0,"forks_count":3,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-10T04:27:59.298Z","etag":null,"topics":["developer-tools","railroad-diagram","regex","regex-debugger","regex-playground","regex-tester","regex-visualizer","regular-expression","tanstack-start"],"latest_commit_sha":null,"homepage":"https://regexstudio.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chenz24.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-07T01:34:13.000Z","updated_at":"2026-05-30T00:22:41.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/chenz24/regex-studio","commit_stats":null,"previous_names":["chenz24/regex-studio"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chenz24/regex-studio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenz24%2Fregex-studio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenz24%2Fregex-studio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenz24%2Fregex-studio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenz24%2Fregex-studio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chenz24","download_url":"https://codeload.github.com/chenz24/regex-studio/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenz24%2Fregex-studio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34376125,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-15T02:00:07.085Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["developer-tools","railroad-diagram","regex","regex-debugger","regex-playground","regex-tester","regex-visualizer","regular-expression","tanstack-start"],"created_at":"2026-06-15T19:03:14.476Z","updated_at":"2026-06-15T19:03:15.197Z","avatar_url":"https://github.com/chenz24.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# RegexStudio\n\n**A modern, visual, debuggable workbench for regular expressions**\n\n[![License: AGPL v3](https://img.shields.io/badge/License-AGPL_v3-blue.svg)](https://www.gnu.org/licenses/agpl-3.0)\n[![React](https://img.shields.io/badge/React-18-61dafb.svg)](https://react.dev)\n[![TanStack Start](https://img.shields.io/badge/TanStack-Start-ef4444.svg)](https://tanstack.com/start)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5-3178c6.svg)](https://www.typescriptlang.org)\n[![Vite](https://img.shields.io/badge/Vite-7-646cff.svg)](https://vitejs.dev)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](#contributing)\n\n**English** · [简体中文](./README_zh.md)\n\n[Features](#features) · [Quick Start](#quick-start) · [Development](#development) · [Contributing](#contributing) · [License](#license)\n\n\u003c/div\u003e\n\n---\n\n## Introduction\n\n**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.\n\nBeyond 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.\n\n\u003e 📝 The project is under active development.\n\n![Screenshot](public/og.png)\n\n---\n\n## Features\n\n### Editing \u0026 Visualization\n\n- 🎨 **Syntax-highlighted editor** — Powered by CodeMirror 6 with live coloring, error hints and flag toggles\n- 🔍 **Live match testing** — Multi-line test input with instant highlighting and detailed capture-group info\n- 🚂 **Railroad diagram** — Render regex structure as a clean, intuitive railroad diagram\n- 🧩 **Visual node editor** — Build and refactor regex by manipulating nodes — beginner-friendly\n- 📖 **Plain-language explanations** — Automatically translate regex into a human-readable breakdown\n- 🔁 **Replace preview** — See the before/after diff in real time\n\n### Debugging \u0026 Testing\n\n- � **Step-by-step debugger** — Walk through the matching process step by step, with backtracking visualization and capture-group snapshots\n- ✅ **Test-case panel** — Manage multiple test strings with expected match / no-match outcomes and one-click batch run\n- ⚠️ **Compatibility warnings** — Static checks that flag features unsupported by your target engine\n\n### Multi-flavor \u0026 Code Generation\n\n- 🌐 **Flavor selector** — Switch between JavaScript, PCRE, Python, Java, Go, .NET, Rust, Ruby and more\n- 🛠️ **Code generator** — One-click snippets for **10 languages**: JavaScript / TypeScript, Python, Java, Go, Rust, C# (.NET), PHP, Ruby, Swift, Kotlin\n\n### Learning\n\n- 🎓 **Interactive tutorial** — Curated lessons covering basics, quantifiers, groups, lookaround and practical patterns, with live validation\n- 🏆 **Challenges** — Bite-sized practice problems with automatic grading to sharpen your skills\n- � **Pattern library** — Curated patterns for emails, URLs, IPs, dates and more\n- 📋 **Quick reference** — Built-in cheat sheet so you never have to leave the page\n\n### Sharing \u0026 UX\n\n- 🔗 **Share links** — Encode regex, flags, test text and replacement into a shareable URL\n- 🌍 **i18n** — Full English \u0026 Simplified Chinese UI powered by Paraglide; locale-aware routes\n- 🌗 **Light \u0026 dark theme** — Follow system or toggle manually\n- ⚡ **SSR-ready** — Built on TanStack Start for fast first paint, friendly to SEO and link sharing\n\n---\n\n## Tech Stack\n\n| Category | Technology |\n|---|---|\n| **Framework** | [React 18](https://react.dev) + [TanStack Start](https://tanstack.com/start) + [TanStack Router](https://tanstack.com/router) |\n| **Build** | [Vite 7](https://vitejs.dev) |\n| **Language** | [TypeScript 5](https://www.typescriptlang.org) |\n| **Styling** | [Tailwind CSS](https://tailwindcss.com) + [shadcn/ui](https://ui.shadcn.com) + [Radix UI](https://www.radix-ui.com) |\n| **Editor** | [CodeMirror 6](https://codemirror.net) |\n| **State** | [Zustand](https://zustand-demo.pmnd.rs) |\n| **Icons** | [Lucide](https://lucide.dev) |\n| **i18n** | [Inlang Paraglide JS](https://inlang.com/m/gerre34r/library-inlang-paraglideJs) |\n| **Lint \u0026 Format** | [Biome](https://biomejs.dev) |\n\n---\n\n## Quick Start\n\n### Prerequisites\n\n- **Node.js** ≥ 20\n- **pnpm** ≥ 9 (recommended) or npm / yarn\n\n### Install \u0026 Run\n\n```bash\n# 1. Clone the repository\ngit clone https://github.com/chenz24/regex-studio.git\ncd regex-studio\n\n# 2. Install dependencies\npnpm install\n\n# 3. Start the dev server\npnpm dev\n```\n\nThe dev server starts at [http://localhost:5173](http://localhost:5173) by default.\n\n### Production Build\n\n```bash\npnpm build      # build production bundle\npnpm preview    # preview the production bundle locally\n```\n\n---\n\n## Development\n\n### Scripts\n\n| Command | Description |\n|---|---|\n| `pnpm dev` | Start the dev server (HMR + SSR) |\n| `pnpm build` | Build production bundle |\n| `pnpm build:dev` | Build in development mode (handy for debugging) |\n| `pnpm preview` | Preview production bundle |\n| `pnpm lint` | Run Biome lint |\n| `pnpm format` | Format the codebase with Biome |\n| `pnpm check:biome` | Run Biome check + fix |\n| `pnpm typecheck` | Run TypeScript type-check |\n| `pnpm check` | Run typecheck + lint together |\n\n### Project Structure\n\n```\nregex-studio/\n├── messages/                  # Paraglide i18n source (en.json, zh.json)\n├── project.inlang/            # Inlang project config\n├── public/                    # Static assets (favicon, sitemap, ...)\n├── src/\n│   ├── challenges/            # Challenge definitions \u0026 evaluator\n│   ├── components/\n│   │   ├── challenges/        # Challenges UI (catalog, runner, drawer)\n│   │   ├── diagram/           # Railroad diagram \u0026 node editor\n│   │   ├── editor/            # Regex input, flavor selector, compat warnings\n│   │   ├── layout/            # Test area, tool panel, footer\n│   │   ├── sidebar/           # Pattern library \u0026 quick reference\n│   │   ├── tools/             # Debugger, code gen, explanation, replace, test cases\n│   │   ├── tutorial/          # Tutorial UI (catalog, runner, hints, ...)\n│   │   └── ui/                # shadcn/ui primitives\n│   ├── hooks/                 # Custom hooks\n│   ├── lib/                   # AST, i18n, share-link helpers\n│   ├── paraglide/             # Paraglide compiled output (generated)\n│   ├── routes/                # TanStack Router file-based routes\n│   │   ├── __root.tsx         # Root route (with SSR shell)\n│   │   ├── index.tsx          # Default locale entry\n│   │   └── $locale/           # Locale-aware routes (en, zh)\n│   ├── stores/                # Zustand stores (regex, tutorial, challenges)\n│   ├── tutorial/              # Lessons, validators, registry\n│   ├── utils/                 # Parser, matcher, diagram IR, codegen, ...\n│   │   └── codegen/           # Code generators for 10 target languages\n│   ├── ssr.tsx                # SSR entry\n│   ├── router.tsx             # Router instance\n│   └── index.css              # Global styles\n├── biome.json                 # Biome config\n├── vite.config.ts\n└── package.json\n```\n\n---\n\n## Contributing\n\nContributions of any kind are warmly welcomed — bug reports, feature suggestions, doc improvements and code patches all matter.\n\n### How to Help\n\n1. **Open an Issue**\n   - 🐛 **Bug reports**: include reproduction steps, expected vs. actual behavior, and your environment\n   - 💡 **Feature requests**: describe the use case and value\n2. **Submit a Pull Request**\n   1. Fork the repo and create a feature branch off `main`\n   2. Run `pnpm check` before pushing to ensure lint and type-check pass\n   3. Keep commit messages clear; we recommend [Conventional Commits](https://www.conventionalcommits.org/)\n   4. In the PR description, explain the motivation, scope and how you tested\n3. **Spread the Word**\n   - Share RegexStudio in your projects, blog posts or social media\n   - A ⭐ on the repo is the most direct encouragement to the maintainers\n\n### Conventions\n\n- Code style is enforced by **Biome** (lint + format)\n- Use **functional components + Hooks**; avoid class components\n- Prefer **Tailwind utility classes**; fall back to CSS only when needed\n- Manage business state with Zustand; keep UI-local state in `useState` / `useReducer`\n- For UI strings, add entries to `messages/en.json` and `messages/zh.json` and consume them via Paraglide\n\n---\n\n## License\n\nThis project is licensed under the **GNU Affero General Public License v3.0 (AGPL-3.0)**.\n\n- ✅ You are free to **use, modify and distribute** the source code\n- ⚠️ 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\n- ⚠️ Derivative works must retain the original copyright notice and license\n\nSee the [official AGPL-3.0 page](https://www.gnu.org/licenses/agpl-3.0.html) for the full text.\n\n\u003e 💼 **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.\n\n---\n\n## Related Projects\n\nOther small, focused developer tools from the same author — you might find them handy:\n\n- [**rename.tools**](https://rename.tools) — Batch-rename files right in your browser with live previews and regex rules\n- [**crontab.cv**](https://crontab.cv) — Visualize, build and explain crontab expressions at a glance\n- [**json.tools**](https://json.tools) — Format, validate, diff and query JSON without leaving the tab\n- [**easing.tools**](https://easing.tools) — Craft and preview CSS / motion easing curves interactively\n- [**open-awesome.com**](https://open-awesome.com) — Browse and discover curated \"awesome-*\" lists from the open-source community\n\n---\n\n## Acknowledgements\n\nRegexStudio stands on the shoulders of giants. Special thanks to:\n\n- [TanStack](https://tanstack.com) — for the modern full-stack Router / Start solution\n- [CodeMirror](https://codemirror.net) — for a powerful editor core\n- [shadcn/ui](https://ui.shadcn.com) \u0026 [Radix UI](https://www.radix-ui.com) — for elegant UI primitives\n- [Tailwind CSS](https://tailwindcss.com) — for making styling enjoyable\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\nIf RegexStudio helps you, please consider giving it a ⭐ Star!\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchenz24%2Fregex-studio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchenz24%2Fregex-studio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchenz24%2Fregex-studio/lists"}