Plan Designer
Property insurance · data-driven provision tree
About this demo
The plan-design step of the Zen Insurance platform. A plan-design screen first built in plain JavaScript for a group-benefits insurer about two decades ago, recreated in 2026 with new code: a data-driven tree, one delegated listener, rules as data, accessible expand/collapse. Mock data throughout.
Data, not screens
Each product is a JSON tree. A new product is new data.
One listener
A single delegated change/input handler serves every field.
Rules as data
Declarative predicates, evaluated on change and at submit. No eval.
Live rating
Premium reprices on every change (typing debounced 250 ms).
Try it: in Homeowners, set ADU rented to a tenant to Yes, or Umbrella to $1M, and watch nested provisions appear. Press i on any row for its definition.
Submitted payload (JSON)
The selected tree, serialized. Change some fields, then restore them from this payload to see the round trip.