Visual Trader

Doesn't every trader use charts to make trading decisions? Then why is executing trades inherently separated from that chart?

This project bridges the gap between the visual side of trading and the execution side. Instead of using both side by side, here you can drop trades on the chart itself, or create shapes the interact with the asset price in a way that is not only visually interesting but also makes more complex trades and chains of trades easier to understand and possible to store for later use.

Key Features

• Shape Triggers: draw on the chart and attach conditions that execute trades (cross up/down, enter/exit/... => open Long/Short...)
• Strategy Builder: chain sets of trades together; store and load onto the chart later. Execute with a click.
• Visual blocks that update settings: instead of typing a % offset for a Trailing Stop, drag it onto the chart and drag the trade action block to where you think it belongs. Drag consecutive trades onto the chart and chain it up, shown visually by connecting lines. 
• Paper Trading Engine: Full position simulation with P&L tracking, faux slippage, margin calculation, and order execution. Stored locally so you can continue paper trading tomorrow.

 
Technical Highlights

Built with React + TypeScript. Integrated React Flow, an open-source library for building node-based UIs. React Flow gives performant canvas rendering for the trigger→action graph, flexible edge handling for connecting orders, and built-in pan/zoom—letting me focus on trading logic rather than reinventing graph vizualisation. The 'virtual execution layer' simulates a margin account: order lifecycle, leverage limits, slippage modeling, liquidation... which can give the user a near Kraken-like experience without actually losing (or gaining?) any money. For the scope of the project this all runs on localStorage but is ready to actually plug into the Kraken API + a backend setup. 

How It Works

• Setup: 
  
  git clone https://github.com/mrtnrs/visualtrader.git
  cd visualtrader
  npm install
  npm run dev
  
  
• Usage Example: adding a shape -> Action trigger (trade) -> Child action (trade): here we create a rectangle shape, couple two triggers to it (price exits top and price exists bottom). The bottom exit triggers a short to which we connect a Stop Loss and a Take Profit:
  
  
  
• Strategy builder screenshot: by dropping actions directly on the canvas you can chain "sets" of trades together, and save to deploy later at once:
  
  
  Demo & Documentation
  
  
• Live demo: https://visualtrader.pages.dev
• Short walkthrough video: https://youtu.be/qKbnBm60vr8
• Extensive Github README: https://github.com/mrtnrs/visualtrader
  
  
  Future Enhancements
  
  
• Integrate additional triggers (based on volume, order book, RSI...)
• Store PnL of trading sets (integrate trading results into visual elements)
• Integrate live Kraken API trading (it's ready to plug in)
• Adding server & database for full functionality
• Add alerts for trades and shape triggers
• Mobile Support