Props panel in preview UI

[craigfrancies]

Goals

• Allow developers to view the props passed to the email preview
• (Nice to have) Allow live editing of those props to quickly test different inputs

Background

At the moment, there's no way to see what props are being passed to the previewed email via the preview tool.

Being able to view the props would be helpful when checking the preview. Editing them would make it faster to test things like names, codes, or other dynamic values - without needing to jump into the editor, for now code users.

There are some similar ideas in tools like Storybook, which allow real-time prop changes via controls.

Proposal

A simple side panel in the preview UI that:

• Shows the current props
• (Optional) Allows editing them inline or via a JSON view
• Updates the preview live on change

Here’s a quick mockup of what I was thinking it would look like:

I'd be happy to help with UI design and might be able to contribute on the frontend side if the idea is accepted.

[robbieaverill]

This could either include all props, or only PreviewProps. Either way, it would be great to have.

[KasperiP]

I would prefer having the ability to define multiple variants of preview props (for example, an array of preview props) at the template level, with the UI allowing users to switch between them. It’s quite common for a single email template to look very different depending on the payload.

[tanner-oura]

I would be totally happy with either approach. This one definitely seems easier.