Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


wmr logo

npm install size OpenCollective Backers OpenCollective Sponsors

The tiny all-in-one development tool for modern web apps, in a single 2mb file with no dependencies.

All the features you'd expect and more, from development to production:

šŸ”Ø Ā  No entry points or pages to configure - just HTML files with <script type=module>
šŸ¦¦ Ā  Safely import "packages" from npm without installation
šŸ“¦ Ā  Smart bundling and caching for npm dependencies
ā†» Ā  Hot reloading for modules, Preact components and CSS
āš”ļø Ā  Lightning-fast JSX support that you can debug in the browser
šŸ’„ Ā  Import CSS files and CSS Modules (*.module.css)
šŸ”© Ā  Out-of-the-box support for TypeScript
šŸ“‚ Ā  Static file serving with hot reloading of CSS and images
šŸ—œ Ā  Highly optimized Rollup-based production output (wmr build)
šŸ“‘ Ā  Crawls and pre-renders your app's pages to static HTML at build time
šŸŽ Ā  Built-in HTTP2 in dev and prod (wmr serve --http2)
šŸ”§ Ā  Supports Rollup plugins, even in development where Rollup isn't used

Quickstart (recommended)

Create a new project in seconds using create-wmr:

npm init wmr your-project-name


yarn create wmr your-project-name

illustration of installation to build for wmr

šŸ’ If you'd like ESLint to be set up for you, add --eslint to the command. Note: this will use 150mb of disk space.

Check out the docs to learn more


Package Description Version
wmr Tiny all-in-one development tool for modern web apps wmr npm
create-wmr Create a new WMR project in seconds create-wmr npm
@wmrjs/directory-import Import a directory's files as an Array @wmrjs/directory-import npm
@wmrjs/nomodule Generate legacy fallback bundles for older browsers @wmrjs/nomodule npm
@wmrjs/service-worker Bundle service workers @wmrjs/service-worker npm
preact-iso Optimal code-splitting, hydration and routing for Preact preact-iso npm


git clone
cd wmr

# run the demo (no compile)
yarn demo serve

# build and serve the demo for prod
yarn demo build:prod && yarn demo serve:prod

# build the single-file CLI:
yarn workspace wmr build

Adding a changeset

Don't forget to also include a changeset, by running this command at the root of the project:

yarn changeset

This will take you through a process of selecting the changed packages, the version updates and a description of the change. Afterwards, changesets, will generate a .md file inside a .changeset directory. Please commit that file as well.

After all that, you are good to go. šŸ‘