Web Components

Reeflow provides a complete set of Web Components that work in any framework or vanilla JavaScript project. Built on standard web technologies, these components are framework-agnostic and can be used anywhere.

Installation

Via CDN (Recommended for Getting Started)

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

Via Package Manager

# npm
npm install @reeflow/core

# pnpm
pnpm add @reeflow/core

# yarn
yarn add @reeflow/core

Then import in your JavaScript:

import '@reeflow/core';

Basic Usage

Once imported, all Reeflow components are available as custom HTML elements:

<reeflow-provider auth-token="your-token" theme="default">
  <reeflow-bar-chart title="Sales by Product">
    <script type="application/json" slot="query">
      {
        "from": "orders",
        "dimensions": ["product_category"],
        "measures": [
          {
            "field": "total_amount",
            "type": "sum"
          }
        ]
      }
    </script>
  </reeflow-bar-chart>
</reeflow-provider>

Why Web Components?

Universal Compatibility

Web Components are based on web standards supported by all modern browsers. This means:

• No framework lock-in
• Works with any JavaScript framework or library
• Future-proof technology built on web standards

Simple Integration

Add Reeflow to your project with a single script tag. That’s it! All components are now available as HTML elements.

Progressive Enhancement

Start with basic HTML and progressively enhance with JavaScript as needed.

Components

Learn about Reeflow’s components:

• Provider - Authentication and configuration
• Charts - Visualize your data
• Table - Display tabular data
• Theming - Customize appearance
• Mock Data - Development mode

API Reference

For complete Web Components API documentation, see the API Reference.

Framework-Specific Integration

While Web Components work everywhere, you might want framework-specific wrappers:

• React - React components with hooks and TypeScript
• Vue (coming soon)
• Angular (coming soon)