@wocart/theme

The theme contract for Wocart storefronts. A theme declares its components in code — real .astro components with typed, editable fields — and a store's pages are saved as JSON documents that reference them. This package validates both, resolves a saved document against the theme, and renders it with a reference Astro renderer.

Documentation: docs.wocart.store/sdk/theme — also in French and Arabic. Start with the tutorial.

Install

npm install @wocart/theme @wocart/storefront

@wocart/storefront 2 is a required peer; astro 7 is an optional peer, for the ./astro renderer. ESM only; Node 22.12 or newer for tooling.

Quick start

import { defineComponent, defineTheme } from "@wocart/theme";
import Hero from "./components/Hero.astro";

export const hero = defineComponent({
  type: "hero",
  component: Hero,
  label: "Hero",
  fields: [{ key: "title", kind: "text", label: "Title", default: "Fast delivery" }],
});

export const theme = defineTheme({ key: "my-theme", version: "1.0.0", components: { hero } });

Entry points

| Import | Holds | | --- | --- | | @wocart/theme | definitions, validation, page documents, resolution, rich text, the manifest, languages and messages | | @wocart/theme/astro | the read cache, the manifest and styles endpoints, the preview target | | @wocart/theme/astro/InstanceView.astro, Blocks.astro, Block.astro, ThemeStyles.astro | the reference renderer | | @wocart/theme/image-service | mediaImageService — resizes store images through the store's media delivery | | @wocart/theme/preview | the preview bridge, for a theme's preview page | | @wocart/theme/lifecycle, @wocart/theme/messages | small browser modules: binding behaviour across page swaps, messages and plurals |

CHANGELOG.md lists every release.

License

Apache-2.0 — see LICENSE and NOTICE.