Sharing a single component between Admin and Storefront

Extensions
,
1

Hello,

I’m building an app where merchants can configure the widget in the admin ui (previewing it live as they change colors, etc.), and it updates for the storefront App Block.
I managed to implement:

  • Single Web Component shared between admin (Remix/React) and storefront (Theme App Extension)

  • Admin: TypeScript source with React wrapper for property binding

  • In sotrefront there’s a compiled bundle that self-registers via Liquid template.

    My main question is, whether there is any established libraries or frameworks for this pattern (admin preview + storefront rendering with shared component)? I’m essentially maintaining two build pipelines (Vite for admin, esbuild for storefront) and manually syncing TypeScript source with the bundle.

Has anyone solved this cleaner, or maybe there is some “To go” approach :thinking:

2

I have 2 builds: one for admin and one for storefront, both using Vite. If there are common components just let each bundle pick them up.