Does not introduce a front-end framework; uses native HTML as the page foundation
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.
Actual screenshot captured by the server browser.
All pages & views 3
Screenshots show visual appearance; interactive behavior may differ.
What stands out
A quick read of the recorded project description.
During development, watches ./src and reloads live in the browser
Supports ES6+ transpilation and ES Modules syntax
Supports Sass compilation, with minification and automatic prefixing in production builds
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.
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
Use yarn to install dependencies
- 2
Run yarn dev to start the development server, which by default opens http://localhost:8080/public
- 3
Run yarn build to generate the production bundle, with artifacts located in ./public/assets
- 4
When deploying, use the built ./public directory directly
- 5
Third-party assets such as images, fonts, and icons in the demo pages must be checked under their respective licenses
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis 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! [](https://www.buymeacoffee.com/esausilva) -Esau Silva
Explore similar templates
Compare previews and descriptions within the same stack and category.

startbootstrap-simple-sidebar
A Bootstrap off-canvas sidebar navigation HTML starter template from Start Bootstrap. It provides directly editable HTML and CSS in the dist directory, while the source uses Pug, SCSS, and JavaScript with npm build scripts for live preview and compilation.
HTML · Starter

adminkit
AdminKit is a free, MIT-licensed HTML admin and dashboard template built on Bootstrap 5. The free version includes 15 demo pages, 1 plugin, and 1 color scheme, with hundreds of UI components, forms, tables, charts, and icons.
HTML · Admin dashboard

Landing-Page
A general-purpose landing page HTML template maintained by Tailwind Toolbox, written in pure HTML and loading the complete Tailwind CSS via CDN.
HTML · Corporate Website

light-bootstrap-dashboard
Light Bootstrap Dashboard is a free, MIT-licensed admin dashboard template from Creative Tim, built on Bootstrap with a responsive static HTML structure.
HTML · Admin dashboard

sing-app
Sing App Lite is a free, open-source admin dashboard template from Flatlogic, built with Bootstrap 4.5 and SCSS. It provides a responsive layout, dashboard examples, typography, tables, notifications, basic charts, icons, maps, and a hover sidebar, along with styled Bootstrap components.
HTML · Admin dashboard

startbootstrap-modern-business
Modern Business is a multipurpose Bootstrap full-site HTML template from Start Bootstrap with 17 standalone pages covering home, about, services, portfolio, pricing, blog, FAQ, and contact.
HTML · Starter
