Use this guide when your app already owns Storyblok content and you want the React SDK to render that content into ENAD storefront sections.

Keep this guide narrow: use it for the public React SDK surface and the handoff into live examples. Storyblok space setup, content modeling, preview workflow, API tokens, and exact React SDK renderer exports remain owned elsewhere.

Keep the ownership boundary straight

Recommended integration order

1. Start from React SDK setup or First React SDK app so the stylesheet and provider boundary are correct.
2. Keep Storyblok fetching in the app shell, route loader, or server layer. Do not hide Storyblok network setup inside presentational renderer code.
3. Choose the public Storyblok surface at @enadhq/enad-react-sdk/client/cms/storyblok.
4. Map Storyblok-authored sections onto documented React SDK component families such as layout chrome, storefront blocks, galleries, quick links, and product-display sections.
5. Keep product, media, and search data ownership explicit. If a Storyblok block references merchandised products or Search-backed data, resolve and normalize that data in app-owned code before passing it into display components.
6. Add an explicit fallback path for unsupported or partially migrated bloks instead of letting missing renderer cases fail silently.
7. Verify the result in the live runtime surfaces linked from React SDK examples.

The page-shell pattern still comes first

Storyblok rendering belongs inside the normal React SDK shell, not beside it. Render verified client/cms/storyblok members inside that shell after the app has already fetched Storyblok content.

import "@enadhq/enad-react-sdk/styles.css";
import { EnadProvider } from "@enadhq/enad-react-sdk";
import { EnadThemeProvider } from "@enadhq/enad-react-sdk/client/theme";

export function StoryblokStorefrontShell({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <EnadProvider>
      <EnadThemeProvider componentSet="editorial">
        {children}
      </EnadThemeProvider>
    </EnadProvider>
  );
}

What this guide can safely tell you

The React SDK Storyblok surface is best treated as a bridge layer between CMS-authored block data and documented ENAD storefront component families. Use this guide to decide where the bridge belongs, which public import surface to start from, and where runtime verification should happen.

• Use the app shell for the Storyblok bridge boundary.
• Start from the public Storyblok import surface.
• Map layout chrome separately from storefront sections.
• Normalize product or Search-backed data before display components receive it.
• Verify behavior in Storybook, sandbox, or showcase.

This guide should not be treated as the exact contract for Storyblok renderer export names, adapter signatures, fallback prop shapes, CMS field contracts, preview behavior, or webhook behavior. When those exact details matter, verify them in package reference or source before shipping.

Unsupported-block strategy

Treat unsupported bloks as an app-owned recovery path. A safe approach is to:

• Keep a small app-owned registry that maps known Storyblok block types to verified SDK renderers or SDK component compositions.
• Log or surface unknown blok types during development.
• Render a controlled fallback for unpublished or partially migrated content.
• Avoid teaching Storyblok editors that every new blok automatically has a storefront renderer.

Storybook includes a Storyblok block-renderer example with example adapters and a variant with fallback behavior. Use those runtime examples to verify the recovery path before you encode it in app logic.

Live examples worth checking first

The React SDK examples include these Storyblok-related runtime checks for @enadhq/enad-react-sdk:

These examples are runtime checks, not copy-paste-safe app recipes. Use the related docs below when you need setup order, import boundaries, storefront composition, or troubleshooting guidance around those live examples.

Related docs

• React SDK examples
• React SDK playground
• Build a storefront page
• Import surfaces
• Troubleshooting