@exofe/theme-sdk

Build and validate Exofe storefront themes with TypeScript and React. The package includes a strict JSON manifest contract, provider-neutral storefront data hooks, reusable commerce components, a deterministic mock adapter, and a local theme renderer.

Install

npm install @exofe/theme-sdk react react-dom

React 18 or 19 is required when importing the main React entry. Manifest-only tooling can import @exofe/theme-sdk/manifest without React.

Define a theme

import { defineTheme } from "@exofe/theme-sdk/manifest";

const theme = defineTheme({
  schemaVersion: "1.0",
  sdkVersion: "^0.1.0",
  kind: "theme",
  id: "my-theme",
  name: "My theme",
  version: "1.0.0",
  runtime: "exofe-sections-v1",
  entry: "src/main.tsx",
  capabilities: ["store:read", "products:read"],
  sections: [
    {
      type: "hero",
      label: "Hero",
      html: "<section><h1>{{ heading }}</h1></section>",
      settings: [
        { id: "heading", type: "text", label: "Heading", default: "Hello" },
      ],
    },
  ],
  layout: [{ id: "home-hero", type: "hero", settings: {} }],
});

defineTheme() rejects unknown fields, invalid IDs, duplicate references, malformed placeholders, invalid select values, and unsupported schema/runtime versions. toThemeDefinition() creates the section DTO used by the Exofe Developer Portal.

Render with mock store data

import {
  ThemeProvider,
  ThemeRenderer,
  createMockAdapter,
} from "@exofe/theme-sdk";

const adapter = createMockAdapter();

export function Preview() {
  return (
    <ThemeProvider adapter={adapter}>
      <ThemeRenderer manifest={theme} />
    </ThemeProvider>
  );
}

Implement StoreAdapter to connect another host. Snapshots must remain immutable and retain the same object identity until data changes.

Security and production compatibility

The React renderer is for trusted local previews. Exofe's current production flow installs the exported HTML section definitions and built-in product grid; custom React components, blocks, global settings, and preview CSS are not installed by the V1 host. The production backend remains responsible for validation, sanitization, authorization, cart rules, inventory, and checkout.

Source repository: Exofe AI Commerce OS