Coupled

Put HTML, CSS, and JS in the same file and don't feel bad about it.

Getting started

index.t.html + index.c.html

---
title: Home
TYPE: page
MOUNT: content
TEMPLATE: index.t.html
---
<style mount="head" serve="inline">
  .component { 
    background: #222; 
    color: #d1d1d1; 
    padding: 20px; 
  }
</style>

<div class="component">
  <h1>Hello World</h1>
</div>

<script mount="body"
       serve="file"
       bundle="main"
       destination="static/js"
       type="module"
       preload
       preload_mount="head">
  console.log('index scripts loaded');
</script>

index.html (Output)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Home</title>
  <link rel="modulepreload" href="static/js/main.js">
  <style>.component{...}</style>
</head>
<body>
  <div class="component">
    <h1>Hello World</h1>
    </div>
    <script src= "static/js/main.js" type="module"></script>
</body>
</html>

Single-file components

HTML, CSS, and JS in one file. Control the delivery of styles and scripts from a single source.

Mount-based slots

Named mounts: styles in head, scripts in body, compose reusable components. Drop {{MOUNT.nav}} in a template and every page that uses that template gets it. Use multiple templates and set each page's TEMPLATE: in frontmatter.

Smart bundling

Inline or bundle to files. bundle="name" for either; dedupe, optional preload. Split critical vs non-critical without a plugin.

Performance first

Hydrate on idle, load, or visible. Preload modules. Pure static output. No runtime framework—just HTML, CSS, and a bit of JS when you want it.

Zero dependencies

One small Node script. No npm install for the build itself. Clone, run npm run build, ship.

Template logic

Conditionals, loops, variables. Pass data into components with {{MOUNT.hero:title}} and use @@title inside.

Install and run

From this repo: npm run build then npm run serve.

In your own project:

npm install github:dmac780/coupled
npx coupled build
npx coupled serve

Add "build": "coupled build" and "serve": "coupled serve" to scripts for npm run build / npm run serve. Default port 8080.