Introducing microregex - A highly Curated Catalog of RegEx Patterns

Introducing microregex - A highly Curated Catalog of RegEx Patterns


5 min read


Regular expressions are an important aspect of software development. Owing to being a powerful and complex language, they can be used to search and replace text, validate input, extract data from structured documents, and more. Remembering all the different regex patterns can be a difficult task. Having an app that will provide you with a list of common regex patterns and their use cases will definitely help.


microregex is an open source and highly curated catalog of regular expression patterns. It offers programmers RegEx snippets that can be quickly exported into a variety of programming languages and distributed around teams. Whether you are building an app or a website, microregex is the right place for you.


While coding, I found myself spending a lot more time merely scanning the regex for various sorts of validation rather than needing to fast search and locate one that fits my needs. Most developers jump through numerous hoops of Stack Overflow responses or an article discussing a specific regex snippet to get the one regex pattern that they require. It seems like a lengthy procedure. A friend of mine who experienced the same discomfort joined me in developing a tool that will make finding and copying regex patterns simpler.


Try out microregex by clicking on the link below:

Visual Demonstration πŸ“Έ


Features βœ…

  • Search and copy common regex patterns

  • Syntax highlighting

  • Ability to copy code directly for multiple programming languages

  • Ability to filter search based on tags

  • Formatted code for a specific language

Tech Stack βš’οΈ

Folder Structure πŸ“

β”œβ”€ assets/
β”œβ”€ public/
β”‚  β”œβ”€ favicon.ico
β”‚  β”œβ”€ index.html
β”‚  β”œβ”€ robots.txt
β”œβ”€ src/
β”‚  β”œβ”€ components/
β”‚  β”‚  β”œβ”€ card.tsx
β”‚  β”‚  β”œβ”€ navbar.tsx
β”‚  β”œβ”€ graphql/
β”‚  β”‚  β”œβ”€ queries.ts
β”‚  β”œβ”€ pages/
β”‚  β”‚  β”œβ”€ home.tsx
β”‚  β”œβ”€ utils/
β”‚  β”‚  β”œβ”€ copytest.ts
β”‚  β”‚  β”œβ”€ tags.ts
β”‚  β”œβ”€ index.css
β”‚  β”œβ”€ index.js
β”œβ”€ .gitignore
β”œβ”€ package.json

We follow simplicity as we explore through the folder structure where files are grouped together based on the usage.

pages β€” are the parent components that can be hyperlinked

components β€” mini components that could be re-used

graphql β€” all our queries going out to

utils β€” all of our utility code that could be reused

Technical Information ℹ️

For storing data, we have used Nhost database, which uses Hasura Postgres DB. Nhost encapsulates and makes it easier for you to use, access and navigate the database and storage modules provided by Hasura.

We used two different graphql queries for searching

  1. All Data Query β€” used while initial page load
query {
    patterns {
  1. Like Name Query β€” used for querying using name field
query getPatternsLike($name: String){
    patterns(where: {name: {_ilike: $name}}) {


The primary challenge which we faced was that after querying the jsonb data using contains operator as mentioned here we would get an error as below


Nhost wasn't allowing us to query multiple strings in an array of strings.

Old GraphQL Query:

query getPatterns($tags: jsonb) {
  where: {
    _and: [{ name: { _ilike: "%%" } }, { tags: { _contains: $tags} }]

Old Variables:

  "tags": ["auth", "finance"]

As you can see, if one or more elements are included in variables, as shown in the above query and variables snippet, it gives the same error as mentioned in the above paragraph.

New GraphQL Query:

query getPatterns($where: patterns_bool_exp) {
  patterns(where: $where) {

New Variables:

  "where": {
    "_and": [
        "name": {
          "_ilike": "%%"
        "_or": [
            "tags": {
              "_contains": "finance"

So instead of comparing the objects, we used patterns_bool_exp. It is a boolean expression to filter out rows from a table, 'patterns' in our case, and all the fields are combined with a logical 'AND'.

Nhost πŸ“¦

If you're looking to host your Postgres database for free, you should definitely check out Nhost. It has a lot of features similar to Firebase with the ability to query data using GraphQL and use Hasura for all development services.

Checkout the docs here: []

Enhancements ✨

  • Implemented a debounced search and filtering where limited requests are made avoiding unnecessary calls to our GraphQL endpoints

  • Responsiveness

  • We used useMediaQuery hook & inline styling to handle responsiveness at certain breakpoints.

Future Scope πŸ”­

  • Take advantage of color mode offered by chakra-ui to add dark mode support

  • Visualize regex with examples

  • Language export script that will optimize data entry

  • Revisit search and make it more user-friendly

Contribution and Hacktoberfest πŸ“

Hacktoberfest is a great initiative in my opinion because it encourages more contributions, more developer engagement and in turn a rapid growth of countless open source projects. If you are a developer interested in contributing to an open source project,

Creators πŸ‘₯


GitHub repo:

Vote of thanks 🀝

We would like to thank Nhost and React-Play for hosting Hack-R-Play. Special thanks to the members of React-Play discord server for providing such a good support.

Did you find this article valuable?

Support ReactPlay Blog by becoming a sponsor. Any amount is appreciated!