Parcel HTML, CSS, and JavaScript Starter Template

Features

HTML5 partials with posthtml‑include

Split your HTML pages into smaller, more manageable files with PostHTML's Include plugin for Parcel.

Usage


<!-- index.html -->
<html>
  <head>
      <title>index.html</title>
  </head>
  <body>
      <include src="partials/header.html" locals='{
        "title": "Hello World"
      }'></include>
  </body>
</html>


<!-- partials/header.html -->
<header>
  <h1>{{ title }}</h1>
</header>

Modern ES6 JavaScript

Use modern JavaScript syntax and features like ES6 imports without the need for additional configuration.

Usage


// index.js
import helloWorld from "./scripts/helloWorld";

helloWorld();


// scripts/helloWorld.js

const helloWorld = () => {
  console.log("Hello world 👋");
};

export default helloWorld;

CSS

A plain ol' vanilla CSS stylesheet to get you started. Check out my Parcel HTML, SASS, and JavaScript starter template if you are interested in using the CSS pre-processor SASS. Or, have a look at the Parcel docs if you're interested in adding on another pre- or post-processor such as PostCSS, LESS, or Stylus.

What is Parcel? 📦

Parcel is a web application bundler with a low-configuration approach. With fast bundle times, hot module replacement and automatic code transforms, Parcel handles everything out-of-the-box so developers can focus on their application code.

For more reading check out the offical Parcel website, or my blog post which walks through building a landing page with Parcel.