DEV Community

Cover image for I Built Chronos: A Live-Customizable HTML/Vite Template System
Abid Al Hossain
Abid Al Hossain

Posted on

I Built Chronos: A Live-Customizable HTML/Vite Template System

I built Chronos, a multi-era HTML/Vite template system for creating polished static websites with live visual customization.

Most HTML templates ship as one fixed visual style. Chronos is different: it includes 20 distinct layouts, 17 visual eras, 16 curated color palettes, 70+ Google Fonts, a live customizer, Surprise Me theme generation, and single-layout ZIP export.

The goal was to make a static template system that feels flexible without requiring WordPress, a backend, jQuery, or Bootstrap.

What Chronos Includes

  • 20 HTML/Vite layouts
  • 17 era-based visual styles
  • 16 curated color palettes
  • 70+ Google Fonts
  • Live visual customizer
  • Surprise Me theme generation
  • Font and HEX color range exclusions
  • Single-layout ZIP export
  • Source files, README, public assets, and preview images

Live Customization

Chronos has a shared customizer that works across the layouts. Buyers can switch visual eras, try different color palettes, change fonts, adjust theme colors, and save their preferences per layout.

The customizer is built for static sites, so it does not require a backend or CMS.

Surprise Me

Surprise Me generates new color and font combinations instead of cycling through a tiny preset list.

The color generation uses structured constraints so the result stays readable and visually coherent. Font randomization uses compatible font groups, so heading, body, accent, and mono fonts are selected as a designed set instead of four unrelated choices.

Users can also exclude exact fonts and HEX color ranges from future randomization.

Single-Layout Export

One of the main features is export.

A buyer can customize a layout, rename the package, and download a ready-to-run single-layout ZIP. The exported package includes the selected layout, runtime files, active era, colors, fonts, and optional customizer support.

This makes Chronos useful both as a full template system and as a generator for smaller static website packages.

Demo

Live demo:
https://code-ster-theme-1-demo.vercel.app/

Gumroad:
https://aabidalhossain.gumroad.com/l/chronos-html-template-system

Lemon Squeezy:
https://theme-studio-007.lemonsqueezy.com/checkout/buy/d6f4693c-feff-4999-b831-a8b182d795b7

Tech Stack

  • HTML
  • CSS
  • JavaScript
  • Vite
  • Alpine.js
  • Google Fonts
  • CSS custom properties

Chronos is made for developers, designers, freelancers, and agencies who want a flexible static website template system that can be customized visually and exported into smaller packages.

If you build static websites or sell templates, I would be interested to hear what feature you would expect in a system like this.

Top comments (0)