Build one by one.
Zap to bundle.

01 / INSTALL

Install Zap

npm i zap-processor

Zap is a build tool for your website. Install it in the project that you build and deploy.

02 / STRUCTURE

Keep your source organized

project/
├── src/
│   ├── index.html
│   ├── repo.html
│   ├── components/
│   │   ├── header.html
│   │   └── footer.html
│   ├── style.css
│   └── script.js
└── package.json

Zap reads src/ and writes the deployable site to dist/. Static assets are copied as-is. HTML files are processed for Zap imports.

03 / COMPONENTS

Consume a component

<zap src="components/header.html"></zap>

<main>
  <h1>Hello</h1>
</main>

<zap src="components/footer.html"></zap>

Paths are resolved relative to the HTML file containing the tag. This lets nested HTML files reference components relative to their own location.

04 / DATA

Reuse one component with different values

<zap src="components/card.html"
     data-title="API"
     data-icon="bolt"></zap>

<article class="card">
  <span>{{icon}}</span>
  <h2>{{title}}</h2>
</article>

Zap substitutes {{key}} using the corresponding data-key attribute. The same component can be consumed repeatedly with different values.

05 / BUILD

Build your site

npx zap build

The generated dist/ directory is the deployable output. Deploy dist/, not src/.

06 / WHAT HAPPENS

Before → after

<header>
  ...
</header>

<zap src="components/footer.html"></zap>

<header>
  ...
</header>

<footer>
  ...
</footer>

The browser does not need to understand <zap>. It receives the final HTML directly. There is no component-fetching request and no runtime component parser.

07 / COMPONENT LIFECYCLE

Only consumed components disappear

A file becomes a consumed component when another HTML file references it through <zap src="...">. Its contents are embedded into the consumer, so that source component is omitted from dist/.

Unused HTML files and ordinary assets remain. CSS, JavaScript, images, fonts, manifests, JSON, PDFs and other files are copied without unnecessary transformation.

08 / ROUTING

HTML routes

Normal HTML files derive routes from their filenames:

src/index.html       → /
src/terms.html       → /terms
src/docs/index.html  → /docs

Zap also supports explicit route directives.

<zap route="allow"></zap>
<zap route="any name"></zap>

Routing remains a hosting/deployment concern as well, so configure your host's fallback or redirect behavior as required.

09 / WHY ZAP

Runtime imports are convenient. Build-time imports are faster.

• Easy file management
• Reusable components
• Supports nested layers
• Faster sites with dynamic route loading

Build time may increase slightly because Zap performs assembly before deployment. That cost happens once per build instead of being paid repeatedly by visitors paid.

10 / COMMANDS

# Install
npm i zap-processor

# Imports 
<zap src="relative or absolute path to file"></zap>

# File name based Routing
<zap route="allow"></zap>

# Explicit Routing via component (in legal.html for example)
<zap route="others/legal"></zap>

# Build
npx zap build