Start a sheet

<link rel="stylesheet" href="https://tacksheet.com/kit/1.8.0/tacksheet.css">
<script src="https://tacksheet.com/kit/1.8.0/tacksheet.js" defer></script>
<body data-tk-theme="riso">
<tk-page>
  <tk-hero><tk-tape-title tape="kraft"><h1>Q3 ridership</h1></tk-tape-title></tk-hero>
  <tk-chart type="bar" data="#trips" title="Trips per month"></tk-chart>
</tk-page>
<script type="application/json" id="trips">
{"labels":["Jul","Aug","Sep"],"datasets":[{"label":"Trips","data":[61.8,63.9,58.6]}]}
</script>
</body>

Themes

Riso is the default: a body without data-tk-theme prints in two inks on riso stock. riso-night is the same printing on deep navy stock, and auto moves between the two with the reader’s system. In both riso themes the page column sits on a translucent reading panel, so type stays crisp over the texture (--tk-panel:transparent turns it off). The other looks stay for sheets that need them. Each has its own type, rules and colour-blind-safe chart palette. Pick one to restyle this whole page, charts and 3D included. Override any token (--tk-accent, --tk-font-head, --tk-radius, --tk-texture…) to make a sheet your own. Bare (none) keeps structure and behaviour only: it is the look of the bare kit below.

The bare kit

For a one-off look, link tacksheet-base.css instead of tacksheet.css. It keeps every behaviour and all the structure (fonts, layout, navigation, media, charts, controls, replies, 3D, the flair pieces, print, reduced motion and forced colours) and none of the look: no theme token blocks and no theme flourishes. Every body gets the neutral tokens of the none theme, the Bare card above, whatever its data-tk-theme says, so write data-tk-theme="none". A page that links the bare stylesheet and sets no theme resolves to none as well.

<link rel="stylesheet" href="https://tacksheet.com/kit/1.8.0/tacksheet-base.css">
<script src="https://tacksheet.com/kit/1.8.0/tacksheet.js" defer></script>
<style>
body{--tk-bg:#fbfaf7;--tk-fg:#1b1b1b;--tk-muted:#55534e;--tk-accent:#0b6e4f;--tk-accent-2:#d9480f;
  --tk-font-head:"Archivo Black","Archivo",sans-serif;--tk-font-body:"Archivo",sans-serif;
  --tk-radius:10px;--tk-shadow:0 1px 2px rgba(0,0,0,.08)}
tk-hero h1{text-transform:uppercase}
</style>
<body data-tk-theme="none">

Restyle by setting the tokens below on body: components read them, so charts, controls and 3D follow, then add your own CSS. The kit faces (Newsreader, Archivo, Archivo Black, IBM Plex Mono and Kalam) are declared, so a style can name them. tacksheet.py sheet new --bare starts a sheet this way.

Token contract

Every custom property a style or a sheet may set; the manifest lists the same tokens. Theme tokens weigh nothing, so a plain body{…} rule wins over them. The panel tokens and the riso heading inks act only in the riso themes of the full kit.

Styles

A style is a look saved on tacksheet.com: a base (one of the built-in keys riso, riso-night, auto, paper, ink, slate or none), tokens, its own CSS and notes for agents, in numbered versions that never change. Tacksheet serves each version as https://tacksheet.com/styles/<style id>/<version>/style.css. Link it right after the kit stylesheet, keep its base on data-tk-theme and name it with data-tk-style:

<link rel="stylesheet" href="https://tacksheet.com/kit/1.8.0/tacksheet.css">
<link rel="stylesheet" href="https://tacksheet.com/styles/9mK2…/3/style.css">
<script src="https://tacksheet.com/kit/1.8.0/tacksheet.js" defer></script>
<body data-tk-theme="riso" data-tk-style="9mK2…/3">

A style sets tokens on body{} and adds CSS; it never carries script. The kit ignores data-tk-style; Tacksheet reads it, with the links, to tell which style a sheet wears. A built-in theme needs no link and is named by its key (data-tk-style="riso"); a built-in kit style links its own kit stylesheet (below). The sheet's own <style> blocks still apply and win where they are more specific. Style links need kit 1.1.1 or later, where body tokens beat theme tokens; a style on base none uses the bare kit, new in 1.2.0.

Built-in styles

From 1.6.0 the kit also serves whole looks as built-in styles, each with its own type and fonts. Link one right after the kit stylesheet, keep its base theme on data-tk-theme and name it with data-tk-style. Its knobs are attributes and custom properties it reads: set them on the elements named, or leave them out for the defaults. Tacksheet's Style button, tackit.py style head KEY and sheet new --style KEY write these lines for you.

<link rel="stylesheet" href="https://tacksheet.com/kit/1.8.0/tacksheet-base.css">
<link rel="stylesheet" href="https://tacksheet.com/kit/1.8.0/styles/keynote.css">
<script src="https://tacksheet.com/kit/1.8.0/tacksheet.js" defer></script>
<body data-tk-theme="none" data-tk-style="keynote">

The fonts are open-licensed and served with the kit; fonts/LICENSES-styles.txt lists them with their licences.

Catalogue

Examples

Eleven finished sheets ship with the kit's source in examples/sheets/, and between them they use every element. Each is a pattern worth copying whole. tacksheet.py sheet new --template NAME OUT.html copies one, pinned to this kit, with the files it uses.

Layout

The bones of a sheet. Every snippet below is the live example’s own source; copy it as is.

Tacksheet.on('change', ({ name, value }) => {
  console.log(name, value); // every state change
});

Navigation

Ways through a long sheet.

<tk-toc collapsible title="On this page"></tk-toc>

Images

Same-review files load as src="./files/name.jpg" through the shell; these demos inline small drawings instead.

tk-gallery

Image sets in a grid, masonry columns or a carousel. Click any image for the viewer (keyboard, swipe, zoom).

layout: grid | masonry | carousel

tk-zoom

Pan and zoom a large image. Zoom with the buttons, a pinch or Ctrl and the wheel (around the pointer); then press and drag to pan. A plain wheel scrolls the page; on the focused image the arrow keys pan and + and − zoom.

tk-annotatetk-image

Numbered notes pinned to an image, and a captioned image with a credit.

tk-annotate: data · tk-image: caption, credit

tk-gallery

Masonry keeps each image’s own shape.

layout="masonry"

Reading on a phone

Kit 1.5 is the reader release. Every content image opens a full-screen viewer, times read in the reader’s own locale and time zone, and nothing in the kit stops a reader zooming the page.

The image viewer

Tap or click any image with alt text (or any image in tk-image, tk-figure, a figure, tk-taped, tk-duotone, tk-gallery or tk-lightbox). Previous and next go through every viewable image on the page; the counter says where you are; the caption comes from the figcaption or the alt text. Swipe sideways to turn, swipe down or press Escape to close, pinch or double-tap to zoom. Images in links and buttons, decorative images (alt=""), icons and anything marked data-tk-no-viewer stay put.

img: data-tk-no-viewer (also on any ancestor)

Video, audio, slides, scrolly

Time-based media and scroll-driven stories.

Charts

One element, <tk-chart type data x y series>, and forty-nine types on a single mark system: thin lines with ringed markers, bars with a rounded data end, hairline grids, labels in text colours and a legend only for two or more series. Every chart carries a data table behind “View data”. The options attribute deep-merges raw ECharts JSON for anything else.

Dynamics

State is a set of named values. Controls write it; charts, text, tables and tk-show read it through a small expression language with no eval.

Reader replies

Every widget talks to the shell over the tacksheet-sheet-v1 bridge. Opened anywhere else they render disabled with “Open this sheet in Tacksheet to reply”, which is what you see here.

From 1.6 a reader’s unsent answers are kept in their own browser while they type: a reload or a restart brings them back with “Restored your unsent answers · Start over”, and they are dropped once the reply is sent. The sheet never stores them itself; Tacksheet’s page around it keeps them on that device only and never sends them anywhere. Give a widget an id so its answers stay with it when you move it on the page.

<tk-section id="plan">
  <h2>The plan</h2>
  <p>…</p>
  <tk-question form="review" name="clear" type="scale" required question="How clear is the plan?"></tk-question>
</tk-section>
<tk-section id="examples">
  <h2>Examples</h2>
  <tk-vote form="review" name="next" question="Which example should grow next?" options="#next-options"></tk-vote>
</tk-section>
<tk-feedback form="review" name="else" title="Anything else?"></tk-feedback>
<tk-form id="review" title="Send your review" submit-label="Send review"></tk-form>

Canvases, prototypes and strips

From 1.8 a sheet can hold content that is wider than the page, on purpose and in its own box: the page itself still never scrolls sideways. Use a prototype canvas for a click-through flow (an app or a website someone should try), a board for things to arrange (a flow map, a sticky-note review, options side by side), and a strip for content that is a row by nature (columns of a board, a timeline, before and after). Everything else stays a normal top-to-bottom sheet.

3D

Models load from the pinned sample (src="sample.glb"), a same-review ./files/ name through the bridge, or inline base64 with glb="…" (or glb="#id" to embed once and reuse). Lighting, sky, fog, floor and terrain colours come from the theme.

Riso flair

Paper, tape and ink pieces that make a sheet look printed and pinned rather than generated. They work on every theme and look most at home on riso and riso-night. Each is one element with a few attributes, no network and no images of its own beyond the kit's textures.

Compose like a pinned, printed sheet

• Print in one or two inks and keep them: cobalt for type, vermilion for marks, plum where they overprint. Sunflower and cornflower are the night stock's inks.
• Tape the title and the images. Leave charts, tables and cards flat on the stock; one taped thing per screen is plenty.
• Stamp a state once, next to what it describes. Put a slip beside the paragraph it answers, not in a sidebar.
• Highlight a phrase, not a paragraph. Use a torn strip to change subject, not between every section.
• Avoid generic gradients, glass, glows and rows of identical rounded cards. Texture is the point, and legibility comes first: the kit checks tape-title contrast for you, and every other piece keeps the page's text colours.

tk-taped

Tapes its content to the sheet. An image becomes a print with a cream border (it stays cream on night stock); anything else is taped as it is with frame="none". A caption is handwritten on the print.

tape · pattern · at: top | corners | diagonal · tilt · frame: print | none · caption

tk-duotone

Prints an image in two inks on cream paper: the first carries the shadows, the second lands a little off register over the midtones and overprints where they meet. halftone screens the second ink into dots. Give the image its alt text as usual.

inks: two of cobalt, vermilion, plum, sunflower, cornflower, black · offset (px) · halftone · caption · credit

Your own code

Agents may add their own CSS, scripts and custom elements alongside the kit. Build DOM with createElement and textContent, read the tokens in CSS, and use the API below. See examples/sheets/custom-component.html for a full component.

• Tacksheet.state.get(name) / set(name, v) / all()Read and write named state; every bound element updates.
• Tacksheet.on('change', fn)Called with {name, value, values} after every state change. Also 'theme'.
• Tacksheet.chart(node)Re-render one tk-chart after you change its data block.
• Tacksheet.theme()The resolved theme: palette, colours, faces and 3D tokens.
• Tacksheet.file(name)A Promise of a same-review file as a Blob, through the bridge.
• Tacksheet.expr(text)The safe expression evaluator used by filters and templates.
• Tacksheet.define(name, class)Register a custom element once, after the kit is ready.
• Tacksheet.readyA Promise that resolves when the document is parsed.

Signatures

Bridge protocol

Sheets run in an opaque-origin sandbox, so messages arrive with origin "null": the shell checks event.source, and so does the sheet. Every message carries both kind and type. The kit always sends resize so the shell can size the frame.

Sheets cannot fetch (connect-src 'none'), so same-review files (./files/…) arrive through file.fetch: the kit asks by bare name, the shell transfers the ArrayBuffer, and the kit turns it into a blob: URL for media or parses it for tk-model.

Manifest and agent prompt

manifest.json lists every element, attribute, chart type and data shape, theme, file hash and bridge message. The recommended agent prompt:

Build a Tacksheet sheet: one HTML file with
<link rel="stylesheet" href="https://tacksheet.com/kit/1.8.0/tacksheet.css"> and
<script src="https://tacksheet.com/kit/1.8.0/tacksheet.js" defer></script>,
body data-tk-theme="riso" (riso-night for dark stock, auto to follow the
reader; paper, ink and slate also work). For a one-off look, link
tacksheet-base.css instead, set body data-tk-theme="none" and the kit tokens
on body (`tacksheet.py sheet new --bare` starts one). For a saved style,
link its style.css after the kit stylesheet and name it with data-tk-style.
Use tk-* elements (see the
manifest for names and attributes), inline data as
application/json scripts, and validate with `tacksheet.py sheet validate`
before publishing. Long-form rows need series="..." (see long-data.html).
Put sparklines inside tk-stat. Load sibling files as src="./files/<name>"
(the file.fetch bridge); models under ~1 MB can ride inline as glb="..."
or glb="#id". Drive scrolly with <tk-scrolly for="<chart-id>"> plus one
JSON {"filter": "..."} per step, cumulative (n <= 3, n <= 6, ...). Custom
components go through Tacksheet.define (see custom-component.html).
Compose like a pinned, printed sheet: one or two inks, a tk-tape-title for
the title, tk-taped for images, a tk-stamp for a state, a tk-slip for an
aside; no generic gradients or rows of identical cards.