Strata Docs

Install the SDK

npm install @strata-ds/core

Or with yarn: yarn add @strata-ds/core

Installation

npm install @strata-ds/core
# or
yarn add @strata-ds/core

StrataProvider setup

Wrap your root layout with StrataProvider. Pass your projectId, snapshotCdnBase, and syncToken for CDN-first sync. StrataProvider polls every syncInterval milliseconds (default 3000) and updates all consuming components without a page reload.

// app/layout.tsx  (Next.js App Router)
import { StrataProvider } from "@strata-ds/core";

export default function RootLayout({ children }) {
  return (
    <StrataProvider
      syncEnabled={true}
      projectId="YOUR_PROJECT_ID"
      snapshotCdnBase="https://cdn.strata.charisol.io"
      syncToken="pt_live_your_token_here"
    >
      {children}
    </StrataProvider>
  );
}

Using components with useComponents()

useComponents() returns a map of every component you defined in your Strata project, keyed by PascalCase name. Render them conditionally — they are undefined while the first sync is in flight.

"use client";
import { useComponents } from "@strata-ds/core";

function App() {
  const { Button, Navbar, Card } = useComponents();

  return (
    <>
      {Button && <Button onClick={() => console.log("clicked")}>Click me</Button>}
      {Card && <Card style={{ padding: "20px" }}>Card content</Card>}
    </>
  );
}

Web Components integration

If your app is not React-based, use the Web Components package. Register the elements once at startup, then use custom elements directly in HTML templates.

npm install @strata-ds/web-components

import { registerStrataElements, initStrataSync } from "@strata-ds/web-components";

registerStrataElements();

initStrataSync({
  projectId: "YOUR_PROJECT_ID",
  snapshotCdnBase: "https://cdn.strata.charisol.io",
  syncToken: "pt_live_your_token_here",
  syncEnabled: true,
  syncInterval: 3000,
});

<!-- Example usage -->
<strata-button variant="primary">Save changes</strata-button>
<strata-card elevation="sm">
  <h3>Design token preview</h3>
</strata-card>

The same sync settings apply across React and Web Components: syncEnabled, syncInterval, projectId, snapshotCdnBase, and syncToken.

Build-time vs runtime

Hooks reference

TypeScript types

The Strata SDK is fully typed. All hooks and components export TypeScript definitions for complete IDE autocomplete and type safety.

interface DesignToken {
  name: string;            // e.g. "--color-brand-primary"
  value: string | number;  // e.g. "#3B82F6" or 16
  type: 'color' | 'spacing' | 'fontSize' | 'fontWeight' |
        'lineHeight' | 'shadow' | 'borderRadius' | 'other';
  unit?: string;           // e.g. "px", "rem", "%"
  comment?: string;        // Designer notes
  category?: string;       // Grouping (e.g. "brand", "semantic")
}

interface ComponentNode {
  id: string;
  name: string;
  type: 'button' | 'input' | 'card' | 'nav' | 'other';
  properties: Record<string, string | number>;
  styles?: Record<string, string>;
  children?: ComponentNode[];
}

import { useVariables, useComponents } from '@strata-ds/core';

// useVariables() returns a typed token map
const variables: Record<string, DesignToken> = useVariables();

// useComponents() returns a typed component tree
const components: ComponentNode[] = useComponents();

// Full IDE autocomplete
const primaryColor = variables['--color-brand-primary'].value;
//    ^? string | number

// Type-safe component access
const button = components.find(c => c.type === 'button');
//    ^? ComponentNode | undefined

Debugging

Drop <StrataDebug /> anywhere inside StrataProvider during development. It renders a panel showing sync status, last synced timestamp, the sync URL, and all registered component names.

import { StrataDebug } from "@strata-ds/core";

// Anywhere inside <StrataProvider>
<StrataDebug />