Case studiesLive implementation
A backtest workbench you can run locally in minutes: strategy presets, buy/sell markers, indicator panes, and an equity curve. Download the zip, edit React files, and grow it into your own analytics product.
Try the finished UI first — same layout you get in the downloadable starter. Strategies use bundled FX data; no API keys to start.
This page is your starting point: try the demo, download a small React project, run it on your machine, then change whatever you want. You do not need to understand the whole codebase on day one — follow the steps below and edit one file at a time.
New to React or charting? Follow this path once. After that, vibe-code whatever you want on top.
Open the live dashboard in another tab. Strategy presets, buy/sell markers, indicator panes, and an equity curve — no install yet.
Scroll to Starter code below and click Download ZIP. You get a ready-made Vite + React project with bundled EUR/USD candles — no need to clone this docs repo.
Unzip the folder, open your terminal app (Terminal on Mac, PowerShell on Windows), cd into the folder, and run npm install. You need Node.js 18+.
Run npm run dev. Your browser will show a local URL (usually http://localhost:5173) — open it. The chart loads EUR/USD H1 candles from public/data/eur-usd-h1.json and wires the default WMA/EMA composite strategy.
Open src/App.tsx in Cursor, VS Code, or any editor. Tweak indicator periods, swap presets, or add your own scripts — save the file and the page updates automatically. The snippets/ folder has copy-paste examples for Bollinger breakout, mean reversion, and equity curve wiring.
Prefer the browser? Use StackBlitz below — same workflow, no unzip step.
The starter is a real chart UI with bundled FX candles and built-in strategy scripts. Preset rankings and equity curves are demo backtests on purpose — so you can experiment safely before wiring your data and risk engine.
No API keys. Candles ship inside the zip; indicators wire programmatically.
Use the layout and script wiring; tune or replace presets with your own logic.
Point the chart at your data, add proprietary indicators, then connect execution.
Download a zip, or copy a snippet into your own app. The zip includes src/App.tsx, strategy wiring in src/mountQuantDashboard.ts, bundled EUR/USD candles in public/data/, and extra examples in snippets/.
Pick one example to view or copy:
Chart plus toolbar and the default WMA/EMA composite preset.
import { useEffect, useRef, useState } from "react";
import { type ChartInstance } from "@efixdata/exeria-chart";
import { ChartUI } from "@efixdata/exeria-chart-ui-react";
import { mountQuantDashboard } from "./mountQuantDashboard";
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;
let instance: ChartInstance | null = null;
void (async () => {
instance = await mountQuantDashboard(container);
if (!disposed) setChart(instance);
})();
return () => {
disposed = true;
instance?.destroy();
};
}, []);
return (
<main style={{ height: "100vh", background: "#0b1220" }}>
<ChartUI chart={chart}>
<div ref={containerRef} style={{ width: "100%", height: "100%" }} />
</ChartUI>
</main>
);
}# After downloading and unzipping the starter from this page: cd exeria-quant-analytics # 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-quant-dashboard -- --template react-ts # cd my-quant-dashboard # npm install @efixdata/exeria-chart @efixdata/exeria-chart-ui-react # Paste a snippet from the starter page into src/App.tsx, then: npm run dev