HTMLStarter

live-reload-vanilla-website-template — HTML Starter Template

By esausilva

A website starter template that does not rely on a front-end framework, using Webpack to support ES6+ transpilation, ES Modules, and Sass, and providing live browser reload during development.

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

3 previews
Desktop homepage1 / 3
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 3

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-02View source

What stands out

A quick read of the recorded project description.

01

Does not introduce a front-end framework; uses native HTML as the page foundation

02

During development, watches ./src and reloads live in the browser

03

Supports ES6+ transpilation and ES Modules syntax

04

Supports Sass compilation, with minification and automatic prefixing in production builds

05

Production build outputs to ./public/assets, and the ./public directory can be deployed directly

Template Details

This template is aimed at developers who want to build websites with native HTML but do not want to give up a modern toolchain. It does not use a front-end framework; instead, it processes source code through Webpack: during development it watches the ./src directory for changes and outputs bundled artifacts to ./public/assets, while the development server watches the ./public directory and reloads live in the browser; for production builds it compiles, minifies, and automatically prefixes Sass, and minifies and obfuscates JavaScript, with artifacts also output to ./public/assets, after which the ./public directory can be deployed directly.

The feature scope is focused on build and development experience: ES6+ transpilation, ES Modules, Sass compilation, and live reload in the development environment. The repository README provides three commands: yarn to install dependencies, yarn dev to start the development server (by default opening http://localhost:8080/public), and yarn build to generate the production bundle, and links to the author's blog for a step-by-step setup tutorial.

Before use, note the following: the template itself does not include a UI component library or page design system, so page structure and styles must be written by the user; the repository does not provide dependency version locking information, so actual tool versions depend on what is installed; the demo screenshots come from the author's blog pages, and third-party assets such as images, fonts, and icons in them must be checked separately under their respective licenses and cannot be judged solely by the code's MIT license.

HTMLLauncher

Is it right for your project?

Use Cases

  • Building static websites or marketing pages with native HTML, CSS, and JavaScript
  • Introducing a Webpack build process and live reload into a framework-free project
  • Small front-end projects that need Sass preprocessing and ES6+ syntax transpilation
  • As a hands-on template for learning a modern front-end toolchain

Suitable For

  • Developers who want to keep a framework-free, pure HTML tech stack
  • Projects that need Sass and ES6+ transpilation but do not need a component framework
  • Learners who want to reference a Webpack configuration and live reload implementation

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Use yarn to install dependencies

  2. 2

    Run yarn dev to start the development server, which by default opens http://localhost:8080/public

  3. 3

    Run yarn build to generate the production bundle, with artifacts located in ./public/assets

  4. 4

    When deploying, use the built ./public directory directly

  5. 5

    Third-party assets such as images, fonts, and icons in the demo pages must be checked under their respective licenses

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version of a public repository under the MIT license; the free scope is the code of that version and does not mean that external services or third-party assets are free.

Must comply with when using

  • The code of this version may be used, modified, used commercially, and distributed free of charge.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the complete MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur separate charges.
View Original Text Basis

Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
Partly documented · 72 / 100
Technologies
HTML
Website type
Starter
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2023-01-31
Screenshot last checked
2026-10-02

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies HTML as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: b9fad866cd5ae0a368257ff8b3f601d6971e6f1d1b462eeb380ca63ce04928ad

2026-10-02T19:51:52.457Z

Source file / repository
# live-reload-vanilla-website-template

Starter template to build a website without a front-end framework but making use of Webpack to support writing modern JavaScript (ES6+), including ES Modules and Sass.

## Features

- Live reload in development
- Webpack
- Sass compilation (and minification/autoprefixing in production)
- ES6+ transpilation (and minification/uglyfication in production)
- ES Modules

## Usage

- Install dependencies

```
yarn
```

- Run development server

```
yarn dev
```

Will open your default browser to http://localhost:8080/public

Webpack will watch for changes in the `./src` directory and output the bundled assets to `./public/assets`. In parallel, the development server will watch for changes in the `./public` directory and live reload the browser.

- Build production bundles

```
yarn build
```

Will compile, minify and autoprefix Sass to CSS. Will Minify and uglify JavaScript and output the bundled assets to `./public/assets`.

After building for production you can take the `./public` directory and deploy it.

## Tutorial

Visit my [blog entry](https://esausilva.com/2018/09/17/build-a-website-with-modern-tooling-and-no-frameworks/) where I go step-by-step on how to build this template from scratch.

## Giving Back

If you would like to support my work and the time I put into making tutorials, consider getting me a coffee by clicking on the image below. I would really appreciate it!

[![Buy Me A Coffee](https://www.buymeacoffee.com/assets/img/custom_images/black_img.png)](https://www.buymeacoffee.com/esausilva)

-Esau Silva
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.