Crypto Terminal Starter

Pick one example to view or copy:

Chart plus toolbar, themes, and drawing tools.

import { useEffect, useRef, useState } from "react";
import { createChart, type ChartInstance } from "@efixdata/exeria-chart";
import { ChartUI } from "@efixdata/exeria-chart-ui-react";
import { BinanceAdapter } from "@efixdata/connector-binance";

const SYMBOL = "BTCUSDT";
const INTERVAL = "1h";

export default function App() {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [chart, setChart] = useState<ChartInstance | null>(null);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    let disposed = false;
    const adapter = new BinanceAdapter();
    const instance = createChart({
      container,
      instrument: { symbol: SYMBOL, description: "BTC/USDT" },
      themeVariant: "dark",
      dataAdapter: adapter,
    });

    instance.init();
    instance.setMainDrawMode("OHLC");

    void (async () => {
      await instance.loadData(SYMBOL, { interval: INTERVAL, limit: 1000 });
      instance.addScript("EMA");
      instance.addScript("RSI");
      instance.subscribeToUpdates(SYMBOL);
      if (!disposed) setChart(instance);
    })();

    return () => {
      disposed = true;
      instance.unsubscribeFromUpdates();
      adapter.disconnect?.();
      instance.destroy();
    };
  }, []);

  return (
    <main style={{ height: "100vh", background: "#0b0e14" }}>
      <ChartUI chart={chart}>
        <div ref={containerRef} style={{ width: "100%", height: "100%" }} />
      </ChartUI>
    </main>
  );
}

Commands to run in your terminal

# After downloading and unzipping the starter from this page:

cd exeria-crypto-terminal   # or whatever you named the folder
npm install
npm run dev

# Open the URL printed in the terminal (usually http://localhost:5173).
# Edit src/App.tsx — save and the browser refreshes.

# ── Starting from scratch instead? ──
# npm create vite@latest my-crypto-terminal -- --template react-ts
# cd my-crypto-terminal
# npm install @efixdata/exeria-chart @efixdata/exeria-chart-ui-react @efixdata/connector-binance
# Paste a snippet from above into src/App.tsx, then: npm run dev