vitemple / docs
GET STARTED / 7 SMALL STEPS

From zero to
Hello, world.

One parent page. One reusable component. A few minutes to see how Vitemple fits together.

Install → Compose → Build
01

Start with an empty folder

Use Node.js 22.12+ and npm. The compiler runs locally; your visitors only need a browser.

Terminal 
mkdir hello-vitemple
cd hello-vitemple
npm init -y
npm install vitemple
npm install --save-dev vite
02

Add your commands

Set the project to ES modules and replace the scripts section in package.json. Keep the dependencies added by npm.

package.json · fields to add or replace 
"type": "module",
"scripts": {
  "build": "vitemple src/index.html --outdir dist",
  "dev": "node node_modules/vitemple/scripts/dev.mjs",
  "start": "vite preview"
}
03

Write the parent page

Create src/index.html. The slot points to a component relative to this file.

src/index.html 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Vitemple</title>
  </head>
  <body>
    <slot src="./components/hello.html" />
  </body>
</html>
04

Create your first component

Create the components folder inside src, then add hello.html. A component can be just one line.

src/components/hello.html 
<h1>Hello, world!</h1>
EXPECTED RESULT

Hello, world!

Your parent page now contains the imported heading.

05

Open it in your browser

Run the development server and open the URL printed in your terminal, usually http://localhost:5173. Change the heading, save, and watch the browser reload.

Terminal 
npm run dev
06

Make it personal

Replace the slot in your parent page, then update the heading in your component. Attributes become build-time placeholders.

src/index.html · replace the slot 
<slot src="./components/hello.html" name="Developer" />
src/components/hello.html 
<h1>Hello, {name}!</h1>
EXPECTED RESULT

Hello, Developer!

07

Build a page you can ship

Create dist/index.html and preview it. Upload the contents of dist to a static host. No Node.js server is needed in production.

Terminal 
npm run build
npm start
You have a working component.

HTML → slot expansion → static HTML. Next, add styles or connect components with shared state.

Next: Components & slots →