Introducing custom React blocks for Stoify storefronts

Some storefront ideas do not fit a standard section layout. Developers can now author reusable TypeScript React blocks in the storefront builder's Code mode, then hand the content back to the visual editor through declared fields.

Save a valid block with a display name and Stoify makes it available from Add section. The block's stoifyProps declaration defines the controls and readable labels that appear in the Content inspector. Teams can expose text, multiline text, numbers, toggles, colors, media, and links without asking a merchant to edit component code.

One source, two ways to work

Custom blocks live alongside the rest of the versioned theme source. A page stores a block reference and its own prop values, so the same component can be reused with different content. The visual builder still owns page order and section selection, while Code mode owns the component implementation.

Components can use Stoify's site container and public site context, including the site name and URL. The stoify editor API provides completions for those helpers and supported inspector controls without requiring a separate npm package.

A bounded rendering workflow

The editor validates custom files before they can be added to a page. Saved source is compiled once and stored with its source hash. When a published page uses custom blocks and the renderer image is configured, Stoify renders the page's custom components together in a short-lived Vercel Sandbox with network access denied. If that work fails, the page stays available and the browser can render the block from the same saved source and props.

Creating, saving, adding, and editing custom blocks requires Developer Mode access or super-admin access. Existing page content continues to render if a site later loses that access. Developers can remove a block through the theme file tree; Stoify also removes its saved page references and clears runtime caches.

Explore custom React blocks or read about the Developer Mode theme editor.