# Micromodal: a 1.8 kB accessible modal dialog library for vanilla JavaScript > Micromodal handles aria attributes, focus trapping and Escape-to-close without a framework. It suits teams that want a small dependency and are willing to write their own markup and styling. **micromodal/Micromodal** — ⭕ Tiny javascript library for creating accessible modal dialogs - Repository: https://github.com/micromodal/Micromodal - Website: https://micromodal.now.sh/ - Stars: 3,657 · Forks: 233 - Language: JavaScript - License: MIT - Published: 2026-09-23 · Updated: 2026-09-23 · Language: en - Canonical page: https://hysenlabs.com/projects/micromodal-micromodal ## What Micromodal actually does, and who it is for Micromodal is a small JavaScript library whose stated aim is to make modal dialogs accessible with minimum configuration. It does not render a dialog for you. You write the HTML, the CSS and whatever button opens the dialog; the library attaches behaviour to that markup. The README lists what that behaviour is: toggling the relevant aria attributes on open and close, closing on overlay click, closing when the esc key is pressed, trapping tab focus inside the modal, focusing the first focusable element when it opens, restoring the previously focused element when it closes, and supporting nested modals. That list is the whole product. The audience is therefore narrow and specific: developers building plain HTML pages or server-rendered templates who need a dialog that keyboard and screen reader users can operate, and who do not want to pull in a component framework to get it. If you already use a framework with its own dialog primitive, this library adds a second way of doing the same job. The README does not present a React, Vue or Svelte binding, and the package metadata points at dist/micromodal.js, dist/micromodal.es.js and dist/micromodal.min.js, which are plain script and module builds. ## How the library takes over your markup The mechanism is declarative. You mark up a container and give it a data attribute that identifies the modal, then call the library's initialisation function once on page load. From that point the library listens for the trigger, moves focus into the dialog, applies the aria state, and reverses all of it on close. The README's feature list is essentially the contract: aria attributes are toggled, overlay clicks and the Escape key close the dialog, tab focus is trapped, the first focusable element receives focus, and the element that had focus before opening gets it back. Two design consequences follow. First, the library owns focus and keyboard behaviour, not layout or appearance. Any visual problem is your CSS, and any missing close button is your markup. Second, because the behaviour is keyed to data attributes in the DOM, the same script can drive several dialogs on one page without extra JavaScript. The README also states that nested modals are supported, which matters for flows such as a confirmation dialog opened from inside a settings dialog. The repository layout puts the source in src/ and the built artefacts in dist/, with rollup.config.js driving the build and the docs directory serving the demo site. ## Installing Micromodal and opening your first dialog Installation is offered four ways in the README: npm, yarn, a CDN script tag, or a direct download with curl. The npm command is the one most projects will use. ```bash npm install micromodal --save ``` If you prefer not to add a build step, the README gives two CDN URLs, on jsdelivr and unpkg, both pointing at dist/micromodal.min.js. A direct download of the same file is available through curl: ```bash curl -O -L https://unpkg.com/micromodal/dist/micromodal.min.js ``` After loading the script, you call the library's initialisation function. The README does not print a full call in the excerpt available here, so check the documentation site it links to (micromodal.github.io/Micromodal) and the Codepen example it references for the exact signature and the data attributes your markup needs. What the README does commit to is the behaviour you should observe once it is wired up: pressing Escape closes the dialog, clicking the overlay closes it, Tab stays inside it, and focus returns to the trigger afterwards. Test those four things first, because they are the library's entire value proposition. For Internet Explorer 11 and below, the README points to a polyfill suggested in issue 49 on the project's issue tracker rather than shipping one. That is a deliberate boundary: modern browsers are the default target. ## What Micromodal will not do for you The library is behaviour only. It does not create the dialog element, does not style it, and does not manage the open and close state you display elsewhere in your interface. You are responsible for the markup, the overlay, the CSS that hides and shows the container, and every button that triggers it. Teams used to a component library that renders a dialog from a prop will find this a step backwards in convenience, even though it is the reason the bundle stays at roughly 1.8 kB minified and gzipped as the README states. There is also a browser boundary. The README devotes a short section to IE 11 and below and tells you to use an external polyfill, which means the library does not carry legacy support itself. And because focus management is central to what it does, any custom widget you place inside the dialog (a date picker, a rich text editor, a canvas) can fight the focus trap. The README documents nested modals but says nothing about how third-party focusable widgets inside a modal should behave. If your dialog is mostly a complex embedded application, this is the wrong tool; you want a dialog primitive from the same framework that owns those widgets. ## Micromodal compared with native dialog and framework components The closest alternative is the browser's own dialog element, which gives you a modal container, backdrop and Escape handling in the platform. The difference in approach is that dialog is a rendering element with its own semantics, while Micromodal is a script that adds behaviour to markup you already have. If you control your markup and only target modern browsers, dialog removes a dependency entirely. If you need the same behaviour across a wider browser range, or you want to keep your existing div-based markup and CSS, Micromodal is the smaller change. The other alternative is a component from a UI framework such as Bootstrap or a React dialog library. Those ship rendering, styling and behaviour together, and they cost correspondingly more in bundle size and API surface. Micromodal's trade is explicit: you keep your markup and your CSS, and in exchange you write the markup and the CSS. There is no middle ground in the README, and no theming layer to configure. ## Maintenance, releases and the licence question The repository is not archived and the last push was on 2026-08-08, so the project is being touched. The release history shows 0.7.0 on 2026-06-04, 0.6.2 on 2026-05-31 and 0.6.1 on 2025-03-21. That is a long gap between 0.6.1 and 0.6.2, followed by two releases within days, which suggests maintenance happens in bursts rather than on a schedule. The README also includes a section asking for more core maintainers, which is a candid signal about capacity. Upgrade cost is low in principle because the library is small and has no runtime dependencies, but the version numbers are still below 1.0, so minor releases can carry breaking changes; read CHANGELOG.md before moving from 0.6.x to 0.7.0. On licensing, the README and the repository state MIT. The package.json in the repository lists "license": "ISC", which conflicts with the MIT badge and the README's licensing section. That discrepancy is worth resolving with the maintainers before you rely on either identifier in a compliance review. Nothing here is legal advice; treat the mismatch as a fact to check, not a conclusion. ## Conclusion Adopt Micromodal if you need accessible dialog behaviour in plain JavaScript and can supply your own HTML, CSS and open/close triggers. Do not adopt it if you expect the library to render the dialog markup, style it, or provide a component API for React and similar frameworks; the README shows only a script tag and configuration, not a rendering layer. Before committing, verify the exact dist filename and global export name in the current release, confirm that the focus and aria behaviour matches your dialog markup, and check the changelog for the 0.7.0 release so you know what changed since 0.6.x. ## FAQ ### What is Micromodal? Micromodal is a small, dependency-free JavaScript library for creating accessible modal dialogs. The README describes it as roughly 1.8 kB minified and gzipped, and lists aria attribute toggling, focus trapping, Escape-to-close and overlay-click-to-close among its features. ### How do I install Micromodal? The README gives four routes: npm install micromodal --save, yarn add micromodal, a script tag pointing at dist/micromodal.min.js on jsdelivr or unpkg, or a direct download with curl from unpkg. After loading it you call the library's initialisation function on page load. ### Does Micromodal work in Internet Explorer 11? Not on its own. The README has a section for IE 11 and below that directs you to a polyfill suggested in an issue on the project's tracker rather than bundling one. ### Does Micromodal render the dialog markup for me? No. The library adds behaviour to markup you write yourself, including the container, the overlay and the trigger buttons. The README's feature list covers aria state, focus and keyboard handling, not rendering or styling. ### What licence is Micromodal under? The README and the repository page state MIT, but the package.json in the repository lists "license": "ISC". Resolve that discrepancy with the maintainers before relying on either identifier. ## Sources - [License: MIT](https://github.com/micromodal/Micromodal/blob/master/LICENSE) - [micromodal/Micromodal on GitHub](https://github.com/micromodal/Micromodal) - [Project website](https://micromodal.now.sh/) - [README](https://github.com/micromodal/Micromodal/blob/master/README.md) - [Releases](https://github.com/micromodal/Micromodal/releases) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/micromodal-micromodal