SDK Status Dashboard

Four third-party SDKs, four different loading patterns, one hook each. Each card below calls useWatchWindot with a single dot-notation path and renders the lifecycle state in real time. The same hook handles sync globals, property mutations, deep nesting, and incremental namespace building. The script tags that inject each SDK are loaded separately in the page layout and are not shown in the snippet.

function SDKCard({ name, path, options }) {
  const { value, status, error } =
    useWatchWindot(path, options);

  return (
    <div>
      <h3>{name}</h3>
      <p>Path: {path}</p>
      <p>Status: {status}</p>
      {value != null && <p>Type: {typeof value}</p>}
      {error && <p>Error: {error.message}</p>}
    </div>
  );
}