Overview
A theme controls how your public site looks: colours, typography, layout, the markup of every published page. Flexweg CMS themes are React components that get rendered to HTML at publish time — you write JSX, the publisher calls react-dom/server.renderToStaticMarkup() in the admin's browser, and the resulting string gets uploaded to Flexweg.
Manifest reference
Every theme exports a single ThemeManifest from its manifest.ts. This is the contract between the theme and the admin. Get this right and everything else falls into place.
Templates and props
Each of the six template components receives a typed props object plus a site: SiteContext carrying global state. This page documents what each template gets and how to use the props.
CSS pipelines
Flexweg CMS supports two CSS workflows for themes — picked per-theme based on which files exist:
Image variants
Each theme declares the image variants (sizes / aspect ratios / formats) it expects. The admin's upload pipeline generates every declared variant whenever a user uploads an image — so when your template calls pickFormat(view, "small"), the file already exists at the expected URL.
Settings page
A theme can ship a settings page reachable at /theme-settings when the theme is active. Use it to expose customisation knobs — colours, fonts, logo, layout toggles — without forking the theme.
Theme blocks
Themes can contribute editor blocks — atom blocks that render at publish time as full sections of HTML (heroes, post grids, CTAs, sidebars). Theme blocks are scoped to the active theme: switching themes deregisters the old theme's blocks and registers the new one's.
External bundle
External themes ship as a .zip containing a pre-built ESM bundle, get uploaded into Flexweg via the Install theme UI, and load at runtime via dynamic import() — no admin rebuild required.
Creating an external theme
This guide walks through authoring a Flexweg CMS theme distributed as a .zip and loaded at runtime — no rebuild of the admin required.