mmflow Charts
Quickstart
Install the chart SDK packages, connect a mmflow feed, and render your first live BTC chart with confirmed React exports.
Install the SDK packages
Use the intended package install shape for the chart engine, framework binding, and mmflow feed client; use local workspace linking until registry publishing is completed.
Render in a client surface
The engine is WebGL and browser-only, so React and Next.js examples should run in client components.
Connect a feed
createMmflowFeed supplies candles and live updates; custom feeds can implement the same DataFeed contract.
# 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 }}
/>
);
}What this example uses
The example imports the typed React Chart component, the mmflow feed adapter, and built-in study factories that are exported by the chart package.
Chart
The React wrapper constructs the WebGL engine, mounts candle and volume series, and forwards the feed.
createMmflowFeed
The SDK feed fetches candle history and subscribes to live trade updates through the configured transport.
smaStudy and rsiStudy
Built-in indicator factories return ready-to-attach indicator instances for the Chart indicators prop.
Continue building
Move through the chart SDK docs without leaving the developer flow.