Understanding the Storefront SDK
The Storefront SDK is in beta. Content in this section may be updated as the SDK evolves.
The Storefront SDK is a set of packages that help you build customer-facing experiences on Propeller. It is organized in three layers. Each layer builds on the previous one. You pick the level that fits your project.
Full app with routing, CMS integration and state management. Clone and customize.
Pre-built commerce components for React and Vue. Stack-agnostic documentation for building in any framework.
Typed TypeScript services. Works in any JavaScript or TypeScript project.
- Layer 1 (SDK Services) — you write all your own UI. The SDK gives you typed services to talk to Propeller's GraphQL API. Works in any JavaScript or TypeScript project.
- Layer 2 (UI Components) — ready-made e-commerce components on top of the SDK. Available for React and Vue via npm. Each component also has stack-agnostic documentation that serves as a complete spec, so partners can build their own implementation in any framework.
- Layer 3 (Accelerator) — you get a complete working storefront. Clone it, customize it, launch. Includes routing, CMS integration and all Layer 2 components pre-wired. Available as a Next.js app (
@propeller/accelerator-nextjs), with a Vue version coming.
Each layer is independently usable. You do not need Layer 3 to use Layer 2. You do not need Layer 2 to use Layer 1.
Packages
| Package | What it is | Distribution |
|---|---|---|
propeller-sdk-v2 | TypeScript SDK — services, types, GraphQL client | npm |
@propeller/ui-react | React UI components | npm |
@propeller/ui-vue | Vue UI components (coming) | npm |
@propeller/cms-core | CMS adapter interfaces | npm |
@propeller/cms-strapi | Strapi adapter implementation | npm |
@propeller/accelerator-nextjs | Full Next.js app | git clone |
@propeller/accelerator-vue | Full Vue app (coming) | git clone |
How this section is organized
This section covers what is specific to the Storefront SDK. The pages follow a natural reading order:
- Choosing Your Approach — three common partner architectures and a decision table to find the right fit
- SDK Services — Layer 1 deep dive: typed services, initialization and usage examples
- UI Components — Layer 2 deep dive: component inventory, callbacks, stack-agnostic documentation
- Accelerator — Layer 3 deep dive: state management, configuration and what works without a CMS
- CMS Integration — the adapter pattern, bridge blocks and dynamic block rendering
- Routing — commerce routes, CMS routes and URL configuration
- Customization — callbacks, pass-through properties and override patterns
- B2B Capabilities — portal modes, contact-company model and clusters
How this relates to the domain guides
The domain guides teach you how to work with products, pricing, cart and checkout, accounts and orders using raw GraphQL queries. Those concepts apply whether you use the SDK or build from scratch with your own framework.
The SDK wraps many of those queries into typed services and pre-built components. When you use a ProductGrid component, it runs the same product queries described in the domain guides. Understanding the underlying queries helps you customize components and debug issues.
Component reference
Individual component documentation (properties, callbacks, usage examples) will be available as part of the UI Components section. Each component has its own documentation file covering basic and extended usage, properties, methods and callbacks.