Export HTML

Render the current design as production-ready HTML. Use it for sending emails, publishing web pages, or displaying popups.

React

import { useRef } from 'react';
import { PexelizeEditor, PexelizeEditorRef } from '@pexelize/react-editor';

function EmailEditor() {
  const editorRef = useRef<PexelizeEditorRef>(null);

  const handleExportHtml = async () => {
    const html = await editorRef.current?.editor?.exportHtml();
    // Send to your email API
    await fetch('/api/emails/send', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ html, to: 'user@example.com' }),
    });
  };

  return (
    <>
      <PexelizeEditor
        ref={editorRef}
        editorKey="pk_your_key"
        editorMode="email"
      />
      <button onClick={handleExportHtml}>Send Email</button>
    </>
  );
}

Vue

<template>
  <PexelizeEditor
    ref="editorRef"
    editor-key="pk_your_key"
    editor-mode="email"
  />
  <button @click="handleExportHtml">Send Email</button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { PexelizeEditor } from '@pexelize/vue-editor';

const editorRef = ref<InstanceType<typeof PexelizeEditor>>();

async function handleExportHtml() {
  const html = await editorRef.value?.exportHtml();
  await fetch('/api/emails/send', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ html, to: 'user@example.com' }),
  });
}
</script>

Angular

import { Component, ViewChild } from '@angular/core';
import { PexelizeEditorComponent } from '@pexelize/angular-editor';
import type { PexelizeSDK } from '@pexelize/editor-types';

@Component({
  selector: 'app-email-editor',
  standalone: true,
  imports: [PexelizeEditorComponent],
  template: `
    <pexelize-editor
      #editor
      editorKey="pk_your_key"
      editorMode="email"
      (ready)="onReady($event)"
    ></pexelize-editor>
    <button (click)="handleExportHtml()">Send Email</button>
  `,
})
export class EmailEditorComponent {
  @ViewChild('editor') editorComp!: PexelizeEditorComponent;
  private sdk: PexelizeSDK | null = null;

  onReady(sdk: PexelizeSDK) {
    this.sdk = sdk;
  }

  async handleExportHtml() {
    const html = await this.sdk?.exportHtml();
    await fetch('/api/emails/send', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ html, to: 'user@example.com' }),
    });
  }
}

Vanilla JS

<div id="editor-container" style="height: 600px;"></div>
<button id="send-btn">Send Email</button>

<script src="https://sdk.pexelize.com/latest/pexelize-sdk.min.js"></script>
<script>
  pexelize.init({
    containerId: 'editor-container',
    editorKey: 'pk_your_key',
    editorMode: 'email',
  });

  document.getElementById('send-btn').addEventListener('click', async () => {
    const html = await pexelize.exportHtml();
    await fetch('/api/emails/send', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ html, to: 'user@example.com' }),
    });
  });
</script>

One-way export

HTML is a one-way export. You cannot load HTML back into the editor. Always persist the design JSON for round-trip editing.

Export options

Pass options to exportHtml() to control the output:

const html = await editor.exportHtml({
  title: 'My Landing Page',  // Sets <title> tag (web/popup mode only, ignored in email)
  minify: true,               // Minified output (plan-gated)
});

Option	Type	Default	Description
title	string	undefined	Page <title> for web and popup mode. Ignored in email mode.
minify	boolean	false	Request minified HTML (plan-gated feature).

Export plain text

For email campaigns, you need a plain-text fallback. exportPlainText() strips all HTML and returns the text content:

React

const handleSendEmail = async () => {
  const editor = editorRef.current?.editor;
  const [html, plainText] = await Promise.all([
    editor?.exportHtml(),
    editor?.exportPlainText(),
  ]);

  await fetch('/api/emails/send', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ html, plainText, to: 'user@example.com' }),
  });
};

Vue

async function handleSendEmail() {
  const editor = editorRef.value;
  const [html, plainText] = await Promise.all([
    editor?.exportHtml(),
    editor?.exportPlainText(),
  ]);

  await fetch('/api/emails/send', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ html, plainText, to: 'user@example.com' }),
  });
}

Angular

async handleSendEmail() {
  const [html, plainText] = await Promise.all([
    this.sdk?.exportHtml(),
    this.sdk?.exportPlainText(),
  ]);

  await fetch('/api/emails/send', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ html, plainText, to: 'user@example.com' }),
  });
}

Vanilla JS

const [html, plainText] = await Promise.all([
  pexelize.exportHtml(),
  pexelize.exportPlainText(),
]);

await fetch('/api/emails/send', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ html, plainText, to: 'user@example.com' }),
});

Download HTML as a file

Trigger a browser download of the exported HTML:

React

const handleDownload = async () => {
  const html = await editorRef.current?.editor?.exportHtml();
  if (!html) return;

  const blob = new Blob([html], { type: 'text/html' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'email-template.html';
  a.click();
  URL.revokeObjectURL(url);
};

Vue

async function handleDownload() {
  const html = await editorRef.value?.exportHtml();
  if (!html) return;

  const blob = new Blob([html], { type: 'text/html' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'email-template.html';
  a.click();
  URL.revokeObjectURL(url);
}

Angular

async handleDownload() {
  const html = await this.sdk?.exportHtml();
  if (!html) return;

  const blob = new Blob([html], { type: 'text/html' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'email-template.html';
  a.click();
  URL.revokeObjectURL(url);
}

Vanilla JS

async function handleDownload() {
  const html = await pexelize.exportHtml();

  const blob = new Blob([html], { type: 'text/html' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'email-template.html';
  a.click();
  URL.revokeObjectURL(url);
}

Method reference

Method	Returns	Description
exportHtml(options?)	Promise<string>	Export the design as a complete HTML document string
exportPlainText()	Promise<string>	Export the design as plain text (no HTML tags)

Next steps

• Export PDF, Image & ZIP — server-side rendering for images and PDFs
• Load & Save Designs — persist designs for round-trip editing
• Merge Tags — add dynamic personalization to exported HTML