Conditional Rendering
Every element in a video renders no matter what. That one assumption is why marketers keep a folder full of near-identical templates.
HyperFrames compositions are declarative in the best way: what is in the HTML is what is in the video. Perfect for a fixed layout. It falls apart the moment the content is conditional.
A sale badge that should only appear when there is a discount. An avatar that exists for some customers and not others. An enterprise line that is wrong for everyone else. A call-to-action that depends on inventory. Today, each of those forks the whole composition. You end up maintaining five files that are ninety percent the same file.
So I prototyped the fix as a feature proposal: let the composition decide.
One composition, one dataset. The frame shows exactly the elements whose conditions evaluate true. Nothing above is a separate template. It is the same file deciding what to render.
Concept illustration. The proposed feature evaluates these expressions at render time and omits false branches from the exported video entirely.
01The duplication tax
The workaround for optional content is copies. Want a version with the badge and one without? Two compositions. Add a second optional element and you are at four. It scales in exactly the wrong direction, and it buries the one real layout under variations of itself. Change the brand color and you are editing it five times.
02The proposal
Borrow the idea every modern UI framework already settled on: conditional rendering. A declarative attribute that decides whether an element exists in the render.
<div if="discount > 0">
<DiscountBadge />
</div>True, it renders normally. False, it is omitted from the exported video entirely. The composition stays declarative. The output adapts to the data. An unless mirror handles the fallback case, so an avatar and its company-logo stand-in are two lines, not two templates.
<Avatar if="customer.avatar" />
<CompanyLogo unless="customer.avatar" />The same handle works for a CTA that follows stock, ratings that pick their own star row, or a whole <section if="showOutro"> that skips itself when the data says so.
<Button if="inventory > 0">Buy Now</Button>
<Button if="inventory == 0">Notify Me</Button>Keep the expression language deliberately small: the familiar comparisons (== != > < >= <= && || !) plus a few helpers (exists() empty() contains() startsWith() endsWith()). Small enough to stay deterministic, which matters when both humans and AI agents are generating these compositions.
03Where it earns its keep
Conditional rendering gets powerful the moment it meets a dataset. One composition, one row per output:
| Name | Discount | Avatar | Plan | CTA |
|---|---|---|---|---|
| John | 20% | Yes | Premium | Buy |
| Sarah | 0 | No | Free | Learn |
| Mike | 35% | Yes | Premium | Upgrade |
Same file, three finished videos. John gets the avatar, the discount badge, and a Buy CTA. Sarah hides the avatar, shows the company logo, and gets Learn More. No duplicate layouts. Just data flowing through one set of conditions.
04The pitch
I proposed this to the HyperFrames team alongside Data-Bound Video and Responsive Video. The three are one thread. Responsive Video unlocks the frame. Data-Bound Video unlocks live regions. Conditional rendering is the branch logic that makes both of them personal, the composition choosing what to show, per viewer, per row, per moment.
05The bigger picture
A video stops being a sealed file and becomes a composition plus data. The file was never the product. The composition is. Treat videos as fixed layouts and you ship decisions. Treat them as adaptive compositions and you ship options, and let the data, the device, and the viewer resolve the rest.
Status: spec proposed upstream. Prototype logic running in the demo above.