DocsDocsSDKs

React SDK playground

How docs and the live theme playground work together for runtime experimentation, theme export, and component validation.

Enad docs explains. The playground experiments.

Enad docs is the home for guidance, agent summaries, and package-versioned documentation. The live playground remains the runtime lab for sandboxing, theme editing, share URLs, visual examples, and export flows.

What belongs in docs

Docs owns provider setup guidance, theming concepts, component-set and resolver mental models, component selection, Storyblok storefront boundaries, curated examples, agent guides, and reference surfaces.

What belongs in the live playground

The live playground owns sandbox usage, theme editing, share URLs, component experimentation, runtime examples, visual verification, theme export flows, live-data source panels, and resolver-backed app lookup.

Open the live sandbox at sdk.enad.io/sandbox.

Theme export workflow

  1. Choose a component set and tokens in the playground.
  2. Copy the exported setup snippet.
  3. Restore rich state with EnadThemeProvider hash=\{themeHash\}.
  4. Use componentSet="..." directly only when the app needs a structural set without richer hash state.

Live-data workflow

The playground can connect to live data for experimentation. Consumer apps should not copy playground-only inspection controls. When building a real app, wire EnadProvider and client/search configuration from the package APIs and package reference.

Component docs include live playground links. Use those links to test component behavior, theme state, and visual variants after reading the docs guidance.

React SDK playground

# React SDK playground > Enad docs explains. The playground experiments. Enad docs is the home for guidance, agent summaries, and package-versioned documentation. The live playground remains the runtime lab for sandboxing, theme editing, share URLs, visual examples, and export flows. ## What belongs in docs Docs owns provider setup guidance, theming concepts, component-set and resolver mental models, component selection, Storyblok storefront boundaries, curated examples, agent guides, and reference surfaces. ## What belongs in the live playground The live playground owns sandbox usage, theme editing, share URLs, component experimentation, runtime examples, visual verification, theme export flows, live-data source panels, and resolver-backed app lookup. Open the live sandbox at [sdk.enad.io/sandbox](https://sdk.enad.io/sandbox). ## Theme export workflow 1. Choose a component set and tokens in the playground. 2. Copy the exported setup snippet. 3. Restore rich state with `EnadThemeProvider hash={themeHash}`. 4. Use `componentSet="..."` directly only when the app needs a structural set without richer hash state. ## Live-data workflow The playground can connect to live data for experimentation. Consumer apps should not copy playground-only inspection controls. When building a real app, wire `EnadProvider` and client/search configuration from the package APIs and package reference. ## How docs link to the playground Component docs include live playground links. Use those links to test component behavior, theme state, and visual variants after reading the docs guidance. ## Related docs - [React SDK setup](/react-sdk/latest/setup) - [Runtime theming](/react-sdk/latest/theming) - [Storyblok storefront bridge](/react-sdk/latest/guides/storyblok-storefront) - [React SDK examples](/react-sdk/latest/examples) - [React SDK components](/react-sdk/latest/components) - [Global playground pointer](/playground)