MM Flow

mmflow Charts

Embeddable financial charts for live crypto products

Build crypto-native charting surfaces with the mmflow WebGL engine, React and Vue bindings, built-in and custom indicators, bring-your-own data feeds, live mmflow feeds, order-flow layers, and white-label themes.

Embeddable chart engine

Use the framework-agnostic createChart API directly, or render the same engine through React and Vue bindings.

Live and custom data

Connect createMmflowFeed for mmflow market data or bring your own DataFeed implementation for venue-specific products.

Order-flow layers

Attach confirmed layer handles for footprint, volume profile, order-book heatmap, and liquidation or trade markers.

Programmable indicators

Compile safe ChartScript formulas into the same multi-line IndicatorInstance shape used by custom studies.

Historical replay

Create deterministic candle replay sessions with synthetic events or bounded history windows.

White-label surface

Pass ThemeTokens for brand-native embeds while keeping WebGL rendering, autosize, and performance behavior intact.

Quickstart

The package names below are the intended SDK install shape from the repo package manifests. The first React embed uses confirmed exports from the chart, React, indicator, and data SDK packages.

Install shape
# Intended package install shape for app embeds
pnpm add @mmflow/charts @mmflow/react @mmflow/sdk

# Add framework-specific bindings when needed
pnpm add @mmflow/vue @mmflow/indicators
React chart
"use client";

import { Chart } from "@mmflow/react";
import { smaStudy, rsiStudy } from "@mmflow/charts";
import { createMmflowFeed } from "@mmflow/sdk";

const feed = createMmflowFeed({
  apiKey: process.env.NEXT_PUBLIC_MMFLOW_KEY,
});

export default function BtcChart() {
  return (
    <Chart
      feed={feed}
      symbol="BTC"
      resolution="1m"
      volume
      autosize
      indicators={[smaStudy({ period: 50 }), rsiStudy()]}
      style={{ height: 520 }}
    />
  );
}

Documentation index

Choose the integration path first, then add feeds, studies, layers, themes, and performance guidance as the product matures.

Quickstart

Install the packages, connect a feed, and render the first BTC chart.

Installation

Package roles, peer dependencies, and the intended install shape.

React

Use the typed Chart component with feeds, studies, volume, and themes.

Vue

Embed the typed MmChart component in Vue 3 products.

Next.js

Render WebGL charts in client components and App Router routes.

Data feeds

Bring your own candles, trades, order book, footprint, and markers.

Streaming

Use SSE by default or the keyed WebSocket client for live updates.

Indicators

Attach SMA, EMA, VWAP, RSI, MACD, and built-in study factories.

Custom indicators

Author pure compute functions with defineIndicator and typed params.

ChartScript

Compile safe user formulas into one chart indicator with many output lines.

Order-flow layers

Footprint, volume profile, heatmap, and marker layer entry points.

Drawing tools

Add, select, drag, delete, export, and import chart annotations.

Replay

Play, pause, seek, and step through candle-first replay sessions.

Replay sessions

Export, import, and share versioned replay setup manifests without market-data arrays.

Replay events

Synchronize whale, inferred liquidation, and funding-change markers with replay sessions.

Trade replay

Use bounded recent HL trade history for replay tapes without claiming full tick storage.

Footprint replay

Derive short-window footprint bars from bounded normalized trades for replay previews.

Orderbook replay

Replay sparse depth-aware HL orderbook snapshots without claiming L2 delta reconstruction.

Themes

Pass white-label ThemeTokens and keep chart colors product-native.

Performance

WebGL rendering notes, benchmark route, and large-series guidance.

Capability status

Launch-readiness matrix for shipped, RC-ready, bounded, and planned surfaces.

API reference

Confirmed chart, feed, study, theme, React, Vue, and socket exports.

Try it live

These routes prove the docs against the real developer surfaces in the app instead of leaving the SDK as static copy.

Package map

The npm package surface is prepared for release-candidate review. This docs page does not publish packages or change public SDK behavior.

@mmflow/chartsFramework-agnostic WebGL engine with createChart, createDataFeed, defineIndicator, ChartScript, replay/event/trade/footprint/orderbook helpers, built-in studies, theme tokens, drawing tools, and order-flow layer handles.
@mmflow/reactTyped React Chart component, useIndicator hook, and re-exported chart authoring APIs.
@mmflow/vueTyped Vue 3 MmChart component and re-exported chart authoring APIs.
@mmflow/indicatorsTree-shakeable indicator math including SMA, EMA, VWAP, RSI, MACD, Bollinger Bands, stochastic, MFI, and ADX.
@mmflow/sdkcreateMmflowFeed for REST plus SSE chart feeds, fetchHistoryCandles/fetchHistoryEvents/fetchHistoryTrades/fetchHistoryFootprint/fetchHistoryOrderbookSnapshots/fetchHistoryStatus for replay windows and data quality, and MmflowSocket for keyed WebSocket streams.