G10 FX Multi-Leg Option Pricer

I turned a small pricing prototype into an interactive browser application so I could explore how multi-leg FX option structures are assembled and how their aggregate risk changes with each leg.

The application supports calls, puts, straddles and strangles across a static G10 market snapshot. Each structure can contain up to five configurable legs with buy or sell direction, notional and strike choices.

Everything runs locally in the browser: pricing, Greeks, leg aggregation and the expiry payoff chart. The complete HTML, CSS, JavaScript and market-data snapshot are included in the site.

What I wanted to understand

Make vanilla FX option structures tangible through a small tool that can be opened and used without a Python environment or backend.

What the project covers

1. Load a static spot, forward-points and ATM-volatility snapshot for nine G10 pairs.
2. Apply a simplified forward Black model to each vanilla option leg.
3. Aggregate premium, delta, delta notional and vega across up to five long or short legs.
4. Plot the structure's profit and loss at expiry directly in the browser.

const premium = blackForwardPrice(
  forward, strike, volatility, maturity, optionType
);

const strategyPnl = legs.reduce(
  (total, leg) => total + leg.side * leg.notional * payoff(leg, spotAtExpiry),
  0
);

What the result does not claim

The prototype uses static data and one ATM volatility for every strike. It excludes live market data, full discount curves, smile interpolation and the complete set of premium-adjusted FX delta conventions.