Custom Rendering & Themes
Custom node renderers for type-aware styling, theme switching between Chrome presets and MUI-synced palettes, and a real-world structured product deep dive.
Custom nodeRendererColor-coded values: numbers (blue), booleans (orange), null (red), ISINs (highlighted badge)
number
boolean
null / undefined
ISIN
- ▶product: {productId: "SP-2026-4821", type: "Barrier Reverse Convertible", issuer: Object, underlying: Array(3), terms: Object…}
Theme SwitchingToggle between built-in Chrome themes and a custom MUI-synced theme
- ▶product: {productId: "SP-2026-4821", type: "Barrier Reverse Convertible", issuer: Object, underlying: Array(3), terms: Object…}
Structured Product Deep DiveBarrier Reverse Convertible with 3 underlyings — sensible expandPaths preset reveals pricing & terms
expandPaths: ["$","$.underlying","$.terms","$.pricing","$.pricing.impliedVol","$.pricing.correlation"]
- ▶structuredProduct: {productId: "SP-2026-4821", type: "Barrier Reverse Convertible", issuer: Object, underlying: Array(3), terms: Object…}