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.
# 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"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.
Interactive playground
Configure a live chart and copy the generated React embed path.
Render benchmark
Exercise the WebGL renderer with large synthetic OHLCV sets.
Chart examples
Jump into framework guides, feeds, indicators, layers, and themes.
Capability status
See which launch surfaces are shipped, RC-ready, bounded, or planned.
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.