Example using Storybook HTML, no react

index.stories.tsx

import { Story, Meta } from '@storybook/html';
import storybookEmail, { StorybookEmailArgs } from '../storybook-email';

export default {
  title: 'Emails',
} as Meta;

const Template: Story<StorybookEmailArgs> = (args) => storybookEmail(args);

export const CadReminder = Template.bind({});
CadReminder.args = {
  template: 'cadReminder',
  variables: {
    buttonText: 'Sync device',
    onDesktopOrTabletDevice: true,
    anotherDeviceURL:
      'http://localhost:3030/connect_another_device?utm_medium=email&utm_campaign=fx-cad-reminder-first&utm_content=fx-connect-device',
    iosURL: '',
    androidURL: '',
  },
};

package.json

{
  "name": "fxa-auth-server",
  "version": "1.209.0",
  "description": "Firefox Accounts, an identity provider for Mozilla cloud services",
  "bin": {
    "fxa-auth": "./bin/key_server.js"
  },
  "directories": {
    "test": "test"
  },
  "scripts": {
    "build": "tsc --build && cp -R config fxa-content-server-l10n lib scripts dist/fxa-auth-server",
    "bump-template-versions": "node scripts/template-version-bump",
    "audit": "npm audit --json | audit-filter --nsp-config=.nsprc --audit=-",
    "lint": "eslint .",
    "postinstall": "../../_scripts/clone-l10n.sh fxa-auth-server",
    "start": "scripts/start-local.sh",
    "stop": "pm2 stop pm2.config.js",
    "restart": "pm2 restart pm2.config.js",
    "test": "VERIFIER_VERSION=0 scripts/test-local.sh",
    "test-ci": "scripts/test-local.sh && npm run test-e2e",
    "test-e2e": "NODE_ENV=dev mocha -r ts-node/register test/e2e",
    "test-scripts": "NODE_ENV=dev mocha -r ts-node/register test/scripts --exit",
    "test-remote": "MAILER_HOST=restmail.net MAILER_PORT=80 CORS_ORIGIN=http://baz mocha -r ts-node/register --timeout=300000 test/remote",
    "format": "prettier --write --config ../../_dev/.prettierrc '**'",
    "gen-keys": "ts-node ./scripts/gen_keys.js; ts-node ./scripts/oauth_gen_keys.js; ts-node ./scripts/gen_vapid_keys.js",
    "write-emails": "node -r ts-node/register ./scripts/write-emails-to-disk.js",
    "clean-up-old-ci-stripe-customers": "ts-node ./scripts/clean-up-old-ci-stripe-customers.js",
    "paypal-processor": "CONFIG_FILES='config/secrets.json' ts-node ./scripts/paypal-processor.ts",
    "subscription-reminders": "CONFIG_FILES='config/secrets.json' ts-node ./scripts/subscription-reminders.ts",
    "write-templates": "ts-node lib/senders/emails/render-to-disk.ts",
    "maildev-preview": "ts-node lib/senders/emails/preview-in-maidev.ts",
    "start-mjml": "ts-node lib/senders/emails/bin/mjml-sever.ts",
    "storybook": "start-storybook -p 6007 --no-version-updates",
    "storybook-preview": "npm-run-all -p start-mjml storybook"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/mozilla/fxa.git"
  },
  "bugs": "https://github.com/mozilla/fxa/issues/",
  "homepage": "https://github.com/mozilla/fxa/tree/main/packages/fxa-auth-server",
  "license": "MPL-2.0",
  "author": "Mozilla (https://mozilla.org/)",
  "readmeFilename": "README.md",
  "dependencies": {
    "@google-cloud/firestore": "^4.12.3",
    "@hapi/hapi": "^20.1.4",
    "@hapi/hawk": "^8.0.0",
    "@hapi/hoek": "^9.2.0",
    "@hapi/joi": "^15.1.1",
    "@sentry/node": "^6.7.2",
    "@type-cacheable/core": "^5.2.0",
    "@type-cacheable/ioredis-adapter": "^5.2.0",
    "@types/ejs": "^3.0.6",
    "@types/mjml": "^4.7.0",
    "ajv": "^6.12.2",
    "aws-sdk": "^2.934.0",
    "base64url": "3.0.1",
    "buf": "0.1.1",
    "buffer-equal-constant-time": "1.0.1",
    "cldr-core": "^39.0.0",
    "cldr-localenames-full": "39.0.0",
    "commander": "2.18.0",
    "convict": "^6.1.0",
    "convict-format-with-moment": "^6.0.1",
    "convict-format-with-validator": "^6.0.1",
    "ejs": "^3.1.6",
    "email-addresses": "4.0.0",
    "fxa-geodb": "workspace:*",
    "fxa-jwtool": "^0.7.2",
    "fxa-shared": "workspace:*",
    "google-libphonenumber": "^3.2.21",
    "handlebars": "^4.7.7",
    "hapi-error": "^2.3.0",
    "hkdf": "0.0.2",
    "hot-shots": "^8.3.2",
    "i18n-abide": "0.0.26",
    "ioredis": "^4.27.6",
    "jed": "0.5.4",
    "jsonwebtoken": "^8.5.1",
    "keyv": "4.0.3",
    "lodash": "^4.17.21",
    "luxon": "^1.27.0",
    "memcached": "^2.2.2",
    "mjml": "^4.10.1",
    "moment-timezone": "^0.5.33",
    "mozlog": "^3.0.2",
    "mysql": "^2.18.1",
    "mysql-patcher": "0.7.0",
    "node-uap": "git://github.com/mozilla-fxa/node-uap.git#96dc1f9f224422ec184395b6408cd1fc40ee452a",
    "node-zendesk": "^2.1.0",
    "nodemailer": "^6.6.2",
    "otplib": "^11.0.1",
    "p-retry": "^4.2.0",
    "pem-jwk": "^2.0.0",
    "po2json": "0.4.5",
    "poolee": "^1.0.1",
    "punycode.js": "2.1.0",
    "qrcode": "^1.4.4",
    "request": "^2.88.2",
    "safe-regex": "^2.1.1",
    "safe-url-assembler": "1.3.5",
    "sandboxed-regexp": "^0.3.0",
    "stripe": "^8.156.0",
    "superagent": "^6.1.0",
    "typedi": "^0.8.0",
    "typescript": "^4.2.4",
    "uuid": "^8.3.2",
    "verror": "^1.10.0",
    "web-push": "3.4.4"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@storybook/addon-actions": "^6.3.0",
    "@storybook/addon-docs": "^6.3.2",
    "@storybook/addon-links": "^6.3.0",
    "@storybook/addons": "^6.3.0",
    "@storybook/html": "^6.3.3",
    "@types/babel__core": "7.1.14",
    "@types/chai": "^4.2.18",
    "@types/convict": "^5.2.2",
    "@types/hapi__hapi": "^19.0.3",
    "@types/ioredis": "^4.26.4",
    "@types/joi": "^14.3.3",
    "@types/jsonwebtoken": "^8.5.1",
    "@types/jws": "^3.2.3",
    "@types/lodash": "^4",
    "@types/luxon": "^1",
    "@types/memcached": "^2.2.6",
    "@types/mocha": "^8.2.2",
    "@types/nock": "^11.1.0",
    "@types/node": "^15.12.2",
    "@types/node-zendesk": "^2.0.2",
    "@types/nodemailer": "^6.4.2",
    "@types/request": "2.48.5",
    "@types/safe-regex": "1.1.2",
    "@types/uuid": "^8.3.0",
    "@types/verror": "^1.10.4",
    "@types/webpack": "5.28.0",
    "acorn": "^8.0.1",
    "audit-filter": "^0.5.0",
    "babel-loader": "^8.2.2",
    "binary-split": "1.0.5",
    "chai": "^4.3.4",
    "eslint": "^7.29.0",
    "eslint-plugin-fxa": "^2.0.2",
    "fxa-auth-db-mysql": "workspace:*",
    "fxa-shared": "workspace:*",
    "grunt": "^1.4.1",
    "grunt-cli": "^1.4.3",
    "grunt-contrib-copy": "1.0.0",
    "grunt-copyright": "0.3.0",
    "grunt-eslint": "^23.0.0",
    "grunt-newer": "1.3.0",
    "jsxgettext-recursive-next": "1.1.0",
    "jws": "4.0.0",
    "keypair": "1.0.3",
    "leftpad": "0.0.1",
    "load-grunt-tasks": "^5.1.0",
    "lodash.chunk": "4.2.0",
    "lodash.pick": "4.4.0",
    "mailparser": "0.6.1",
    "mkdirp": "0.5.1",
    "mocha": "^9.0.1",
    "mocha-junit-reporter": "^2.0.0",
    "moment": "^2.29.1",
    "nock": "^13.1.0",
    "npm-run-all": "^4.1.5",
    "nyc": "^15.1.0",
    "pm2": "^5.1.0",
    "prettier": "^2.3.1",
    "proxyquire": "^2.1.3",
    "read": "1.0.7",
    "rimraf": "^3.0.2",
    "simplesmtp": "0.3.35",
    "sinon": "^9.0.3",
    "through": "2.3.8",
    "ts-node": "^10.0.0",
    "typescript": "^4.2.4",
    "webpack": "^4.43.0",
    "webpack-watch-files-plugin": "^1.1.0",
    "ws": "^7.5.0"
  }
}

storybook-email.ts

export interface StorybookEmailArgs {
  template: string;
  variables: Record<string, any>;
}

export const storybookEmail = ({
  template,
  variables,
}: StorybookEmailArgs): HTMLDivElement => {
  const container = document.createElement('div');
  container.innerHTML = 'Loading email...';

  renderUsingMJML({ template, variables })
    .then((result) => {
      container.innerHTML = result;
    })
    .catch((error: Error) => {
      container.innerHTML = `Error loading email: ${error.message}`;
    });

  return container;
};

async function renderUsingMJML({
  template,
  apiUrl = 'http://localhost:8192',
  variables,
}: {
  template: string;
  apiUrl?: string;
  variables: Record<string, any>;
}): Promise<string> {
  const resp = await fetch(apiUrl, {
    method: 'POST',
    body: JSON.stringify({
      template,
      ...variables,
    }),
  });
  return await resp.text();
}

export default storybookEmail;