Raw HTML Starter

A modern starter for building websites in plain HTML — no React, no Vue, no heavy JS frameworks.
Enjoy the simplicity of HTML with the power of Vite, SCSS, includes, and modular components.

Ultra-fast development with Vite
Native SCSS and auto-import of components
Reusable HTML component system with variables and slots
Multi-page ready
Hot Module Replacement (HMR)
TypeScript support
Fluid icon management with interactive icon gallery
Live demo

vite-plugin-html-include

vite-plugin-html-include is the secret sauce of this starter.
It lets you use HTML includes, slots, and variables in your pages and components.
It's just awesome for building modular HTML!

See documentation

Font embedding example

The starter includes an example of font embedding with the Sharpie font (see public/fonts/ and src/styles/typography.scss).

SVG icons

All your SVG icons are organized by family in src/icons/.
Use the icon.html component to embed any icon with size and color control.

<include file="@comp/icon.html" $icon="lucide/heart-pulse.svg" $size="48" $color="#ff3399" />

See interactive icon gallery

Project structure

src/
  components/   # Reusable HTML/SCSS components
  layout/       # Layouts and global structure (common.html, nav, footer...)
  styles/       # Global SCSS (auto-imported)
  icons/        # SVG icon sets (by family)
public/
  images/       # Site images
  fonts/        # Fonts (e.g. Sharpie)
vite/
  getHtmlEntryPoints.ts   # HTML entry points for Vite
  viteAutoImportScss.ts   # SCSS auto-import plugin
  iconsGalleryPlugin.ts   # Icon gallery generator plugin
  icons-gallery.css       # Icon gallery styles
dist/           # Build output