Skip to content

@kotao/storefront

The theme runtime SDK. Server helpers live on the root entrypoint; UI building blocks under /react; focused utilities under their own subpaths. This page is an entrypoint map — deeper per-symbol documentation is generated in a later release.

Server-side toolkit used from your Worker entry and route loaders:

  • Context & clientcreateKotaoContext, createStorefrontClient: the per-request context your loaders reach as context.storefront.
  • CartcreateCartHandler, CartForm actions (CART_FORM_ACTIONS), applyOptimisticCartAction, cart-id cookie helpers.
  • CachingCacheShort, CacheLong, CacheNone, CacheCustom, createWithCache, generateCacheControlHeader.
  • SEO & routinggetSeoMeta, JSON-LD builders (productJsonLd, organizationJsonLd, …), storefrontRedirect, sitemap/robots responses.
  • Localization — locale detection (localeFromRequest, localizePath, stripLocalePrefixFromRequest), the localization form handler.
  • Consent & analytics — consent cookie encode/decode, createAnalyticsEmitter, getShopAnalytics.
  • CheckoutresolveCheckoutUrl, checkout consent passthrough, design-token extraction.
  • PaginationgetPaginationVariables, getPaginationInfo, flattenConnection.

Client components and hooks: Image, Money / useMoney, Seo, Pagination, MediaFile, CartForm + OptimisticInput / useOptimisticData, Analytics* views + useAnalytics, ConsentBanner, ShopPayButton, theme settings via ThemeSettingsProvider / useThemeSettings / useSectionSettings, and openSmartCart for the platform cart drawer.

The React Router 7 binding: getKotaoLoadContext (wire the Worker request into your routes) plus defer / json compat re-exports.

Variant selection logic: getProductOptions, getSelectedVariant, getSelectedProductOptions, getAdjacentAndFirstAvailableVariants, useOptimisticVariant, useSelectedOptionInUrlParam.

imageUrl, imageSrcSet, buildImageAttrs — CDN image URLs with transforms, and complete <img> attribute sets (dimensions included, CLS-safe).

The SEO toolkit standalone: getSeoMeta, JSON-LD builders, robotsResponse, sitemapResponse / sitemapIndexResponse, storefrontRedirect.

Settings-as-data plumbing: fetchThemeSettings, resolveThemeSettings, mergeSettings / mergeSection, createThemeSettingsStore.

createStorefrontEditorBridge / createStorefrontEditorHostBridge — the live-preview bridge the Workspace theme editor uses to talk to your theme.

/cart-documents (the cart GraphQL documents), /storefront-api-types and /customer-account-api-types (generated API types).