Share state between your widgets

Every mount of your extension in one browser session — a widget, its expand panel, its tab, its page — shares one in-memory store. Use it for the things a reload should forget.

import { TapButton, useTapState } from "@tappify/extension-sdk";

export function Funnel() {
  const [step, setStep] = useTapState<string>("selectedStep");

  return (
    <TapButton onClick={() => setStep("install")}>
      {step ?? "Pick a step"}
    </TapButton>
  );
}

useTapState(key) returns the current value and a setter, and re-renders every mount that reads the same key. The same store is on the bridge as tap.state.get, tap.state.set and tap.state.subscribe when you are outside a component.

What belongs where

Keep it in	When
`useTapState`	A selection, a filter, an open panel — anything a reload may forget
Hosted storage	A preference or configuration that must come back tomorrow
Your server	Anything that belongs to you rather than to this owner

The store is scoped to one install in one browser session. It is not shared between teammates, between browsers or between projects, and it never reaches Tappify or your server. Hosted-storage writes also broadcast to every mount, so a preference saved in your settings panel updates a widget without a reload. That is a different mechanism with the same symptom: useTapState for the ephemeral value, useTapStorage for the saved one.

Start

Build

Test

Publish

Reference

What belongs where

​What belongs where

What belongs where