I wanted to build static websites with reusable HTML, so I made Vitemple

I kept looking for a simple way to build small websites with reusable components. Wanted to write regular HTML and have it turn into regular static pages. But the tools I found often felt like more than I needed, while writing every page by hand meant repeating the same header, footer, and other pieces. Or have unnecessarily-huge additional code embedded into the result, etc.

After a while, I stopped searching and built the tool I wanted. It’s called Vitemple.
You write HTML pages and reuse components with <slot> (and even pass any parameters there):

<main>
  <slot src="./components/hero.html" id="super" name="Buddy" age="67" />
</main>

Vitemple is based on Vite (obviously), brings the feeling of the templating while builds the pages into static files you can host like any other website. You can add JavaScript/TypeScript for interactions, there’s a shared reactive store when you need state across components or pages. The browser still uses its native DOM. And there’s no huge libraries like React or virtual DOM added. In most cases, the resulting static website weighs less than the source HTML code written for it.

One more thing that surprised me is how well AI works with it. All the popular models have been picked up Vitemple’s approach quickly and now they builds complete websites with it from a single description. I can focus on the idea and design, then refine what it creates.

You can get started with:

npm install vitemple

• npm package: https://www.npmjs.com/package/vitemple
• Documentation: https://d-velopment.github.io/vitemple/
• Examples: https://github.com/d-velopment/vitemple-example
• GitHub repository: https://github.com/d-velopment/vitemple

So Vitemple built to fit the way I wanted to make websites, would love to hear what you think and what you'd think it could make in your hands.