React SDK

// app/page.tsx — a Server Component
import { BlocktronicsDashboard } from "@blocktronics/dashboard-react";
import { createSpec } from "@blocktronics/dashboard-react/spec";

const spec = createSpec({
  title: "DEGEN holders",
  tokens: ["base:DEGEN"],
  cards: ["grade", "concentration", "holders", "netflow"],
});

export default function Page() {
  return (
    <BlocktronicsDashboard
      spec={spec}
      origin="https://blocktronics.xyz"
      theme={{ mode: "light", accent: "#0052ff", radius: "s", brand: "Acme" }}
    />
  );
}

import { BlocktronicsCard } from "@blocktronics/dashboard-react";

<BlocktronicsCard card="netflow" token="base:DEGEN" view="calendar" origin="https://blocktronics.xyz" />
<BlocktronicsCard card="market-treemap" params={{ chain: "base" }} origin="https://blocktronics.xyz" transparent />

import { addCard, createSpec, encodeSpec, decodeSpec, setTheme } from "@blocktronics/dashboard-react/spec";

let spec = createSpec({ title: "Flow desk", tokens: ["base:VIRTUAL"], cards: ["today"] });
spec = addCard(spec, { card: "netflow", span: 6 });
spec = addCard(spec, { card: "holders", token: "base:DEGEN", span: 6 }); // adds DEGEN
spec = setTheme(spec, { mode: "dark", density: "compact" });

const link = `https://blocktronics.xyz/d#${encodeSpec(spec)}`;
decodeSpec(link.split("#")[1]); // → the same spec

Components are client code; in Server Components and scripts, import the helpers from @blocktronics/dashboard-react/spec. mode: "auto" follows the viewer's system setting; pass your page's mode if it has its own toggle

specrequired

A spec object, an encoded spec, or a /d or /embed link.

originrequired

The Blocktronics origin that serves /embed. Messages from any other origin, or from any other frame, are ignored.

theme

Overrides the spec's theme: mode, accent, radius, density, brand, attribution. Accents are lifted to 3:1 against the cards in each mode. Changes apply in place.

embedKey

Key for origin-locked embeds, sent as ?key=.

transparent

No page background behind the cards.

header

Title row above the cards.

lazytrue

Loads when the frame comes within 400px of the viewport.

initialHeight480

Height until the embed reports its own.

height

Fixed height; turns auto height off.

reducedMotion

Chart entrances and transitions off. The viewer's own setting always applies.

sandboxtrue

Sandboxed frame (scripts, popups, downloads; no top navigation). Skipped on your own origin.

onReady

The dashboard rendered: { title, cards }. Once per load.

onHeight

Content height in px, on every change.

onCardClick

{ key, card, index, token, view, params, interactive }; interactive is true when the click hit a control or link inside the card.

onError

"invalid-spec" or "invalid-origin".

For a plain page, WordPress, Webflow or Notion, the embed elements do all of this in two lines of HTML

<iframe src="https://blocktronics.xyz/embed?host=https://you.example#<spec>" style="border:0;width:100%"></iframe>
<script>
  addEventListener("message", (e) => {
    if (e.origin !== "https://blocktronics.xyz") return;
    if (e.data?.type === "blocktronics:resize") frame.style.height = e.data.height + "px";
  });
</script>

blocktronics:resizeembed → host

{ height } whenever the content height changes.

blocktronics:readyembed → host

{ bridge, title, cards } once the dashboard has rendered.

blocktronics:card-clickembed → host

The card, its token and whether a control was hit.

blocktronics:errorembed → host

{ reason: "invalid-spec" } when the URL holds no dashboard.

blocktronics:set-spechost → embed

{ spec } (encoded): replaces the dashboard in place. Accepted only from the framing page, and only from host when it's set.

blocktronics:set-modehost → embed

{ mode }: light, dark or auto over the theme's own, in place (bridge 2 and up; dashboards and hubs). Same checks as set-spec.