A build tool for the rest of us.
Parcel starts with a great development experience, from starting a new project, to iterating and debugging, and shipping to production. No more fiddling with configuration, or spending hours to keep up with best practices – it just works!
Batteries included
Start with an HTML file. Add a <script> tag. Maybe some CSS. How about TypeScript? SVG? Images? No problem. Parcel works out of the box just as you'd expect.
Parcel supports many languages and file types out of the box, from web technologies like HTML, CSS, and JavaScript, to assets like images, fonts, videos, and more.
Get started →<html>
<head>
<title>My First Parcel App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, World!</h1>
<script type="module" src="app.tsx"></script>
</body>
</html>Dev server
Parcel includes a development server out of the box. Just run parcel serve index.html to get started.
Need HTTPS? Run Parcel with the --https flag, and it will automatically generate a trusted certificate for you!
Parcel is also full stack. Use the parcel run command to start a Node server with hot reloading, and support for React Server Components.
Hot reloading
When you make a change, Parcel automatically updates your code in the browser – no page reload necessary!
import React from 'react';
export function Greeting() {
return <h1>Hello world!</h1>;
}
Parcel also integrates with React Fast Refresh to automatically preserve your application state between updates. This gives you instant feedback as you make changes, without taking you out of context.
Learn more →Diagnostics
If you make an error in your code or configuration, Parcel displays beautiful diagnostics in your terminal and in the browser.
Every error includes a syntax highlighted code frame pointing to the exact location where the error occurred, along with hints about how to fix the issue.
Many diagnostics even include a documentation link where you can learn more.
$ parcel serve index.html
Server running at http://localhost:1234
🚨 Build failed.
@parcel/core: Cannot resolve 'ract' from './index.js'
/dev/app/index.js:1:19
> 1 | import React from 'ract';
> | ^^^^^^
2 |
3 | function Test() {
@parcel/resolver-default: Cannot find module 'ract'
Did you mean 'react'?
It's lightning fast.
Parcel is written in Rust for native performance, taking advantage of all of your CPU cores. Extend it with native plugins written in Rust, Go, Swift, or C.
Native performance
Parcel is written in Rust for maximum performance. It is 10-100x faster than other JavaScript-based tools!
Parcel's JavaScript compiler is built on SWC, which handles transpiling JavaScript, JSX, and TypeScript.
Parcel's CSS transformer and minifier is built in Rust on top of the browser-grade CSS parser used in Firefox. It's over 100x faster than other JavaScript-based transformers and minifiers.
Multi-core
Parcel is designed around a multi-core architecture that parallelizes work across all of your cores and takes full advantage of modern hardware.
Transforming individual source files is parallelized, as well as packaging and optimizing output bundles. All of this is completely automatic and does not require any work by plugin authors or other tools that integrate with Parcel.
Native plugins
Write plugins in Rust, Go, Swift, or any language with a C ABI. Native plugins are a great fit for performance critical transformers, and run in parallel across all of your cores.
And of course, JavaScript and TypeScript plugins work too, running in a custom multi-core runtime built on QuickJS.
Learn more →struct MyTransformer;
impl Plugin for MyTransformer {
fn transform(&self, asset: &mut Asset, _: &Options) -> Result<(), Diagnostic> {
let code = compile(&asset.content()?);
asset.set_content(code);
Ok(())
}
}
Automatic production optimization.
Parcel optimizes your whole app for production automatically. This includes tree-shaking and minifying your JavaScript, CSS, and HTML, resizing and optimizing images, content hashing, automatic code splitting, and much more.
Tree shaking
Parcel supports tree-shaking both ES modules and CommonJS out of the box! It statically analyzes the imports and exports of each module, and removes everything that isn't used.
Tree shaking even works across dynamic import() boundaries, shared bundles, and even across languages like CSS modules and SVG.
import {add} from './math';
console.log(add(2, 3));
export function add(a, b) {
return a + b;
}
export function square(a) {
return a * a;
}
Minification
Parcel includes minifiers for JavaScript, CSS, HTML, and SVG out of the box! Just run parcel build index.html, and your whole application will be built and optimized automatically.
Image optimization
Parcel supports resizing, converting, and optimizing images! Just pass query parameters for the format and size you need when referencing the image file in your HTML, CSS, JavaScript, etc. and Parcel will take care of the conversion and optimization process.
You can even request multiple sizes or formats of the same source image for different devices or browsers!
Learn more →<picture>
<source type="image/webp" srcset="image.jpg?as=webp&width=400, image.jpg?as=webp&width=800 2x">
<source type="image/jpeg" srcset="image.jpg?width=400, image.jpg?width=800 2x">
<img src="image.jpg?width=400" width="400">
</picture>Bundle analyzer
Wondering what's in your bundles? Run parcel build --analyze to generate an interactive treemap of every bundle in your app.
Code splitting
When multiple parts of your application depend on the same common modules, they are automatically deduplicated into a separate bundle. This allows commonly used dependencies to be loaded in parallel with your application code and cached separately by the browser!
Code splitting is also supported for CSS. If you import CSS from your JavaScript, a sibling CSS bundle will be produced and loaded in parallel with the JS bundle.
Learn more →Content hashing
Parcel automatically includes content hashes in the names of all output files. This enables long-term browser caching, because the output is guaranteed not to change unless the name does.
Parcel also resolves all referenced bundles relative to their parent using a manifest in each entry. This means that changes to referenced bundles don't invalidate the cache for their parents as well, and output files can be moved between locations without rebuilding.
Learn more →Ship for any target.
Parcel automatically transforms your code for your target environments. From modern and legacy browser support, to zero config JSX and TypeScript compilation, Parcel makes it easy to build for any target – or many!
Transpilation
Parcel transpiles your JavaScript and CSS for your target browsers automatically! Just declare a browserslist in your package.json, and Parcel takes care of transpiling only what's needed.
In addition to standard JavaScript, Parcel automatically handles JSX, and TypeScript, along with Node.js features like process.env and fs.readFileSync – no configuration needed!
When it comes to CSS, Parcel supports transpiling modern syntax features like lab() colors, logical properties, and CSS nesting syntax, as well as automatically adding the necessary vendor prefixes for your browser targets.
function DogName(props) {
return (
<span>
{props.dog?.name ?? 'Buddy'}
</span>
);
}
function DogName(props) {
var ref, ref1;
return /*#__PURE__*/ React.createElement(
"span",
null,
(ref1 = (ref = props.dog) === null || ref === void 0 ? void 0 : ref.name) !== null && ref1 !== void 0 ? ref1 : "Buddy"
);
}
Libraries
Parcel can build libraries for multiple targets at once! For example, your source code can be compiled to a modern ES module, and a legacy CommonJS module automatically. Just add the relevant fields to your package.json and Parcel takes care of the rest.
You can even build a whole monorepo of packages in a single command! 🤯 parcel build packages/*
{
"name": "my-great-library",
"version": "1.0.0",
"exports": {
"source": "./src/index.js",
"import": "./dist/module.mjs",
"require": "./dist/main.cjs"
}
}
Workers
Parcel supports web workers, service workers, and worklets out of the box! Just use the standard browser APIs and Parcel will automatically follow the dependency.
It even generates native ES module workers when possible, depending on your browser targets!
Learn more →let worker = new Worker(
new URL('./worker.js', import.meta.url),
{type: 'module'}
);
navigator.serviceWorker.register(
new URL('./sw.js', import.meta.url),
{type: 'module'}
);Scalable from small websites to massive applications.
Parcel requires zero configuration to get started. But as your application grows and your build requirements become more complex, it's possible to extend Parcel in just about every way.
Simple configuration?!
Configuring Parcel is like a breath of fresh air. .parcelrc is a simple JSON-based config format that uses globs to match your source files to build pipelines. You can extend the default config and add plugins to handle custom file types, or override and extend the defaults.
Extends
Start with the default config, or a community preset.
Transformers
Compile individual source files and extract dependencies.
Resolvers
Resolve a dependency to a file path or virtual module.
Namers
Determine the name of an output file.
Optimizers
Minify, optimize, and transform output files.
Reporters
Receive events on build progress and completion.
{
"extends": ["@parcel/config-default"],
"transformers": {
"*.svg": ["@parcel/transformer-svg-jsx"]
},
"resolvers": ["@parcel/resolver-glob", "..."],
"namers": ["@company/parcel-namer", "..."],
"optimizers": {
"*.js": ["parcel-optimizer-license-headers"]
},
"reporters": ["...", "parcel-reporter-manifest"]
}
Powerful plugins
import {Transformer} from '@parcel/plugin';
export default new Transformer({
async transform({asset}) {
let source = asset.getCode();
let sourceMap = asset.getMap();
let {code, map} = compile(source, sourceMap);
asset.setCode(code, map);
}
});
Parcel has a plugin for everything. In fact, Parcel core is completely language agnostic! From transforming files, to resolving dependencies, to bundling and optimizing – everything is customizable.
Each plugin type has a specific, well defined API designed for its purpose. All objects and methods are fully documented, and include TypeScript definitions for autocomplete and type safety.
Learn more →Named pipelines
Want to transform the same types of files in multiple ways in a single build? Create a named pipeline, and use it as a URL scheme in your code.
For example, you could inline the compiled contents of a bundle as text, a data URL, an ArrayBuffer, or anything else! Or if you're building a documentation site, you could import both the generated API docs and source code for a file. The possibilities are endless.
Learn more →{
"extends": "@parcel/config-default",
"transformers": {
"buffer:*": ["...", "parcel-transformer-buffer"]
}
}
import buffer from 'buffer:./logo.png';
Designed for performance
Parcel's plugin system has been designed from the ground up with performance in mind. Plugins are automatically parallelized across multiple threads, and track files for incremental rebuilds. Any dependencies or configs your plugin uses are automatically tracked and invalidate the build.
Learn more →Diagnostics
All Parcel plugins use a unified diagnostic format that supports highlighted code frames, hints, and documentation links.
Learn more →Powered by open source.
Parcel is an open source project, powered by code and financial contributions from companies and individuals around the world.
💵 Backers
Backers have donated any amount of money to Parcel. Become a backer →
😍 Contributors
Contributors help fix bugs and implement new features in Parcel. Become a contributor →