@tapstack/siteio-react-sdk

SDK for rendering SiteIO projects in external Next.js applications.

Installation

npm install @tapstack/siteio-react-sdk
# or
pnpm add @tapstack/siteio-react-sdk
# or
yarn add @tapstack/siteio-react-sdk

Styling & CSS Deliveryy

The SDK now fetches the exact Tailwind CSS that was generated in the Reweb builder and injects it into your page during SSR together with the project theme variables. That means you no longer need to configure Tailwind CSS in the consuming project—drop in the component and it renders with the same styles that you defined in the builder.

If you want to merge SiteIO CSS with your own Tailwind pipeline (for example to tree-shake utilities or share classes across the rest of your app), you can still follow the optional instructions in TAILWIND_SETUP.md.

Quick Start

Basic Usage

import { RewebProject } from "@tapstack/siteio-react-sdk";

export default function Page() {
  return (
    <RewebProject
      projectId="your-project-public-id"
      token="your-project-token"
    />
  );
}

With Custom Configuration

import { RewebProject } from "@tapstack/siteio-react-sdk";

export default function Page() {
  return (
    <RewebProject
      projectId="your-project-public-id"
      token="your-project-token"
      initialPageId="page-public-id" // Optional: specific page to render
      config={{
        apiUrl: "https://your-reweb-instance.com", // Optional: defaults to current origin
      }}
      className="my-custom-class" // Optional: custom className
      componentRegistry={{
        // Optional: Map component names to your React components
        Button: MyButton,
        Card: MyCard,
      }}
    />
  );
}

Note: This SDK is SSR-only (Server-Side Rendering). It works entirely on the server with no client-side JavaScript required.

Using PreviewBlockRenderer Directly

If you need more control, you can use PreviewBlockRenderer directly:

import { fetchProject, PreviewBlockRenderer } from "@tapstack/siteio-react-sdk";

export default async function CustomPage() {
  const data = await fetchProject({
    projectId: "your-project-public-id",
    token: "your-project-token",
  });

  const page = data.pages[0];

  return (
    <div>
      {page.blocks.map((block) => (
        <PreviewBlockRenderer
          key={block.id}
          block={block}
          components={data.components}
        />
      ))}
    </div>
  );
}

API Reference

RewebProject

Main component for rendering a Reweb project.

Props

• projectId (string, required): The public ID of the project
• token (string, required): The project token for authentication
• initialPageId (string, optional): The public ID of the page to render initially. Defaults to the home page (/)
• config (RewebSDKConfig, optional): Configuration options
  • apiUrl (string, optional): Base URL for the Reweb API. Defaults to current origin
• className (string, optional): Custom CSS class name
• componentRegistry (ComponentRegistry, optional): Map of component names to React components (e.g., { Button: MyButton })

PreviewBlockRenderer

Low-level component for rendering individual blocks.

Props

• block (Block, required): The block to render
• components (Component[], optional): Array of components available for rendering
• currentComponent (CurrentComponent, optional): Current component context
• replaceVhClasses (boolean, optional): Whether to replace vh classes with px. Default: false
• className (string, optional): Custom CSS class name
• componentRegistry (ComponentRegistry, optional): Map of component names to React components

fetchProject

Utility function for fetching project data.

Parameters

• projectId (string, required): The public ID of the project
• token (string, required): The project token for authentication
• apiUrl (string, optional): Base URL for the Reweb API

Returns

Promise that resolves to ProjectData

Getting Your Project Token

1. Go to your Reweb project settings
2. Find the "API Token" section
3. Copy your project token
4. Use it in the token prop

Testing on Localhost

To test the SDK integration on localhost:3001 (tapni.com):

1. Make sure your Reweb instance is running on localhost:3000
2. In your tapni.com project, configure the SDK with the correct API URL:

<RewebProject
  projectId="your-project-id"
  token="your-token"
  config={{
    apiUrl: "http://localhost:3000", // Point to your Reweb instance
  }}
/>

3. The SDK will automatically fetch and render your project from the Reweb instance
4. Note: Since this is SSR-only, you'll need to refresh the page to see changes

TypeScript Support

The SDK is written in TypeScript and includes full type definitions. All types are exported from the main package:

import type {
  ProjectData,
  Block,
  Component,
  RewebSDKConfig,
} from "@tapstack/siteio-react-sdk";

Development

To build the SDK package:

cd packages/siteio-react-sdk
pnpm install
pnpm build

To watch for changes during development:

pnpm dev

Requirements

• React 18+
• Next.js 13+ (App Router recommended)
• Tailwind CSS (for styling)

License

MIT