How it works

Most website templates mix the content into the HTML, so changing a phone number means digging through markup. A jsonsite template keeps the content in data/data.json and the HTML only describes where each piece goes.

Template structure

my-template/
├── template.json     required · manifest
├── index.html        required · markup with data-bind attributes
├── css/              required · stylesheets
├── js/               required · must include jsonsite.js
│   └── jsonsite.js
├── data/
│   └── data.json     required · all the content
└── assets/           optional · images, fonts, icons

template.json

{
  "name": "My Template",            // required
  "description": "One sentence.",    // required
  "license": "MIT",                  // required
  "version": "1.0.0",
  "author": "Your Name",
  "tags": ["portfolio", "minimal"],
  "preview": "assets/preview.png"    // optional gallery thumbnail
}

Binding attributes

Attribute	What it does
`data-bind="hero.title"`	Sets the element's text.
`data-bind-attr="href:cta.url; alt:img.alt"`	Sets one or more attributes.
`data-bind-html="about.body"`	Sets inner HTML (for trusted, formatted text).
`data-if="hero.badge"`	Hides the element when the value is empty or false.
`<template data-repeat="items">`	Repeats its contents for each item in an array. Paths inside are relative to the item, `.` is the item itself, `$root.x` reaches the top level.

Load the binder at the end of <head>:

<script src="js/jsonsite.js" data-src="data/data.json" defer></script>

For more pages, add another HTML file and point its data-src at another JSON file (for example data/about.json).

Previewing locally

Browsers block fetch() from file://, so run a tiny local server from the template folder: npx serve or python3 -m http.server.

Publishing: bake for SEO

The jsonsite build command writes the JSON content into the HTML and removes the binder. The output is plain static HTML: search engines see all the content, it works without JavaScript, and it opens straight from disk.

jsonsite validate ./my-template    # the same checks the upload runs
jsonsite build ./my-template       # → my-template/dist
jsonsite pack ./my-template        # → my-template.zip, ready to upload

What the upload check looks at

Uploads are checked automatically, then reviewed by a person. Errors block the upload. Warnings go to the reviewer, and your template can still be accepted.

Errors (must fix)	Warnings (reviewer decides)
Missing required files or folders Invalid JSON A page with no data bindings File types that don't belong in a static site (.php, .exe…) `javascript:` URLs, scripts inside SVG Crypto-miner code Script tags in the JSON content Archive tricks (../ paths, symlinks, zip bombs)	Text hardcoded in the HTML Bindings that don't exist in the JSON Inline scripts or `onclick=` handlers Scripts from unknown domains `eval()`, obfuscated code, cookie access Forms posting to other domains, iframes, redirects