Get started →

This section is a set of copy-pasteable, working examples — pick your frontend framework, then wire up storage, test email, and (if you need it) server-side rendering.

How the pieces fit together

A typical production setup uses three of Maildeno’s pieces together:

@maildeno/editor  (browser)         →  storageAdapter        →  your API / DB / object storage
        ↓ onSendTestEmail
your backend                        →  email provider (Postmark, Resend, SES…)

@maildeno/renderer (backend, optional)  →  render saved template  →  email provider

The editor never talks to a backend on its own — every network call is one you write, through storageAdapter or onSendTestEmail. @maildeno/renderer is separate again: it’s for rendering a saved template server-side (a scheduled send, a transactional email), not something the editor calls into directly.

Framework quickstarts

Each guide covers installation, mounting, sizing the container, and teardown for that framework’s lifecycle model.

Framework Notes

Vue 3

Native <EmailEditor /> component, plus the init() path for manual control.

React

init() + useRef/useEffect, with the StrictMode double-mount guard.

Next.js

React, plus next/dynamic with ssr: false to keep the editor out of server rendering.

Nuxt

The Vue component behind <ClientOnly>, or init() with a dynamic import to avoid SSR.

Svelte & SvelteKit

onMount/onDestroy and a bound container element.

Angular

ViewChild + AfterViewInit/OnDestroy.

Astro

Plain <script> — no framework directive, no island.

Vanilla JS (Vite)

The framework-agnostic pattern everything else above is built on.
Building on something not listed here — Solid, Qwik, a custom element host, a CMS admin panel? Start with Vanilla JS, since every other guide is a thin lifecycle wrapper around that same init() call.

Backend integration guides

Guide Covers

Storage adapters

The storageAdapter interface, plus a full S3 image-upload example (dev and production/presigned variants).

Test email integration

onSendTestEmail, a Postmark backend, and swapping in Resend/SendGrid/SES.

Server-side rendering

Using @maildeno/renderer in Express to render a saved template for a real (non-test) send. Covers mergeTags/context, baseDir as a security boundary, and the render-then-send pattern shared by every framework below.

@maildeno/renderer in other backend frameworks

Same core render() call, wired into each framework’s request lifecycle:

Framework Notes

NestJS

A RenderService + controller, with RenderError codes mapped to Nest’s HTTP exceptions.

Fastify

A render plugin/route, with RenderError codes mapped to reply status codes.

Next.js (Route Handlers)

Requires the Node.js runtime, not Edge — engine.wasm needs real filesystem access.

AWS Lambda / Serverless

Runtime compatibility table, plus loading templates from S3 instead of bundled files.

Where to go next