Back to docs

Themes (beta)

Theme packages (beta)

Beta: package structure, placeholders, catalog, workspace upload, and install modes.

ClaudeChatGPTCursor

Beta. Sites theme packages are in beta. Package ids, install modes, and response shapes may change before general availability.

Theme packages are installable looks and layouts for Sites websites on styrar.site. A package can include theme tokens, multi-page layouts, chrome blocks, and optional custom block/section HTML with a settings schema. Install always copies into a draft SiteVersion. The public site never live-links remote theme code.

Download the reference theme (beta): styrar-reference-theme.zip

Authoring guide (placeholders, zip layout, JS policy): Theme authoring.

Plan requirement: API access requires Team or Agency. See pricing.

Base URL: https://api.styrar.com/v1

How authoring works

You authorStyrar does
Theme token JSON (colorScheme, fonts, buttons, …)Maps tokens to CSS variables on the published page
Optional customCssInjects sanitized CSS using those variables
Multi-page pages / pageMeta + chrome blocksRenders sections and blocks to HTML
Optional blocks/*/definition.json + template.htmlSettings-driven inspector fields; SSR fills {{ settings.* }}
Optional local template.jsRuns on the page; external script URLs are sandboxed

Default markup uses placeholders ({{ settings.title }}, {{{ settings.body }}}, {{#blocks}}, {{ include "snippet" }}). Optional HTML <template> is for client cloning only.

Package structure

JSON
{
  "schemaVersion": 1,
  "id": "styrar.studio",
  "name": "Studio",
  "description": "Light editorial look with About page and pull quote.",
  "author": "Styrar",
  "version": "1.0.0",
  "category": "portfolio",
  "swatch": { "background": "#f7f5f0", "accent": "#1a1a1a" },
  "theme": {
    "colorScheme": {
      "background": "#f7f5f0",
      "text": "#1a1a1a",
      "accent": "#1a1a1a",
      "buttonBg": "#1a1a1a",
      "buttonText": "#f7f5f0"
    },
    "fontFamily": "'Playfair Display', Georgia, serif",
    "containerWidth": "wide"
  },
  "pages": ["/", "/about"],
  "pageMeta": {
    "/": { "title": "Home", "sections": [] },
    "/about": { "title": "About", "sections": [] }
  },
  "blocks": [],
  "blockDefinitions": [],
  "sectionDefinitions": [],
  "snippets": {},
  "components": []
}
FieldRole
themeLook tokens (same shape as SiteVersion.theme)
pages / pageMetaMulti-page IA + section trees
blocksChrome (site_nav, hero, footer, …) and package-defined kinds
blockDefinitions / sectionDefinitionsCustom kinds with settings + HTML partials
snippetsNamed HTML for {{ include "name" }}
swatchGallery preview colors

Workspace uploads may use a theme zip (theme.json, templates/, sections/, blocks/, snippets/, assets/) via the Theme tab or POST /v1/sites/theme-packages/workspace.

Theme tokens → CSS variables

Token fieldCSS variable
colorScheme.background--bio-bg
colorScheme.text--bio-text
colorScheme.accent--bio-accent
colorScheme.buttonBg--bio-btn-bg
colorScheme.buttonText--bio-btn-text
fontFamily / Google font--bio-font
buttonRadius--bio-btn-radius
containerWidth--bio-page-width

Catalog

IdNameCategoryPages
styrar.studioStudioportfolio/, /about
styrar.midnightMidnightcommerce/, /shop
styrar.softSoftportfolio/, /work
styrar.contrastContrastagency/, /services

First-party packages ship in product (beta). For a zip you can open and edit locally, use the reference theme download (beta) (styrar.reference).

RequestGET
Authorization: Bearer sty_live_your_api_key
RequestGET
Authorization: Bearer sty_live_your_api_key

Create a site from a package

Pass a package id as templateId (structural starters: blank, portfolio, booking, store; or a workspace package id).

RequestPOST
Authorization: Bearer sty_live_your_api_key
Content-Type: application/json

{
  "companyId": "clxyz_company",
  "title": "Studio site",
  "templateId": "styrar.studio"
}

Install onto a draft

RequestPOST
Authorization: Bearer sty_live_your_api_key
Content-Type: application/json

{
  "packageId": "styrar.midnight",
  "mode": "theme"
}
modeEffect
themeMerge package colors, fonts, and buttons. Keeps existing pages.
fullReplace theme, pages, sections, chrome, and theme definitions.

Export a draft as a zip with POST /v1/sites/:id/versions/:versionId/export-theme-package.

Upload a workspace package

RequestPOST
Authorization: Bearer sty_live_your_api_key
Content-Type: multipart/form-data

Form field file = theme zip (store-only). Or send JSON { "package": { … } }.

RequestDELETE
Authorization: Bearer sty_live_your_api_key

Workspace theme presets

Token-only snapshots (not full packages):

MethodPathScope
GET/POST/v1/sites/theme-presetslinks:read / links:write
DELETE/v1/sites/theme-presets/:idlinks:write

Related