Skip to content
Frontmail Docs

Examples

The public SDK repository frontmail-dev/frontmail-js contains a runnable example for every SDK in the examples/ directory. Each one is a contact form with validation errors, a held-message state and Turnstile – the same flow as the contact form tutorial.

Example Stack Shows
examples/vanilla Plain HTML + @frontmail/browser (CDN) sendForm, Turnstile, file attachment, getStatus polling
examples/react Vite + React + @frontmail/react FrontmailProvider, FrontmailForm, useSendEmail, typed params
examples/react-native Expo + React Native + @frontmail/react-native FrontmailProvider, useSendEmail, TurnstileWebView, limitRate with AsyncStorage
examples/vue Vite + Vue 3 + @frontmail/vue plugin, <FrontmailForm>, useSendEmail
examples/svelte Vite + Svelte 5 + @frontmail/svelte createFrontmail, use:frontmailForm
examples/node Node.js + @frontmail/node send, sendBatch, history, idempotency keys

Run an example

Section titled “Run an example”
Terminal window
git clone https://github.com/frontmail-dev/frontmail-js.git
cd frontmail-js
corepack enable                 # pnpm 10
pnpm install
pnpm build                      # builds the SDKs the examples link to
echo "VITE_FRONTMAIL_PUBLIC_KEY=pk_…" > examples/react/.env.local   # + service ID and template ID
pnpm --filter @frontmail/example-react dev

Each example’s README lists the template params it expects. The quickest way to get a matching template is the gallery’s Contact form.

Snippets from the dashboard

Section titled “Snippets from the dashboard”

Every template page in the dashboard has a Snippet tab that generates ready-to-paste code for vanilla JS, React, Vue, Svelte, Node and cURL, with your IDs and all template params (including types and sample values) already filled in.

Framework notes

Section titled “Framework notes”
  • Next.js / Nuxt / SvelteKit: send from client components with the public key, or from server actions / API routes with the private key and @frontmail/node.
  • Static site generators (Astro, Hugo, Eleventy, Jekyll): use the CDN build and sendForm.
  • WordPress and no-code builders: paste the CDN snippet into a custom HTML block.
  • Mobile apps: use @frontmail/react-native with the public key and turn on Allow mobile apps, or call the REST API from your backend with a private key. Never put a private key into an app.