what you have been looking for for a long time

The frontend often comes across complex forms. When creating them, we want it to be convenient for the user to fill out everything. Numbers must be formatted correctly so that at first glance it is clear that there is no extra zero. When you enter a credit card number, it is convenient to check it in blocks of 4 digits, just like it is printed on plastic. The user can enter a phone number, date of birth, passport number, and the like – there are many cases when user input needs to be formatted on the fly. This is what the mask does.

Finding a good solution to this problem is not easy. Masking libraries can often be frustrating for both developers and users. Common problems include a jumping cursor, difficulty with added characters such as hyphens or parentheses, browser autocomplete, errors in server-side rendering, and a confusing API.

These problems also affected us, and at some point we set out to develop our own solution. Today I would like to tell you why it deserves your attention.

Who is Maskito and why do you need it?

Maskito is a set of input masking libraries with a focus on both user and developer experience. In our documentation you will find many examples and a detailed API guide. The Getting Started section will explain the basics and quickly introduce you to the concepts and use cases.

Of course, Maskito is not the only solution you can find. But I'm sure there are certain things that set it apart from most of the alternatives available. That's why this article has such an ambitious title. My goal is to show why Maskito is worth paying attention to.

I know we already have some audience of engineers here who value our contributions to open source. Below I will give arguments with which you can come to a manager or team lead when the question arises about choosing a technology for a mask. If you are only interested in technically useful content, you can read another article from Maskito lead developer Nikita Barsukov, but skip this one.

Support for big business

Unlike many open source libraries that are maintained by individuals, Maskito is a product developed and used by one of the world's leading fintech companies. We are experienced open source authors who are paid for our work, so you can count on timely support and continuous development.

Our team has a number of successful projects, such as Taiga UI And Web APIs for Angularfor example. We take them very seriously because they are not pet projects or hobbies (although we love them as if they were). So you can expect our documentation to be clear, examples to be plentiful, and your questions to be answered in a timely manner in our telegram channel.

Framework independence

It doesn't matter if you use React, Vue or Angular for your product or rely on any other framework or even vanilla JavaScript – Maskito has you covered. Our core package has no dependencies and can be used in any frontend application. The same applies to masks, which we will look at next.

We have special packages for comfortable use of Maskito in React, Vue and Angular. Since the public API is quite concise, it will be easy to extend support to other popular frameworks. The actual masking configuration remains the same and can be easily switched between different projects and architectures.

Environment independent

Maskito works in all modern browsers, regardless of the environment in which you run it. You can use Web Components with Shadow DOM or use SSR to improve TTI and SEO – input fields won't cause problems trying to access the window under nodejs or getting confused by the encapsulated focus.

Maskito will also work correctly on touch devices and virtual keyboards for both input fields and textarea or even contenteditable elements. Interacting with the clipboard, Undo/Redo, dragging text or browser autocomplete are supported.

Our goal is to create a universal solution for masking on the web, and the web is extremely diverse. If you encounter any issues with a specific configuration, please feel free to report this.

High quality code

Maskito is supported by an experienced team with a history of creation universal solutions and open source libraries. Several Google Developer experts oversee the project and ensure that architectural decisions are well thought out and make sense in the long term.

All code is written in strict TypeScript and covered by 1000+ e2e tests, and community contributions are carefully vetted. We have highly tuned linters and automated pipelines that we've refined on other projects over the years to make sure technical flaws don't make it into release. We use it in a business product with millions of users. It is important for us that the cursor does not jump around in the input fields.

Not only us

We, of course, trust our decision and are happy with it. But the logical question is: will it suit your specific needs? We have a wide range of products across browsers and devices, with varying specifications and requirements. Our team consists of engineers specializing in universal solutions and flexible APIs. So we know there are an infinite number of use cases, and we're ready.

We are not alone in our confidence: Ionicthe famous cross-platform UI framework, has adopted Maskito as its official masking library. Their team conducted research into existing alternatives and considered developing their own mask. They decided that Maskito would meet the needs of their highly diverse user base and added examples of masking their components to the documentation.

The Maskito community continues to grow, there are already more than 1300 stars on GitHub, and the library can be found in the dependencies of a wide variety of companies – from AlfaBank to Turkish Trandyol. Perhaps it will be a solution for you too.

Ready to use

Maskito comes with a separate package of ready-to-use masks. We support a huge library of components that includes number input, credit cards, phones, dates, and so on. It is used in dozens of applications in our ecosystem that require additional masking for zip codes, IP addresses, serial numbers, and so on. Once these masks are implemented and properly tested, all common solutions end up in @maskito/kit.

This is an ever-growing collection of presets that you can use as is and be confident that they will work correctly. You can contribute to it or create an issue to add a feature for a specific solution in our repositories on GitHub.

Thanks to its good isolation, Maskito will be as small or as large as you need it to be. The main package is only about 3 KB when compressed, and unused presets will be tree-shaked, so your bundle size is in good hands.

Resume

Maskito is free for both personal and commercial use and is released under the Apache 2.0 license. I am proud of the result we have achieved and believe that this is the best solution for this task, which will continue to develop and become better.

I hope it helps you make your interfaces great for both your users and developers. Check out Maskito and if you like it, give us a star rating and tell your colleagues about it. Happy masking everyone!