Embed SDK Overview

The Reeflow Embed SDK is a lightweight, framework-agnostic library that empowers developers to embed interactive analytics components into any web application. Built on standard Web Components, it provides a seamless way to visualize and interact with your data.

What is the Embed SDK?

The Embed SDK is a collection of reusable, production-ready Web Components for data visualization and interaction. Think of it as a component library for analytics that works anywhere JavaScript runs.

Why Web Components?

We chose Web Components because they:

• Work everywhere - Compatible with vanilla JS and any framework
• Are standards-based - Built on browser APIs, no proprietary dependencies
• Encapsulate styles - No CSS conflicts with your existing application
• Are future-proof - Supported natively by all modern browsers
• Bundle efficiently - Tree-shakeable and optimized for production

What makes Reeflow different?

Unlike traditional charting libraries that require complex configuration and custom backends, Reeflow provides:

• 🔌 Plug-and-play - Add a <reeflow-chart> tag and you’re done
• 🔐 Secure by default - Built-in authentication and authorization
• 🎨 Beautiful out of the box - 2 professional themes, light/dark modes
• 📊 Data-agnostic - Connect to any database via the Reeflow API
• ⚡ Blazing fast - Optimized rendering for performance
• 🎯 Type-safe - Full TypeScript support with comprehensive types

When to use the Embed SDK

The Embed SDK is perfect for:

Embedded analytics

Provide analytics dashboards to your customers without building custom visualization code:

React

import { ReeflowProvider, ReeflowBarChart } from '@reeflow/react';

// Embed a complete dashboard in your SaaS product
<ReeflowProvider authToken="customer-specific-token">
  <ReeflowBarChart
    title="Your Usage This Month"
    query={{
      from: 'usage_events',
      dimensions: ['service_name'],
      measures: [{ column: 'count', type: 'sum' }],
    }}
  />
</ReeflowProvider>;

Vanilla JS / HTML

<!-- Embed a complete dashboard in your SaaS product -->
<reeflow-provider auth-token="customer-specific-token">
  <reeflow-bar-chart title="Your Usage This Month">
    <script type="application/json" slot="query">
      {
        "from": "usage_events",
        "dimensions": ["service_name"],
        "measures": [{"column": "count", "type": "sum"}]
      }
    </script>
  </reeflow-bar-chart>
</reeflow-provider>

Internal dashboards

Build internal reporting and monitoring dashboards faster:

• Operations dashboards - Monitor system health and performance
• Business intelligence - Track KPIs and metrics
• Executive reporting - Summarize key business data
• Team analytics - Departmental data views

Customer-facing reports

Present data to end users in a polished, interactive way:

• Usage reports - Show customers their consumption and trends
• Financial dashboards - Billing, invoicing, and payment analytics
• Performance metrics - Display customer-specific KPIs
• Compliance reporting - Regulatory and audit data

Key features

Framework-agnostic

Built with Web Components, the Embed SDK works seamlessly with vanilla JavaScript, React, and any other framework:

React

import { ReeflowProvider, ReeflowBarChart } from '@reeflow/react';

<ReeflowProvider authToken="token">
  <ReeflowBarChart {...} />
</ReeflowProvider>

Vanilla JS / HTML

<reeflow-provider auth-token="token">
  <reeflow-bar-chart>...</reeflow-bar-chart>
</reeflow-provider>

Type-safe

Full TypeScript support with comprehensive type definitions:

import type { ReeflowBarChart, ReeflowTable, QueryResult } from '@reeflow/core';

const chart = document.querySelector('reeflow-bar-chart') as ReeflowBarChart;

// Fully typed methods and properties
chart.query = {
  /* typed query object */
};
await chart.refresh();

Themeable

Two built-in themes with automatic light/dark mode support:

Default

Warm, modern theme with earthy tones

Ocean

Calming aquatic blues and teals

Learn more about theming and customization.

Chart components

Interactive, responsive charts:

• Bar Chart - Categorical comparisons
• Line Chart - Trends and time-series
• Pie Chart - Proportions and composition

All charts include smooth animations, interactive tooltips, and responsive sizing.

Table component

Powerful data tables with sorting, pagination, and row selection support.

Learn more about tables →

JSONQL integration

Query your data using an intuitive, JSON-based query language:

{
  "from": "orders",
  "dimensions": ["product_name", "region"],
  "measures": [
    { "column": "revenue", "type": "sum" },
    { "column": "orders", "type": "count" }
  ],
  "filters": {
    "order_date": { ">": "2024-01-01" }
  },
  "order_by": [{ "column": "revenue", "direction": "desc" }],
  "limit": 100
}

Learn more about JSONQL →

Quick start

Get started in minutes:

Installation

React

npm install @reeflow/react

Vanilla JS / CDN

npm install @reeflow/core
# or via CDN

<script type="module">
  import '@reeflow/core';
</script>

Basic usage

React

import { ReeflowProvider, ReeflowBarChart } from '@reeflow/react';

function Dashboard() {
  return (
    <ReeflowProvider authToken="your-token-here">
      <ReeflowBarChart
        title="Revenue by Product"
        query={{
          type: 'aggregate',
          query: {
            measures: [{ column: 'orders.revenue', type: 'sum' }],
            dimensions: [{ column: 'orders.product_name', type: 'categorical' }],
          },
        }}
      />
    </ReeflowProvider>
  );
}

Vanilla JS / HTML

<!DOCTYPE html>
<html>
  <head>
    <script type="module">
      import '@reeflow/core';
    </script>
  </head>
  <body>
    <reeflow-provider auth-token="your-token-here">
      <reeflow-bar-chart title="Revenue by Product">
        <script type="application/json" slot="query">
          {
            "type": "aggregate",
            "measures": [{"column": "orders.revenue", "type": "sum"}],
            "dimensions": [{"column": "orders.product_name", "type": "categorical"}]
          }
        </script>
      </reeflow-bar-chart>
    </reeflow-provider>
  </body>
</html>

Tip

New to Reeflow? Start with our Getting Started Guide for a step-by-step tutorial.

Common use cases

SaaS customer dashboards

Embed usage analytics directly into your product:

React

import { ReeflowProvider, ReeflowLineChart, ReeflowTable } from '@reeflow/react';

<ReeflowProvider embedToken={customerToken}>
  <ReeflowLineChart title="API Calls This Month">{/* Usage metrics */}</ReeflowLineChart>
  <ReeflowTable title="Recent Activity">{/* Activity log */}</ReeflowTable>
</ReeflowProvider>;

Vanilla JS / HTML

<reeflow-provider embed-token={customerToken}>
  <reeflow-line-chart title="API Calls This Month">
    <!-- Usage metrics -->
  </reeflow-line-chart>
  <reeflow-table title="Recent Activity">
    <!-- Activity log -->
  </reeflow-table>
</reeflow-provider>

Sales analytics

Track revenue, pipeline, and performance:

React

import { ReeflowBarChart } from '@reeflow/react';

<ReeflowBarChart
  title="Revenue by Region"
  query={{
    from: 'sales',
    dimensions: ['region'],
    measures: [
      { column: 'revenue', type: 'sum' },
      { column: 'deals_closed', type: 'count' },
    ],
  }}
/>;

Vanilla JS / HTML

<reeflow-bar-chart title="Revenue by Region">
  <script type="application/json" slot="query">
    {
      "from": "sales",
      "dimensions": ["region"],
      "measures": [
        {"column": "revenue", "type": "sum"},
        {"column": "deals_closed", "type": "count"}
      ]
    }
  </script>
</reeflow-bar-chart>

Operations monitoring

Monitor system health and performance:

React

import { ReeflowLineChart } from '@reeflow/react';

<ReeflowLineChart
  title="Error Rate"
  query={{
    from: 'logs',
    dimensions: [{ column: 'timestamp', type: 'time', granularity: 'hour' }],
    measures: [{ column: 'errors', type: 'count' }],
    filters: {
      severity: 'error',
    },
  }}
/>;

Vanilla JS / HTML

<reeflow-line-chart title="Error Rate">
  <script type="application/json" slot="query">
    {
      "from": "logs",
      "dimensions": [
        {"column": "timestamp", "type": "time", "granularity": "hour"}
      ],
      "measures": [{"column": "errors", "type": "count"}],
      "filters": {
        "severity": "error"
      }
    }
  </script>
</reeflow-line-chart>

Available components

The SDK provides several components for displaying data:

Provider

Context provider for authentication and theming

Learn more →

Workbook

Display complete embedded workbooks with multiple pages

Learn more →

Bar Chart

Display categorical data with bars

Learn more →

Line Chart

Show trends and time-series data

Learn more →

Pie Chart

Visualize proportions and percentages

Learn more →

Table

Interactive data tables with sorting

Learn more →

Container

Generic container for custom content with standard Reeflow styling

Learn more →

Next steps

Ready to dive in?

Getting Started

Build your first dashboard in 5 minutes

Start tutorial →

Component Guides

Learn about provider, charts, tables, and theming

Browse components →

JSONQL

Master the query language

Learn JSONQL →

Examples

See complete dashboard examples

View examples →

React Integration

Use Reeflow with React hooks and best practices

Learn more →

Additional resources

• React Integration - React hooks and framework-specific guide
• SDK Reference - Complete SDK documentation including mock data, types, and API
• Authentication Guide - Secure your API access
• Session Tokens - Create and manage tokens
• API Reference - Complete Reeflow API documentation (backend)