Sharing libraries

The question#

Your app imports a store in normal code. You register the same store for snippets. Is that two copies?

The answer: one instance#

No. JavaScript modules are instantiated once per resolved specifier. Your static import and the registry's dynamic import() resolve to the same module object, for the same reason fifty files importing React get one React.

This matters most for state. If a snippet got its own store copy, its cart and your app's cart would be unrelated objects. Everything would look fine while sharing nothing.

Because there is one instance, the store a snippet imports is your store:

import { Button } from '@app/ui';
import { useCart, addItem } from '@app/store';

export default function CartDemo() {
  const cart = useCart();
  return (
    <div className="grid gap-2">
      <p className="text-sm text-muted-foreground">
        Cart length: <strong>{cart.length}</strong> (shared with the host page)
      </p>
      <Button size="sm" onClick={() => addItem('doc-item')}>
        Add item
      </Button>
    </div>
  );
}

Add an item in the demo above. The cart count in the docs header (if wired) and the Apps shell header reflect the same Zustand store.

Live props by reference#

Pass objects through props the same way:

<LiveProvider code={source} props={{ user, theme }} />

The snippet receives the same object references. Mutations propagate immediately.

When it breaks#

Two copies appear when you register a different path to what your app uses, or bundle the library twice under different specifiers. Keep one canonical import path in your SDK surface.

Try it#

• Apps shell: shared cart via @app/store
• Playground: Shared instance demo with @demo/vendor