One small build layer. A lot of possible stacks.

01 · Plain web

HTML + CSS + JavaScript

Use Nift for templates, partials and tracked pages while keeping the frontend completely framework-free.

<link rel="stylesheet" href="@pathto('public/assets/site.css')">
<main>@content</main>
<script src="@pathto('public/assets/app.js')"></script>

Nift → HTML
CSS  ─┐
JS   ─┴→ public/ → CDN / web server

02 · TypeScript

Nift + TypeScript + npm/Bun

Let TypeScript compile browser code and let Nift assemble the documents that load it.

{
  "scripts": {
    "build:js": "tsc",
    "build:site": "nift build",
    "build": "npm run build:js && npm run build:site"
  }
}

<script type="module" src="@pathto('public/assets/app.js')"></script>

03 · Vite

Nift + Vite

Vite can own the frontend asset graph while Nift owns the page/content graph.

content/       Nift pages
templates/     Nift layouts + partials
frontend/src/  TS/JS/components
public/assets/ Vite build output

npm --prefix frontend run build
nift build

04 · Styling

Nift + Tailwind

Tailwind scans the files you author and writes CSS. Nift simply references the result.

npx @tailwindcss/cli \
  -i ./assets/input.css \
  -o ./public/assets/site.css
nift build

<link rel="stylesheet" href="@pathto('public/assets/site.css')">

05 · React

Nift shell + React island

Keep most of the page as generated HTML and mount React where state-heavy interaction earns the extra machinery.

<article>
  @content
  <div id="configurator"></div>
</article>
<script type="module"
  src="@pathto('public/assets/configurator.js')"></script>

06 · Vue / Svelte

Same island pattern, different framework

Nift does not need to know which component compiler produced the JavaScript.

Vue/Svelte source
       ↓
 Vite / bundler
       ↓
public/assets/widget.js
       ↑
  Nift page shell

07 · Go

Nift frontend + Go API

Generate the frontend with Nift, serve it from Go or a CDN, and call the API normally.

Nift → public/
          ↑
       browser
          ↕
        Go API
          ↕
      PostgreSQL

const r = await fetch('/api/status');
const status = await r.json();

08 · Node

Nift + Express

Express can serve Nift's output and provide application routes beside it.

import express from 'express';
const app = express();

app.use(express.static('public'));
app.get('/api/health', (_, res) => res.json({ ok: true }));
app.listen(3000);

09 · Bun

Nift + Bun + TypeScript

Bun can manage packages, bundle browser code or run your server while Nift remains the document build layer.

bun run build:frontend
nift build-all
bun run server

10 · Python

Nift + FastAPI / Flask / Django

Python owns application runtime concerns; Nift can own the static/generated frontend.

Nift:   pages + templates + frontend shell
Python: APIs + auth + business logic + database
HTTP:   the boundary between them

11 · Realtime

Nift + WebSockets

A generated shell is perfectly compatible with a live application once browser JavaScript connects to a realtime backend.

const socket = new WebSocket('wss://example.com/ws');
socket.addEventListener('message', ({ data }) => {
  updateDashboard(JSON.parse(data));
});

12 · Production pipeline

Bundlers + minifiers + image tools

Put Nift wherever it belongs in a larger build pipeline rather than teaching Nift to reproduce every specialist tool.

npm run build:frontend
npm run optimize:images
nift build-all
npm run minify:html

13 · Existing site

Add Nift without rewriting

Take repeated structure out of a site you already have.

Before                After
------                -----
index.html            content/index.html
about.html      →     content/about.html
contact.html          content/contact.html
repeated header       templates/header.html
repeated footer       templates/footer.html

14 · Documentation

Large shared navigation

Templates and nested partials make shared technical navigation reusable while incremental builds avoid rebuilding unrelated pages.

<div class="docs-layout">
  @input('templates/docs/sidebar.html')
  <main>@content</main>
</div>

15 · AI-assisted

Barebones Nift + coding assistant

Give the assistant a small ai-context.txt, then spend the prompt describing the site you want rather than explaining a large framework.

Read ai-context.txt and inspect this Nift project.

Build a polished documentation site. Reuse templates and
partials, use @pathto for local project links/assets, and keep
the existing Nift architecture.

16 · CI

Nift in an ordinary deployment pipeline

The final output is just files, so deployment can remain boring.

npm ci
npm run build
nift build-all
# deploy public/ using your hosting platform