Snowpack

---

What is Snowpack?

Snowpack is a modern, lightweight toolchain for web application development. Traditional dev bundlers like webpack or Parcel need to rebuild & rebundle entire chunks of your application every time you save a single file. This introduces lag between changing a file and seeing those changes reflected in the browser, sometimes as slow as several seconds.

Snowpack solves this problem by serving your application unbundled in development. Any time you change a file, Snowpack never rebuilds more than a single file. There's no bundling to speak of, just a few milliseconds of single-file rebuilding and then an instant update in the browser via HMR. We call this new approach O(1) Build Tooling. You can read more about it in our Snowpack 2.0 Release Post.

When you're ready to deploy your web application to users, you can add back a traditional bundler like Webpack or Parcel. With Snowpack you get bundled & optimized production performance without sacrificing dev speed by adding an unnecessary bundler,

Key Features

• A dev environment that starts up in 50ms or less.
• Changes are reflected instantly in the browser.
• Integrates your favorite bundler for production-optimized builds.
• Out-of-the-box support for TypeScript, JSX, CSS Modules and more.
• Connect your favorite tools with third-party plugins.

💁 More info at the official Snowpack website ➞

Community

Join the Pika Discord for discussion, questions about Snowpack or related Pika projects, or to show off what you’re working on!

Create Snowpack App (CSA)

For starter apps and templates, see create-snowpack-app.

Official Snowpack Plugins

Dev Environment

• @snowpack/plugin-dotenv

Build

• @snowpack/plugin-babel
• @snowpack/plugin-svelte
• @snowpack/plugin-vue

Transform

• @snowpack/plugin-postcss
• @snowpack/plugin-react-refresh

Bundle

• @snowpack/plugin-parcel
• @snowpack/plugin-webpack

Advanced Plugins

• @snowpack/plugin-build-script
• @snowpack/plugin-run-script

Featured Community Plugins

• @prefresh/snowpack
• snowpack-plugin-imagemin Use imagemin to optimize your build images.
• snowpack-plugin-import-map A more easy way to map your imports to Pika CDN instead of import-maps.json.
• snowpack-plugin-less Use the Less compiler to build .less files from source.
• snowpack-plugin-mdx Use the MDX compiler to build .mdx and .md files from source.
• snowpack-plugin-resize-images Resize and process your build images with Sharp.
• snowpack-plugin-sass Use the node-sass to build .sass/.scss files from source.
• snowpack-plugin-svgr Use SVGR to transform .svg files into React components.
• snowpack-plugin-stylus Use the Stylus compiler to build .styl files from source.
• snowpack-plugin-inliner A plugin for snowpack which transforms files into base64 URIs.
• PRs that add a link to this list are welcome!