svelte-mjml-plugin

A Svelte preprocessor that allows you to write MJML directly inside your Svelte components. It compiles MJML to HTML while intelligently preserving Svelte's logic syntax ({#if}, {#each}, etc.), making it perfect for building dynamic responsive emails.

Features

• Inline MJML: Write MJML tags directly in your .svelte files.
• Svelte Logic Support: Use Svelte control blocks inside MJML tags without breaking the MJML compiler.
• Vite Compatible: Works seamlessly with SvelteKit and Vite-based Svelte projects.
• Configurable: Customize the MJML compiler options and the wrapping tag.

Installation

npm install -D svelte-mjml-plugin mjml

Note: mjml is a peer dependency.

Setup

Add the preprocessor to your svelte.config.js:

import { mjmlPreprocessor } from "svelte-mjml-plugin";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: [
    mjmlPreprocessor({
      // Optional: change the tag name (default is 'mjml')
      tagName: "mjml",
      // Optional: MJML compilation options
      mjmlOptions: {
        validationLevel: "soft",
        minify: true,
      },
    }),
  ],
  // ... rest of config
};

export default config;

Usage

In your .svelte component, wrap your MJML code in the <mjml> tag:

<script>
  let name = "Guest";
  let items = ["Apple", "Banana", "Cherry"];
</script>

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text font-size="20px">Hello, {name}!</mj-text>

        {#if items.length > 0}
          <mj-text>Your list:</mj-text>
          {#each items as item}
            <mj-text>- {item}</mj-text>
          {/each}
        {:else}
          <mj-text>Your list is empty.</mj-text>
        {/if}
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

How it Works

The preprocessor finds <mjml> blocks, extracts the content, and:

1. Replaces Svelte logic blocks ({#...}, {@...}, etc.) with temporary placeholders inside <mj-raw> tags.
2. Compiles the MJML to static HTML.
3. Re-inserts the Svelte logic blocks back into the compiled HTML.
4. Wraps the static HTML segments in {@html ...} to ensure Svelte doesn't escape the compiled MJML structure.

Options

| Option | Type | Default | Description | | ------------- | -------- | -------- | ---------------------------------------------------------- | | tagName | string | 'mjml' | The tag used to identify MJML blocks in your Svelte files. | | mjmlOptions | object | {} | Options passed directly to the mjml2html compiler. |

License

MIT