Allow to define dummy data / fixtures for dev ui previews #1802

MickL · 2026-07-20T08:05:54Z

MickL
Jul 20, 2026

Maizzle is amazing! Just wondering how to preview emails in the dev ui without any data. (btw. there is no word in the docs about how to add data to the mails, e.g. by use of props)

Minimal example of an email template:

<script setup lang="ts">
defineProps<{
  name: string;
}>();
</script>

<template>
  <Html>
    <Head />
    <Body>
      <Container>
        <Text>{{ $t('hello') }} {{ name }}!</Text>
      </Container>
    </Body>
  </Html>
</template>

Now my backend (pure Nitro v3 project) would call:

const result = await render(template, { name: 'Henry Henryson' });

Which works fine, BUT the dev UI will produce errors because name is undefined. Using withDefaults() is not an option as this may lead to embarrassing errors when props are forgotten.

Proposal
Create a compiler macro that only affects the dev ui. Something like:

<script setup lang="ts">
defineProps<{
  name: string;
}>();

defineMaizzleMock({
  name: 'Henry Henryson',
});
</script>

<template>
   ...
</template>

Or possibly create another wrapper to keep type safety, but that would result in a double wrapper when using withDefaults():

defineMaizzleMock(
  withDefaults(
    defineProps<{
      name: string;
      something?: boolean;
    }>(),
    {
      // Defaults
      something: true,
    },
  ),
  {
    // Mock, doesnt require optional props
    name: 'Henry Henryson',
  },
);

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Maizzle

Allow to define dummy data / fixtures for dev ui previews #1802

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Maizzle

Allow to define dummy data / fixtures for dev ui previews #1802

Uh oh!

Uh oh!

MickL Jul 20, 2026

Replies: 0 comments

MickL
Jul 20, 2026