Documentation

Overview and getting started. Use the sidebar to jump to File types, Concepts, Templates, Patterns, and Build.

⚠️

Coupled is still in development. Documentation is in progress.

Getting started

You put HTML, CSS, and JS in one file. The build moves them to the right places: styles and scripts where you want them, markup in the right slots. Pages and reusable bits live in .c.html files; layouts live in .t.html templates. Each page chooses a template via TEMPLATE: in frontmatter (e.g. docs pages use a docs template, others use a main template). Components can be shared and mounted from any template or from any page.

Include a component (template or page)

{{MOUNT.nav}}
{{MOUNT.hero:heroTitle}}

Example directory

node_modules/
dist/
|_index.html
src/
|_ index.c.html
|_ index.t.html

index.t.html — Template

The template is not emitted as its own page; each page is run through it and slots are filled.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>
    {{MOUNT.head}}
</head>
<body>
    {{MOUNT.content}}

    {{MOUNT.body}}
</body>
</html>

index.c.html — Coupled file

One file: frontmatter, styles, HTML, scripts. The build moves the style into {{MOUNT.head}}, the script to a file under static/js/ with a preload in head, and the script tag in body.

---
title: Home
TYPE: page
MOUNT: content
TEMPLATE: index.t.html
---
<style mount="head" serve="inline">
  .component { 
    background-color: #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 — 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{background-color:#222;color:#d1d1d1;padding:20px;}</style>
</head>
<body>
    <div class="component"><h1>Hello World</h1></div>
    <script src="static/js/main.js" type="module"></script>
</body>
</html>

Duplicates from multiple components or pages are removed during the build.

Install and run

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

In your project: add the package, then from project root run the CLI.

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

Or add "build": "coupled build" and "serve": "coupled serve" to scripts. See Build & run for full details.