# Maska: input masking for Vue, Alpine.js, Svelte and vanilla JS with no dependencies > Maska is a zero-dependency input mask library for Vanilla JS, Vue 2/3, Alpine.js and Svelte, published on npm at about 3 Kb gzipped. Its README names six feature categories without documenting them, directing readers to an external documentation site for configuration details. **beholdr/maska** — Simple zero-dependency input mask for Vue, Svelte, Alpine.js and vanilla JS. - Repository: https://github.com/beholdr/maska - Website: https://beholdr.github.io/maska/ - Stars: 2,021 · Forks: 78 - Language: TypeScript - License: MIT - Published: 2026-10-11 · Updated: 2026-10-11 · Language: en - Canonical page: https://hysenlabs.com/projects/beholdr-maska ## Input masking at keystroke time, not at form submission Forms that collect phone numbers, dates, card numbers or other formatted values need to enforce a pattern at some point. Applying that constraint after submission is the minimal approach, but it forces users to reformat values they have already typed. Input masking applies the constraint character by character, inserting separators automatically and discarding keystrokes that do not fit the defined pattern. Maska handles that problem for Vanilla JavaScript and for three component frameworks: Vue 2 and 3, Alpine.js and Svelte. Its README feature list includes six items: no dependencies at about 3 Kb gzipped, support for four integration environments, compatibility with both native and custom input elements, custom tokens with modifiers, transform functions and hooks, a number mask mode for money formatting, and three additional mask behavior modes named dynamic, reversed and eager. Two earlier projects are credited in the README as sources of inspiration: vue-the-mask and the jQuery Mask Plugin. Maska has no dependency on either and targets frameworks that neither of those projects covered. ## ~3 Kb gzipped and no runtime dependency graph After gzip compression, the library weighs roughly 3 Kb. That figure comes from the README's feature list, confirmed via the bundlephobia badge linked in the header. No production dependencies appear in the package.json at the repository root, which means adding Maska to a project adds one entry to node_modules with nothing underneath it that requires a separate audit. Two main build formats ship with the package. CommonJS consumers get dist/maska.js and ES module consumers get dist/maska.mjs. A CDN build lives at dist/cdn/maska.js under the unpkg path, allowing the library to be loaded from a script tag in projects that do not run a bundler. TypeScript definition files come alongside every build: dist/maska.d.ts covers the vanilla entry, and dist/alpine.d.ts, dist/svelte.d.ts and dist/vue.d.ts cover the three framework integrations separately. Version 3.2.2 is the current release, published on 2026-09-29. ## npm package maska and its four import paths Maska is published on npm under the name maska, confirmed by both the package.json name field and the npm badge in the README header linking to npmjs.com/package/maska. Version 3.2.2 is the current release. For installation steps, the project's documentation site at beholdr.github.io/maska/ is the place the README points to, since no install command is reproduced in the README itself. After adding the package, the import path determines which integration is loaded. Four top-level paths are defined in the package.json exports block: the bare maska import for vanilla JS, maska/vue for Vue, maska/alpine for Alpine.js and maska/svelte for Svelte. Each path resolves to both CJS and ESM builds and to a matching TypeScript definition file, so editors can check usage against the API for the integration in use. For projects that do not use a bundler, a CDN option is available via the unpkg path listed in package.json. That path loads the vanilla build only. Per-framework integrations are module imports and are not available as global script includes. ## Custom tokens carry three named extension points beyond the base character slot A fixed input mask works with a set of placeholder characters, each representing a class of input: a digit slot, a letter slot and so on. Maska extends that base model through custom tokens. Three named extension points are attached to those tokens: modifiers, transform functions and hooks. None of those three names comes with a description in the README. What a modifier changes about a token, what a transform function does to the value and when a hook fires are questions left to the documentation site. Custom tokens are listed separately from the number mask mode and separately from the three behavioral mask modes (dynamic, reversed and eager). Whether a custom token configuration can be combined with the number mask mode or applied inside a dynamic mask is not addressed in the README. For a field that needs both custom formatting logic and a behavioral mask mode, the documentation at beholdr.github.io/maska/ is the only source that describes valid combinations. Adopting the library based on the feature names alone, without reading those pages, risks discovering an unsupported combination after the implementation is underway. ## Number mask mode is a different mechanism from character-pattern masking Token-based masking works by matching each typed character against a defined slot. That approach has a structural limit for currency fields: a formatted number has a decimal position and a thousands separator that shift as digits are added or removed, and a static slot-based pattern cannot track those positions independently. Maska's number mask mode is described in the README as easy money formatting. It was added in version 3 and is listed as a separate feature from the custom token system, implying the two handle input through different paths. No configuration syntax, example values or description of practical behavior appears in the README or the package.json. The number of decimal places, the separator character, the currency symbol position and whether negative values are accepted are all undocumented in the package. For teams implementing a currency input, the documentation site at beholdr.github.io/maska/ holds the configuration details. Without reading those pages, it is not possible to confirm whether the mode suits a specific locale's number format before writing code. ## Dynamic, reversed and eager mask modes: three named variants without README descriptions Dynamic masks, reversed masks and eager masks appear in the feature list as distinct variants. Each name appears once, with no description attached to any of them. What a dynamic mask changes, what a reversed mask reverses and what an eager mask accelerates are not explained anywhere in the README. Four demo files are in the repository under the demo directory: demo/alpine.html, demo/index.html, demo/svelte.html and demo/vue.html. These likely illustrate some of the mask modes in a working browser context, but the README does not summarize what the demo files cover. vue-the-mask and the jQuery Mask Plugin are credited in the README as sources of inspiration, both having their own approaches to conditional or directional masking. Maska carries no dependency on either, and no claim about behavioral equivalence appears in the README. Anyone evaluating whether these modes fit a particular input pattern needs the documentation site to answer that question. The feature list establishes that three behavioral variants exist and that they are distinct from the token system and the number mask mode, but it does not give enough information to select or configure any of them. ## Version 3 changed the directive format and added Alpine.js and Svelte support Maska v3 made three documented additions: Alpine.js and Svelte integrations, the number mask mode, and a simplified directive format. The directive format change is described in the README as simplified, without showing the old and new syntax side by side. Teams upgrading from v2 to v3 need to check the changelog or the documentation site to find the exact API changes before attempting a migration. Adding Alpine.js and Svelte is the most structurally significant change in v3. Before that release, the library covered Vanilla JS and Vue only. Bringing the environment count to four is reflected directly in the repository: demo/alpine.html and demo/svelte.html sit alongside the earlier demo/index.html and demo/vue.html, and the package.json exports block now has four named paths where v2 had fewer. The v3 change list ends with other small improvements and fixes, without linking to a detailed changelog. Release history shows v3.2.0 arriving on 2025-07-02, v3.2.1 on 2026-09-02 and v3.2.2 on 2026-09-29. ## MIT license, authorship and what the README leaves undocumented Maska is released under the MIT license. LICENSE.txt at the repository root holds the full text. MIT imposes no restriction on commercial use and no requirement to make source code available when distributing a bundled copy, so adoption requires retaining the license notice in any distributed build. Alexander Shabunevich is listed as the author in package.json. A boosty.to support link appears in the README. No organizational backer or corporate sponsor is listed. At the time of the most recent release, the repository is not archived. Last push was on 2026-09-29, matching the v3.2.2 release date. Before using Maska in production, the external documentation site needs to fill the gaps the README leaves open. Six feature categories are listed in the README: the size and dependency claim, framework integrations, native and custom input support, custom tokens with their three extension points, number mask mode, and three behavioral mask modes. None of those categories is documented in detail within the package itself. Each requires a visit to beholdr.github.io/maska/ to read the configuration format, the valid combinations and the constraints that determine whether the feature fits the form requirement at hand. ## Conclusion Maska is a sound choice for front-end developers who use Vue, Alpine.js or Svelte and need input masking without adding a dependency tree. At about 3 Kb gzipped, the package ships with TypeScript definitions for each integration and was last updated on 2026-09-29. Skip it if you need configuration details to be documented inside the package itself: the README lists six feature categories and hands all specifics to an external documentation site. Before committing, open beholdr.github.io/maska/ and test the specific combination of mask mode and framework integration you need against a real input sequence. ## FAQ ### What is Maska? Maska is a JavaScript input mask library for Vanilla JS, Vue 2/3, Alpine.js and Svelte. It applies a defined pattern to form input fields character by character, weighs about 3 Kb gzipped and has no runtime dependencies. ### How do I install Maska? Maska is published on npm under the name maska, with version 3.2.2 as the current release. The package exports four entry points: the bare maska import for Vanilla JS, plus maska/vue, maska/alpine and maska/svelte for the framework integrations. ### Does Maska support Vue 3? Yes. Both the README and package.json list Vue 2 and Vue 3 as supported environments. The Vue integration is available under the maska/vue entry point, which resolves to its own TypeScript definition file. ### What is number mask mode in Maska? Number mask mode is a feature added in version 3, described in the README as easy money formatting. It is listed as a distinct mode from the character-pattern token system, and its configuration details are in the documentation site at beholdr.github.io/maska/. ### Does Maska require jQuery? No. Maska has no runtime dependencies. The README credits the jQuery Mask Plugin as a source of inspiration, but Maska is a separate implementation that does not depend on jQuery or any other library. ## Sources - [beholdr/maska on GitHub](https://github.com/beholdr/maska) - [License: MIT](https://github.com/beholdr/maska/blob/master/LICENSE) - [Project website](https://beholdr.github.io/maska/) - [README](https://github.com/beholdr/maska/blob/master/README.md) - [Releases](https://github.com/beholdr/maska/releases) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/beholdr-maska