Examples

Project Structure

Typical project layout using vite-plugin-html-elements.

Directory Structure 

project/
├── public/
│   ├── favicon.ico
│   └── logo.webp
├── src/
│   ├── elements/
│   │   ├── head.html
│   │   ├── header.html
│   │   └── footer.html
│   ├── index.html
│   ├── docs.html
│   ├── examples.html
│   └── styles.css
├── package.json
├── pnpm-lock.yaml
└── vite.config.js

Usage in HTML

<!doctype html>
<html>
  <element src="head.html" />
  <body>
    <element src="header.html" />
    <main>Page content</main>
    <element src="footer.html" />
  </body>
</html>

Reusable Components

Create reusable UI components for consistent design.

elements/card.html 

<div class="bg-white dark:bg-secondary-800 rounded-lg p-6 shadow-md">
  <div class="text-primary-400 text-3xl mb-3">{{icon}}</div>
  <h3 class="text-xl font-semibold mb-2">{{title}}</h3>
  <slot />
</div>

Using the component 

<element src="card.html" icon="⚡" title="Fast Builds">
  <p class="text-secondary-600 dark:text-secondary-300">
    Lightning-fast hot reloading during development.
  </p>
</element>

<element src="card.html" icon="🎨" title="Style Freedom">
  <p class="text-secondary-600 dark:text-secondary-300">
    Works with Tailwind, plain CSS, or any framework.
  </p>
</element>

<element src="card.html" icon="📦" title="Zero Config">
  <p class="text-secondary-600 dark:text-secondary-300">
    Works out of the box with sensible defaults.
  </p>
</element>

Build Output

See what happens at build time - element tags are replaced with actual HTML.

Before (Source)

<!doctype html>
<html>
  <body>
    <element src="header.html" />
    <main>Your content</main>
  </body>
</html>

After (Built HTML) 

<!doctype html>
<html>
  <body>
    <header class="bg-primary-600 p-4">
      <nav class="flex justify-between">
        <a href="/">Home</a>
        <a href="/docs">Docs</a>
      </nav>
    </header>
    <main>Your content</main>
  </body>
</html>

No runtime JavaScript required. The final HTML is completely static.

Components with Slots

Pass dynamic content into reusable components using slots and props.

elements/card.html 

<div class="bg-secondary-800 rounded-lg p-6">
  <h3 class="text-xl font-semibold text-white mb-2">{{title}}</h3>
  <slot />
</div>

Using the component 

<element src="card.html" title="Fast Builds">
  <p>Lightning-fast hot reloading during development.</p>
</element>

<element src="card.html" title="Zero Config">
  <p>Works out of the box with sensible defaults.</p>
</element>

Common Use Cases

Landing Pages

Reuse headers, footers, and call-to-action sections across marketing pages.

Documentation Sites

Share navigation, sidebars, and footer content across all doc pages.

Blogs

Maintain consistent layout and structure across all blog posts.

Multi-page Sites

Keep all pages in sync without a JavaScript framework.

More Examples

Check out the Git repository for more examples and real-world use cases.

View on Codeberg →