Starting from a band
A pricing table is not one thing. It is a table holding a plan for each tier; each plan holds a name, a price, a button and a list of what it includes. Written out as a tree that is 44 nodes, and every one of them is a node on purpose — "move the second plan's button above its perks" is a real change only because the button is a real node.
So the vocabulary is right and writing it out by hand is miserable. That is what a band is for.
A band is a whole section of a page, ready-made: an opening headline, a row of logos, a list of questions, a footer. You do not get a new primitive and you do not get a shortcut past anything. You get all the nodes, built for you, arriving as one change that goes through the same Gate as every other change.
Every one of these goes through the same pipeline a model’s answer would: interpreted, analysed, weighed, judged, applied, appended. The log is real and it is in this tab — reload the page and the example is back as it was.
show the treehide the tree
{
"kind": "element",
"id": "n_bandwhole45",
"type": "loom.page",
"props": {
"fills": true,
"width": "wide",
"loom:theme": {
"palette": "minimal",
"fontPack": "minimal-sans",
"stylePreset": "precise"
}
},
"children": [
{
"kind": "element",
"id": "n_bandwhole44",
"type": "loom.backdrop",
"props": {
"paint": "aurora"
},
"children": [
{
"kind": "element",
"id": "n_bandwhole43",
"type": "loom.section",
"props": {
"eyebrow": "Pricing",
"width": "wide",
"anchor": "pricing"
},
"children": [
{
"kind": "slot",
"id": "n_bandwhole5",
"name": "heading",
"children": [
{
"kind": "element",
"id": "n_bandwhole2",
"type": "loom.heading",
"props": {
"level": 2,
"balance": true
},
"children": [
{
"kind": "text",
"id": "n_bandwhole1",
"value": "Priced per person, and nothing per seat you are not using"
}
]
},
{
"kind": "element",
"id": "n_bandwhole4",
"type": "loom.prose",
"props": {
"tone": "muted",
"measured": true
},
"children": [
{
"kind": "text",
"id": "n_bandwhole3",
"value": "Every plan includes the whole product. What changes is how many of you there are."
}
]
}
]
},
{
"kind": "element",
"id": "n_bandwhole42",
"type": "loom.tier-table",
"props": {
"columns": "three",
"density": "loose"
},
"children": [
{
"kind": "element",
"id": "n_bandwhole16",
"type": "loom.tier",
"props": {
"name": "Starter",
"price": "Free",
"note": "Up to 3 people",
"emphasis": "plain"
},
"children": [
{
"kind": "slot",
"id": "n_bandwhole6",
"name": "badge",
"children": []
},
{
"kind": "element",
"id": "n_bandwhole12",
"type": "loom.perk-list",
"props": {
"columns": "one",
"density": "loose"
},
"children": [
{
"kind": "element",
"id": "n_bandwhole7",
"type": "loom.perk-list-item",
"props": {
"label": "Unlimited boards",
"state": "included"
},
"children": []
},
{
"kind": "element",
"id": "n_bandwhole8",
"type": "loom.perk-list-item",
"props": {
"label": "One connected repository",
"state": "included"
},
"children": []
},
{
"kind": "element",
"id": "n_bandwhole9",
"type": "loom.perk-list-item",
"props": {
"label": "30 days of history",
"state": "included"
},
"children": []
},
{
"kind": "element",
"id": "n_bandwhole10",
"type": "loom.perk-list-item",
"props": {
"label": "Review rules",
"state": "excluded"
},
"children": []
},
{
"kind": "element",
"id": "n_bandwhole11",
"type": "loom.perk-list-item",
"props": {
"label": "Single sign-on",
"state": "excluded"
},
"children": []
}
]
},
{
"kind": "slot",
"id": "n_bandwhole15",
"name": "action",
"children": [
{
"kind": "element",
"id": "n_bandwhole14",
"type": "loom.action",
"props": {
"href": "/start",
"variant": "secondary",
"scale": "medium"
},
"children": [
{
"kind": "text",
"id": "n_bandwhole13",
"value": "Start free"
}
]
}
]
}
]
},
{
"kind": "element",
"id": "n_bandwhole30",
"type": "loom.halo",
"props": {
"light": "ring",
"corners": "lg"
},
"children": [
{
"kind": "element",
"id": "n_bandwhole29",
"type": "loom.tier",
"props": {
"name": "Team",
"price": "$24",
"period": "per person, per month",
"note": "Billed annually",
"emphasis": "featured"
},
"children": [
{
"kind": "slot",
"id": "n_bandwhole19",
"name": "badge",
"children": [
{
"kind": "element",
"id": "n_bandwhole18",
"type": "loom.badge",
"props": {
"tone": "accent"
},
"children": [
{
"kind": "text",
"id": "n_bandwhole17",
"value": "Most popular"
}
]
}
]
},
{
"kind": "element",
"id": "n_bandwhole25",
"type": "loom.perk-list",
"props": {
"columns": "one",
"density": "loose"
},
"children": [
{
"kind": "element",
"id": "n_bandwhole20",
"type": "loom.perk-list-item",
"props": {
"label": "Unlimited boards",
"state": "included"
},
"children": []
},
{
"kind": "element",
"id": "n_bandwhole21",
"type": "loom.perk-list-item",
"props": {
"label": "Unlimited repositories",
"state": "included"
},
"children": []
},
{
"kind": "element",
"id": "n_bandwhole22",
"type": "loom.perk-list-item",
"props": {
"label": "Full history",
"state": "included"
},
"children": []
},
{
"kind": "element",
"id": "n_bandwhole23",
"type": "loom.perk-list-item",
"props": {
"label": "Review rules",
"note": "Up to 20",
"state": "included"
},
"children": []
},
{
"kind": "element",
"id": "n_bandwhole24",
"type": "loom.perk-list-item",
"props": {
"label": "Single sign-on",
"state": "excluded"
},
"children": []
}
]
},
{
"kind": "slot",
"id": "n_bandwhole28",
"name": "action",
"children": [
{
"kind": "element",
"id": "n_bandwhole27",
"type": "loom.action",
"props": {
"href": "/start",
"variant": "primary",
"scale": "medium"
},
"children": [
{
"kind": "text",
"id": "n_bandwhole26",
"value": "Start a trial"
}
]
}
]
}
]
}
]
},
{
"kind": "element",
"id": "n_bandwhole41",
"type": "loom.tier",
"props": {
"name": "Enterprise",
"price": "Let's talk",
"note": "Annual agreement",
"emphasis": "plain"
},
"children": [
{
"kind": "slot",
"id": "n_bandwhole31",
"name": "badge",
"children": []
},
{
"kind": "element",
"id": "n_bandwhole37",
"type": "loom.perk-list",
"props": {
"columns": "one",
"density": "loose"
},
"children": [
{
"kind": "element",
"id": "n_bandwhole32",
"type": "loom.perk-list-item",
"props": {
"label": "Unlimited boards",
"state": "included"
},
"children": []
},
{
"kind": "element",
"id": "n_bandwhole33",
"type": "loom.perk-list-item",
"props": {
"label": "Unlimited repositories",
"state": "included"
},
"children": []
},
{
"kind": "element",
"id": "n_bandwhole34",
"type": "loom.perk-list-item",
"props": {
"label": "Full history",
"note": "With export",
"state": "included"
},
"children": []
},
{
"kind": "element",
"id": "n_bandwhole35",
"type": "loom.perk-list-item",
"props": {
"label": "Review rules",
"note": "Unlimited",
"state": "included"
},
"children": []
},
{
"kind": "element",
"id": "n_bandwhole36",
"type": "loom.perk-list-item",
"props": {
"label": "Single sign-on",
"state": "included"
},
"children": []
}
]
},
{
"kind": "slot",
"id": "n_bandwhole40",
"name": "action",
"children": [
{
"kind": "element",
"id": "n_bandwhole39",
"type": "loom.action",
"props": {
"href": "/contact",
"variant": "secondary",
"scale": "medium"
},
"children": [
{
"kind": "text",
"id": "n_bandwhole38",
"value": "Contact sales"
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}Ask for one by name
The starter library ships 57 bands. Each has an id, and
asking for one gives you a small object describing it — what it is called, what
it promises to put on the page, and a build function that makes the nodes.
import { sequentialIdFactory } from "@jam-overture/loom"
import { compositionById } from "@jam-overture/loom-primitives"
const ids = sequentialIdFactory("page")
const pricing = compositionById("pricing")
if (pricing === undefined) throw new Error("this library has no pricing band")
/* The whole band, with freshly minted ids, and nothing on a page yet. */
const subtree = pricing.build(ids)
build is a plain function from an id factory to a subtree. It touches no
store, renders nothing and registers nothing. Every node it makes is a primitive
you already have — a band cannot smuggle in a type your registry has not
allowed, and the library has a test that says so.
It goes on the page as one insert
A subtree on its own is not a change. Ask where it should go and you get a plan:
import { buildElement, createTree } from "@jam-overture/loom"
import { planComposition } from "@jam-overture/loom-primitives"
const tree = createTree(buildElement(ids, { type: "loom.page" }), ids)
const plan = planComposition(pricing, tree, ids)
/* One `insert`, carrying the whole subtree — not one operation per node. */
const operations = plan.outcome === "planned" ? plan.operations : []
One operation, because an insert carries a subtree rather than a single node. That is the whole of why a band is cheap to review: a person answering it reads a pricing band was added at the end of the page, not one line per node.
Two things the plan does that are worth knowing, because they are the difference between a plan and a recording:
- Where it goes is worked out against the tree you hand it, not against the page the button was drawn on. A band planned against a page that has since grown two more bands goes after them.
- A parent that is no longer in the tree is refused, as
outcome: "no-such-parent". It does not quietly land at the root instead. A band that went somewhere other than where you asked is worse than one that did not go anywhere, because you would not have noticed.
Nothing gets to skip the Gate
The tempting shortcut is to build the subtree and write it to the store. Do not, and the library does not give you a way to: a band is handed over as an ordinary interpreter, the same seam a model plugs into.
import { systemClock } from "@jam-overture/loom"
import { compositionInterpreter } from "@jam-overture/loom-primitives"
const interpreter = compositionInterpreter(pricing, ids, systemClock)
Hand that to the runtime wherever you would hand it
a model. Everything downstream is unable
to tell the difference: the band is assessed, gated, held for a person if your
policy says so, written to the log, and revertable. Its undo is a remove of
one node, which is the cheapest undo in the system.
It reports authoredBy: "runtime" and a confidence of 1, and that is honesty
rather than swagger. A computed subtree has no opinion about itself to be right
or wrong about, so
calibration keeps these out of
a model's record instead of letting a catalogue of bands walk it to a perfect
score nobody earned.
Parts and designs are two different words
There are 57 bands and only 22 places on a page to put one. The difference is the vocabulary worth learning.
A part is a region of a page: the strip above the navigation, the opening,
the price list, the closing pitch. A design is one way of drawing a part.
hero and hero-split are two designs of one part — you would not put both on
a page, because they both want the same space.
| Part | The designs of it |
|---|---|
| banner |
|
| nav |
|
| hero |
|
| proof |
|
| features |
|
| bento |
|
| steps |
|
| code |
|
| integrations |
|
| metrics |
|
| specs |
|
| pricing |
|
| comparison |
|
| testimonials |
|
| credentials |
|
| team |
|
| articles |
|
| changelog |
|
| faq |
|
| contact |
|
| cta |
|
| footer |
|
Ask for the designs of a part rather than trying to remember which ids exist:
import { compositionsForPart } from "@jam-overture/loom-primitives"
/* Canonical design first. A part nobody has drawn yet gives you an empty list. */
const heroes = compositionsForPart("hero")
The test for whether something is a second design or a second part is the space it takes: if the two could stand in for each other, they are designs of one part. If there is somewhere on a page one of them goes and the other does not, it is a part of its own.
And the test for whether a design earns a place at all is the nodes it builds. A centred hero and a left-aligned hero are the same band — the difference is a prop, and setting a prop is already a change anybody can make. A hero with a product shot beside it is a different band, because it has a subtree the other one does not.
Every part, in the order a page uses them
| Part | What lands on the page | Nodes | Designs |
|---|---|---|---|
| banner | A tinted strip above the navigation: one sentence of news and one link to the rest of it. | 7 | 2 |
| nav | A sticky bar across the top: a wordmark, four links into this page, and one action. | 14 | 2 |
| hero | A full-height opening band: eyebrow, headline, a lead sentence and two buttons. | 11 | 3 |
| proof | A quiet row of six customer names under a single line of introduction. | 8 | 3 |
| features | A titled band with a lead sentence over six feature tiles that wrap to the width and arrive row by row as the reader reaches them. | 19 | 5 |
| bento | Four features in cells of unequal width, the first running across the top with a panel beside its words. | 14 | 2 |
| steps | Three numbered steps laid across the page, with a rail running between them. | 10 | 2 |
| code | A band with the integration explained on one side and two panels on the other — the install line as a terminal, and the call as a source listing. | 39 | 3 |
| integrations | Eight tools circling a mark in the middle, with the centre named. | 17 | 2 |
| metrics | A full-width surface carrying four large figures with their labels. | 6 | 4 |
| specs | Four headline figures over a seven-row table of limits, each with the figure and the sentence that qualifies it. | 70 | 2 |
| pricing | Three plans side by side on a band of drifting light, each with its perks and its button, and one of them lit and labelled as the popular one. | 44 | 3 |
| comparison | A five-row comparison table against two alternatives, with the first column steered. | 33 | 2 |
| testimonials | A titled band with three quotes side by side, each with its attribution. | 8 | 3 |
| credentials | Four certifications in a grid, each with its issuer, its year and a line about scope. | 11 | 2 |
| team | Four people in a grid, each with a role and a line about them. | 11 | 2 |
| articles | Four recent posts in a grid, with the newest running across the top. | 9 | 5 |
| changelog | Five recent releases running down a rail, newest first, set tight to scan. | 12 | 2 |
| faq | Five questions at a reading width, with the first one already open. | 10 | 2 |
| contact | A five-question form in two columns, with a submit button and a reply promise beneath it. | 25 | 2 |
| cta | A closing band on the accent ground: a headline, a sentence and two buttons side by side. | 11 | 2 |
| footer | Four columns of links with a wordmark beside them, over a legal line. | 52 | 2 |
The biggest of them is the specs band, at 70 nodes. It is the clearest single answer to why bother: that one band is a page you would otherwise be building a node at a time.
A whole page to start from
The parts are in page order, so one design of each, taken in sequence, is a complete document with nothing missing and nothing repeated.
import { PAGE_SEQUENCE } from "@jam-overture/loom-primitives"
const wholePage = PAGE_SEQUENCE.map((composition) => composition.build(ids))
That list is worked out rather than kept by hand: the canonical design of a part is the one whose id is the part's name, so adding a second hero to the library cannot quietly change what a new page starts as.
Offer the whole catalogue when somebody is picking a band. Offer this when somebody is starting a page.
Everything your team ships, in one place
Plan the work, review the change, and see what shipped — without three tools disagreeing about what happened.
Why teams switch
The parts you were going to build yourself
Six things that are true on the first day, not after a quarter of setup.
One source of truth
Every change lands in one place, with the reason it was made attached to it.
Reversible by default
Anything you can do here you can undo, in one step, without a restore.
Ready in minutes
Connect a repository and the first board builds itself from what is already there.
Reviewed before it lands
Rules you write decide what goes straight through and what waits for a person.
Works with what you have
Read and write through the tools your team already opens every morning.
Answers, not dashboards
Ask what changed this week and get the change, not a chart of it.
Try it on one repository this week
Free for up to three people, with no card and nothing to uninstall if you change your mind.
Every one of these goes through the same pipeline a model’s answer would: interpreted, analysed, weighed, judged, applied, appended. The log is real and it is in this tab — reload the page and the example is back as it was.
show the treehide the tree
{
"kind": "element",
"id": "n_frombands42",
"type": "loom.page",
"props": {
"fills": true,
"loom:theme": {
"palette": "minimal",
"fontPack": "minimal-sans",
"stylePreset": "precise"
}
},
"children": [
{
"kind": "element",
"id": "n_frombands11",
"type": "loom.hero",
"props": {
"backdrop": "aurora",
"stature": "tall",
"align": "center",
"eyebrow": "Now in public beta",
"anchor": "top"
},
"children": [
{
"kind": "slot",
"id": "n_frombands3",
"name": "heading",
"children": [
{
"kind": "element",
"id": "n_frombands2",
"type": "loom.heading",
"props": {
"level": 1,
"align": "center",
"balance": true
},
"children": [
{
"kind": "text",
"id": "n_frombands1",
"value": "Everything your team ships, in one place"
}
]
}
]
},
{
"kind": "element",
"id": "n_frombands5",
"type": "loom.prose",
"props": {
"size": "lead",
"align": "center",
"tone": "muted",
"measured": true
},
"children": [
{
"kind": "text",
"id": "n_frombands4",
"value": "Plan the work, review the change, and see what shipped — without three tools disagreeing about what happened."
}
]
},
{
"kind": "slot",
"id": "n_frombands10",
"name": "actions",
"children": [
{
"kind": "element",
"id": "n_frombands7",
"type": "loom.action",
"props": {
"href": "/start",
"variant": "primary",
"scale": "large"
},
"children": [
{
"kind": "text",
"id": "n_frombands6",
"value": "Start free"
}
]
},
{
"kind": "element",
"id": "n_frombands9",
"type": "loom.action",
"props": {
"href": "/pricing",
"variant": "secondary",
"scale": "large"
},
"children": [
{
"kind": "text",
"id": "n_frombands8",
"value": "See pricing"
}
]
}
]
}
]
},
{
"kind": "element",
"id": "n_frombands30",
"type": "loom.section",
"props": {
"eyebrow": "Why teams switch",
"width": "wide",
"anchor": "features"
},
"children": [
{
"kind": "slot",
"id": "n_frombands16",
"name": "heading",
"children": [
{
"kind": "element",
"id": "n_frombands13",
"type": "loom.heading",
"props": {
"level": 2,
"balance": true
},
"children": [
{
"kind": "text",
"id": "n_frombands12",
"value": "The parts you were going to build yourself"
}
]
},
{
"kind": "element",
"id": "n_frombands15",
"type": "loom.prose",
"props": {
"size": "lead",
"tone": "muted",
"measured": true
},
"children": [
{
"kind": "text",
"id": "n_frombands14",
"value": "Six things that are true on the first day, not after a quarter of setup."
}
]
}
]
},
{
"kind": "element",
"id": "n_frombands29",
"type": "loom.feature-grid",
"props": {
"columns": "three",
"density": "loose"
},
"children": [
{
"kind": "element",
"id": "n_frombands18",
"type": "loom.reveal",
"props": {
"motion": "rise"
},
"children": [
{
"kind": "element",
"id": "n_frombands17",
"type": "loom.feature",
"props": {
"icon": "◆",
"title": "One source of truth",
"body": "Every change lands in one place, with the reason it was made attached to it.",
"surface": "card"
},
"children": []
}
]
},
{
"kind": "element",
"id": "n_frombands20",
"type": "loom.reveal",
"props": {
"motion": "rise"
},
"children": [
{
"kind": "element",
"id": "n_frombands19",
"type": "loom.feature",
"props": {
"icon": "⟲",
"title": "Reversible by default",
"body": "Anything you can do here you can undo, in one step, without a restore.",
"surface": "card"
},
"children": []
}
]
},
{
"kind": "element",
"id": "n_frombands22",
"type": "loom.reveal",
"props": {
"motion": "rise"
},
"children": [
{
"kind": "element",
"id": "n_frombands21",
"type": "loom.feature",
"props": {
"icon": "◷",
"title": "Ready in minutes",
"body": "Connect a repository and the first board builds itself from what is already there.",
"surface": "card"
},
"children": []
}
]
},
{
"kind": "element",
"id": "n_frombands24",
"type": "loom.reveal",
"props": {
"motion": "rise"
},
"children": [
{
"kind": "element",
"id": "n_frombands23",
"type": "loom.feature",
"props": {
"icon": "⛨",
"title": "Reviewed before it lands",
"body": "Rules you write decide what goes straight through and what waits for a person.",
"surface": "card"
},
"children": []
}
]
},
{
"kind": "element",
"id": "n_frombands26",
"type": "loom.reveal",
"props": {
"motion": "rise"
},
"children": [
{
"kind": "element",
"id": "n_frombands25",
"type": "loom.feature",
"props": {
"icon": "◫",
"title": "Works with what you have",
"body": "Read and write through the tools your team already opens every morning.",
"surface": "card"
},
"children": []
}
]
},
{
"kind": "element",
"id": "n_frombands28",
"type": "loom.reveal",
"props": {
"motion": "rise"
},
"children": [
{
"kind": "element",
"id": "n_frombands27",
"type": "loom.feature",
"props": {
"icon": "◎",
"title": "Answers, not dashboards",
"body": "Ask what changed this week and get the change, not a chart of it.",
"surface": "card"
},
"children": []
}
]
}
]
}
]
},
{
"kind": "element",
"id": "n_frombands41",
"type": "loom.section",
"props": {
"tone": "accent",
"width": "readable"
},
"children": [
{
"kind": "slot",
"id": "n_frombands33",
"name": "heading",
"children": [
{
"kind": "element",
"id": "n_frombands32",
"type": "loom.heading",
"props": {
"level": 2,
"align": "center",
"balance": true
},
"children": [
{
"kind": "text",
"id": "n_frombands31",
"value": "Try it on one repository this week"
}
]
}
]
},
{
"kind": "element",
"id": "n_frombands35",
"type": "loom.prose",
"props": {
"size": "lead",
"align": "center",
"tone": "muted",
"measured": true
},
"children": [
{
"kind": "text",
"id": "n_frombands34",
"value": "Free for up to three people, with no card and nothing to uninstall if you change your mind."
}
]
},
{
"kind": "element",
"id": "n_frombands40",
"type": "loom.stack",
"props": {
"direction": "row",
"gap": "snug",
"justify": "center",
"align": "center"
},
"children": [
{
"kind": "element",
"id": "n_frombands37",
"type": "loom.action",
"props": {
"href": "/start",
"variant": "primary",
"scale": "large"
},
"children": [
{
"kind": "text",
"id": "n_frombands36",
"value": "Start free"
}
]
},
{
"kind": "element",
"id": "n_frombands39",
"type": "loom.action",
"props": {
"href": "/contact",
"variant": "secondary",
"scale": "large"
},
"children": [
{
"kind": "text",
"id": "n_frombands38",
"value": "Talk to us"
}
]
}
]
}
]
}
]
}What is left behind is ordinary nodes
This is the part that matters most and is easiest to miss.
Nothing in the tree records that a band put those nodes there. There is no
loom.pricing-band node, no marker, no group. What landed is ordinary nodes,
indistinguishable from the same nodes written one at a time — so every one of
them can be moved, reworded, removed or replaced afterwards, by you or by a
proposal, with no band having an opinion about it.
A band is a starting point, not a component. It is in the tree for exactly as long as it takes to build, and then it is gone and the nodes are yours.
Registering only what the bands need
Your deployment does not have to register the whole library (it is a set to choose from), and if you want the bands you need to know which primitives they reach for. The library says:
import { createPrimitiveRegistry, selectPrimitives } from "@jam-overture/loom/sdk"
import { CATALOGUE_TYPES, STARTER_PRIMITIVES } from "@jam-overture/loom-primitives"
const chosen = selectPrimitives(STARTER_PRIMITIVES, CATALOGUE_TYPES)
const registry = chosen.ok ? createPrimitiveRegistry(chosen.value) : chosen
CATALOGUE_TYPES is 95 of the library's
106 primitives: the smallest registry that can build
every band. It cannot refuse, because the library tests that every type in it is
registered.
The gap is the honest half. 106 minus 95 primitives are registered and no band uses them — usually because a primitive exists before a band that wants it. They are still there for you and for a model to reach; they are just not reachable by dropping in a band.
Where the names live
Everything on this page is on the library's own door:
import { CATALOGUE_TYPES, compositionById, compositionsForPart, PAGE_SEQUENCE } from "@jam-overture/loom-primitives"
The 57 bands also each have a name of their own —
heroBand, pricingBand, footerBand — behind a second door,
@jam-overture/loom-primitives/compositions. Reach for that one when you want a
particular band as a value rather than as the answer to a lookup. Everything
else is the same object.