CINXE.COM

<!DOCTYPE html><html><head><style type="text/css"> @charset "UTF-8"; blockquote.astro-ldKR6c5M { margin: 1rem 0; } blockquote.astro-ldKR6c5M a.astro-ldKR6c5M { font-weight: bold; } .layout.astro-ldKR6c5M { display: grid; grid-template-areas: "main"; } @media (min-width: 800px) { .layout.astro-ldKR6c5M { grid-template-areas: "nav main"; grid-template-columns: 16rem auto; } } .layout-nav.astro-ldKR6c5M { grid-area: nav; } .layout-main.astro-ldKR6c5M { grid-area: main; } .top.astro-ldKR6c5M { text-align: left; } .img-banner.astro-ldKR6c5M { background: #f0db4f; display: block; text-align: center; } .img-banner.astro-ldKR6c5M img.astro-ldKR6c5M { max-width: min(32rem, 100%); } .bullets.astro-ldKR6c5M { display: grid; grid-row-gap: 1em; grid-column-gap: 2em; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 2.5em 0 !important; padding: 0.1em !important; list-style: none; } .bullets.astro-ldKR6c5M .bullet-heading.astro-ldKR6c5M { margin: 0 0 0.25em 0; font-size: 1.25em; } .bullet.astro-ldKR6c5M { padding: 0.25em; border-radius: 4px; } .bullet.astro-ldKR6c5M h3.astro-ldKR6c5M { display: flex; align-items: center; } .bullet.astro-ldKR6c5M h3.astro-ldKR6c5M::before { content: "✅"; font-size: 0.75em; display: block; margin-right: 0.5rem; } .buttons.astro-ldKR6c5M { margin: 2em 0; text-align: center; } .buttons.astro-ldKR6c5M>.astro-ldKR6c5M { margin-left: 0.5rem; margin-right: 0.5rem; }</style><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png"><link rel="manifest" href="/favicon/site.webmanifest"><title>Snowpack</title><meta name="title" content="Snowpack"><meta name="description" content="Snowpack is a lightning-fast frontend build tool, designed for the modern web."><meta property="og:type" content="website"><meta property="og:url" content="TODO"><meta property="og:title" content="Snowpack"><meta property="og:description" content="Snowpack is a lightning-fast frontend build tool, designed for the modern web."><meta property="og:image" content="https://www.snowpack.dev/img/social-2.jpg"><meta property="twitter:card" content="summary_large_image"><meta property="twitter:url" content="TODO"><meta property="twitter:title" content="Snowpack"><meta property="twitter:description" content="Snowpack is a lightning-fast frontend build tool, designed for the modern web."><meta property="twitter:image" content="https://www.snowpack.dev/img/social-2.jpg"><link rel="stylesheet" href="/_astro/common-1ckxTT.css" type="text/css"><link href="https://fonts.googleapis.com/css2?family=Overpass:wght@400;700;900&display=swap" rel="stylesheet"><link rel="stylesheet" href="/_astro/index-ZsKqUi.css" type="text/css"></head><body><nav class="nav astro-ahFEmudE"><button id="toc-drawer-button" class="mobile-open astro-ahFEmudE" type="button" aria-expanded="false" aria-controls="nav-primary"><svg focusable="false" class="hamburger astro-ahFEmudE" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><title>Toggle mobile menu</title><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z" class="astro-ahFEmudE"></path></svg></button><a class="logo astro-ahFEmudE" href="/"><svg class="logo-icon astro-ahFEmudE" viewBox="0 0 640 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g transform="translate(-1.000000, 0.000000)" fill-rule="nonzero" class="astro-ahFEmudE"><path d="M635.92,462.7 L347.92,14.7 C342.03,5.54 331.89,0 321,0 C310.11,0 299.97,5.54 294.08,14.7 L6.08,462.7 C-0.250773249,472.547007 -0.699487627,485.064987 4.91,495.34 C10.522069,505.612419 21.2945349,512 33,512 L609,512 C620.71,512 631.48,505.61 637.09,495.33 C642.699457,485.058495 642.250708,472.543372 635.92,462.7 Z M321,91.18 L406.39,224 L321,224 L257,288 L218.94,249.94 L321,91.18 Z" id="Shape" class="astro-ahFEmudE"></path></g></svg><span class="logo-type astro-ahFEmudE">Snowpack</span></a><div class="search astro-ahFEmudE"><input type="text" name="search" placeholder="Search documentation..." class="search-input astro-ahFEmudE" id="search-form-input"><span class="search-hint astro-ahFEmudE"><span class="sr-only astro-ahFEmudE">Press </span><kbd class="font-sans astro-ahFEmudE"><abbr title="Command" style="text-decoration: none;" class="astro-ahFEmudE">⌘</abbr></kbd><span class="sr-only astro-ahFEmudE"> and </span><kbd class="font-sans astro-ahFEmudE">K</kbd><span class="sr-only astro-ahFEmudE"> to search</span></span></div><a href="https://github.com/FredKSchott/snowpack/releases" target="_blank" class="link version astro-ahFEmudE">v3.8.8</a><a href="https://github.com/FredKSchott/snowpack" target="_blank" class="link link__desktop astro-ahFEmudE"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="social astro-ahFEmudE" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" class="astro-ahFEmudE"></path></svg></a></nav><script> function handleMobileNav(evt) { evt.preventDefault(); /*If hidden-mobile class is enabled that means we are on desktop do overflow normal but we if we are at mobile fixed body position, so that its not scrollable(which currently causing bug) and navbar handling its owns scroll. Case to consider there are chance use can open navbar using toggle button and user when click on any link body postion should be unset */ document.body.classList.toggle('is-nav-open'); const isOpen = document.body.classList.contains('is-nav-open'); if (isOpen) { evt.target.setAttribute('aria-expanded', 'true'); } else { evt.target.setAttribute('aria-expanded', 'false'); } } const mobileNavBtn = document.getElementById('toc-drawer-button'); mobileNavBtn.addEventListener('click', handleMobileNav); mobileNavBtn.addEventListener('touchend', handleMobileNav); if (window.location.pathname.startsWith('/posts')) { mobileNavBtn.style.display = 'none'; } const searchFormInputEl = document.getElementById('search-form-input'); searchFormInputEl.addEventListener('keyup', () => { const gridTocEl = document.querySelector('#nav-primary'); if (searchFormInputEl.value) { gridTocEl.classList.add('is-mobile-hidden'); } else { gridTocEl.classList.remove('is-mobile-hidden'); } }); document.onkeydown = function (e) { if ((e.ctrlKey || e.metaKey) && e.which == 75) { e.preventDefault(); searchFormInputEl.focus(); } }; </script><script type="module" src="/_astro/src/components/docsearch.js"></script><doc-search api-key="562139304880b94536fc53f5d65c5c19" selector="#search-form-input" class="astro-ahFEmudE"></doc-search><div class="hero astro-KJI3335L"><div class="section astro-KJI3335L"><h1 class="header-snowpack astro-KJI3335L">Snowpack</h1><p class="header-snowpack-subtitle astro-KJI3335L">The faster frontend build tool.</p><div class="hero-cta astro-KJI3335L"><a href="/tutorials/quick-start" class="astro-KJI3335L"><span class="btn btn__primary astro-YiswFm4A">Get started</span></a><div style="margin: 0.5rem" class="astro-KJI3335L"></div><button id="copy-button" class="copy-button hidden-mobile astro-KJI3335L" data-clipboard-text="npm install snowpack"><span class="faded astro-KJI3335L" style="margin-right: 0.75rem;">$</span><span id="copy-button-text" class="astro-KJI3335L">npm install snowpack</span><svg style="height: 22px;width: 22px;margin: -0.1rem -0.1rem 0 0.75rem;" aria-hidden="true" focusable="false" data-prefix="far" data-icon="clone" class="svg-inline--fa fa-clone fa-w-16 astro-KJI3335L" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M464 0H144c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h48c26.51 0 48-21.49 48-48V48c0-26.51-21.49-48-48-48zM362 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h42v224c0 26.51 21.49 48 48 48h224v42a6 6 0 0 1-6 6zm96-96H150a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h308a6 6 0 0 1 6 6v308a6 6 0 0 1-6 6z" class="astro-KJI3335L"></path></svg></button><script type="module"> import Clipboard from 'https://cdn.skypack.dev/pin/clipboard@v2.0.6-eJjsV6JYCJOnOsq3YfEc/min/clipboard.js'; const clippy = new Clipboard('.copy-button'); const copyText = document.getElementById('copy-button').innerHTML; clippy.on('success', function (e) { document.getElementById('copy-button').style.minWidth = document.getElementById('copy-button').offsetWidth; console.info('Trigger:', e); document.getElementById('copy-button').innerHTML = '<span>copied to clipboard!</span>'; document.getElementById('copy-button').addEventListener("mouseleave", function (event) { document.getElementById('copy-button').innerHTML = copyText; }, false); setTimeout(() => { e .trigger .classList .remove('active') }, 1000); e.clearSelection(); }); </script></div><div class="hero-cta astro-KJI3335L"><div class="hidden-mobile astro-KJI3335L" style="text-align: center; height: 36px;"><a class="github-button astro-KJI3335L" href="https://github.com/FredKSchott/snowpack" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star FredKSchott/snowpack on GitHub">Star</a></div></div></div></div><div foo="Snowpack" class="wrapper astro-ldKR6c5M" style="margin: 0 auto"><section class="layout pt6 pb6 astro-ldKR6c5M"><aside id="nav-primary" class="layout-nav astro-ldKR6c5M"><nav class="nav astro-hk9uDi21"><ol class="contents astro-hk9uDi21"><li class="section astro-hk9uDi21"><span class="header astro-hk9uDi21">Concepts</span><ol class="items astro-hk9uDi21"><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/concepts/how-snowpack-works">How Snowpack Works</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/concepts/dev-server">The Dev Server</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/concepts/build-pipeline">The Build Pipeline</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/concepts/hot-module-replacement">Fast Refresh & HMR</a></li></ol></li><li class="section astro-hk9uDi21"><span class="header astro-hk9uDi21">Getting Started</span><ol class="items astro-hk9uDi21"><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/tutorials/quick-start">Quick Start</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/tutorials/getting-started">Getting Started</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/tutorials/react">React</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/tutorials/svelte">Svelte</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/tutorials/vue">Vue</a></li></ol></li><li class="section astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/guides"><span class="header astro-hk9uDi21">Guides</span></a></li><li class="section astro-hk9uDi21"><span class="header astro-hk9uDi21">Reference</span><ol class="items astro-hk9uDi21"><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/reference/configuration">snowpack.config.js</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/reference/cli-command-line-interface">Command Line API</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/reference/javascript-interface">JavaScript API</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/reference/plugins">Plugin API</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/reference/environment-variables">Environment Variables</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/reference/hot-module-replacement">HMR API</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/reference/supported-files">Supported Files</a></li><li class="astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/reference/common-error-details">Common Errors</a></li></ol></li><li class="section astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/plugins"><span class="header astro-hk9uDi21">Plugin Catalog</span></a></li><li class="section astro-hk9uDi21"><a class="link astro-hk9uDi21" href="/news"><span class="header astro-hk9uDi21">Community & News</span></a></li></ol></nav></aside><article class="layout-main astro-ldKR6c5M"><a class="img-banner astro-ldKR6c5M" href="https://osawards.com/javascript/2020" target="_blank" rel="noopener noreferrer"><img src="/img/JSAwardWinner.png" alt="2020 JavaScript Open Source Award Winner banner" class="astro-ldKR6c5M"></a><blockquote class="astro-ldKR6c5M"><p class="astro-ldKR6c5M"><strong class="astro-ldKR6c5M">Update (April 20, 2022):</strong> Snowpack is no longer actively maintained and is not recommended for new projects.</p><p class="astro-ldKR6c5M">Check out <a href="https://vitejs.dev/" rel="nofollow" class="astro-ldKR6c5M">Vite</a> for a well-maintained Snowpack alternative.<br class="astro-ldKR6c5M"> See also: <a href="https://esbuild.github.io/" rel="nofollow" class="astro-ldKR6c5M">esbuild</a>, <a href="https://parceljs.org/" rel="nofollow" class="astro-ldKR6c5M">parcel</a></p></blockquote><div class="markdown-body feature-list astro-ldKR6c5M"><div class="top astro-ldKR6c5M"><h2 id="what-is-snowpack%3F" class="astro-ldKR6c5M">What is Snowpack?</h2><p class="astro-ldKR6c5M"><strong class="astro-ldKR6c5M">Snowpack is a lightning-fast frontend build tool, designed for the modern web.</strong> It is an alternative to heavier, more complex bundlers like webpack or Parcel in your development workflow. Snowpack leverages JavaScript's native module system (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import" class="astro-ldKR6c5M">known as ESM</a>) to avoid unnecessary work and stay fast no matter how big your project grows. </p><p class="astro-ldKR6c5M"> Once you try it, it's impossible to go back to anything else. </p></div><ul class="bullets astro-ldKR6c5M"><li class="bullet astro-ldKR6c5M"><h3 class="bullet-heading astro-ldKR6c5M">Instant startup</h3> Snowpack's unbundled web development server <strong class="astro-ldKR6c5M">starts up in 50ms or less</strong> and stays fast in large projects. </li><li class="bullet astro-ldKR6c5M"><h3 class="bullet-heading astro-ldKR6c5M">Build once, cache forever</h3> Snowpack never builds the same file twice. Powered by JavaScript’s native module system (ESM) in the browser. </li><li class="bullet astro-ldKR6c5M"><h3 class="bullet-heading astro-ldKR6c5M">HMR feat. Fast Refresh</h3> No refresh required. See changes reflected instantly in the browser with <a href="/concepts/hot-module-replacement" class="astro-ldKR6c5M">HMR + Fast Refresh</a> for React, Preact & Svelte. </li><li class="bullet astro-ldKR6c5M"><h3 class="bullet-heading astro-ldKR6c5M">Out-of-the-box support</h3> Enjoy Snowpack's built-in support for JSX, TypeScript, React, Preact, CSS Modules <a href="/reference/supported-files" class="astro-ldKR6c5M">and more.</a></li><li class="bullet astro-ldKR6c5M"><h3 class="bullet-heading astro-ldKR6c5M">Optimize for production</h3> Build for production with built-in optimizations and plugin support for your favorite bundlers. </li><li class="bullet astro-ldKR6c5M"><h3 class="bullet-heading astro-ldKR6c5M">Plugins? Plugins!</h3> Babel? Sass? MDX? Browse the entire <a href="/plugins" class="astro-ldKR6c5M">Snowpack Plugin Catalog</a> to connect your favorite build tool (or <a href="/reference/plugins" class="astro-ldKR6c5M">create your own!</a>) </li></ul><div class="buttons astro-ldKR6c5M"><a href="/tutorials/quick-start" class="astro-ldKR6c5M"><span class="btn btn__primary astro-YiswFm4A">Get started</span></a><a href="/concepts/how-snowpack-works" class="astro-ldKR6c5M"><span class="btn astro-YiswFm4A">Learn more</span></a></div></div></article></section></div><script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-130280175-9"></script><script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-130280175-9', { page_path: location.pathname === '/' ? (location.pathname + location.hash) : (location.pathname) }); </script><script async="async" defer="defer" src="https://buttons.github.io/buttons.js"></script></body></html>