DocumentaciónSDK en GitHub

Documentación Guías

Generar HTML desde JSON

Genera HTML y texto personalizados desde tu backend sin montar un editor.

En esta página

1. Carga el documento guardado

Carga el EmailDocument completo guardado con onDocumentChange. El renderizado admite las versiones 1 y 2 del esquema. Envía el propio JSON; un ID de plantilla o borrador no lo sustituye.

2. Solicita el HTML

Envía un POST a https://api.weavour.com/editors/:editorKey/render con document y, si hace falta, mergeValues y conditionValues. Las llamadas del servidor no necesitan sesión, identificadores de usuario ni cabecera Origin. Las del navegador requieren un origen autorizado.

typescript
// Run on your backend. email.json is the complete saved EmailDocument.
import { readFile } from 'node:fs/promises';
import type { EmailDocument } from '@weavour/editor';

async function renderSavedEmail(
  document: EmailDocument,
  mergeValues: Record<string, string> = {},
  conditionValues: Record<string, boolean> = {},
) {
  const editorKey = 'YOUR_PUBLIC_EDITOR_KEY';
  const response = await fetch(
    `https://api.weavour.com/editors/${editorKey}/render`,
    {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ document, mergeValues, conditionValues }),
    },
  );
  const result = await response.json();
  if (!response.ok) {
    throw Object.assign(new Error(result.error ?? 'Email rendering failed'), {
      status: response.status,
      issues: result.issues,
      retryAfter: response.headers.get('Retry-After'),
    });
  }
  return result as {
    html: string;
    text: string;
    subject: string;
    preheader: string;
    rendererVersion: string;
  };
}

const savedEmail: EmailDocument = JSON.parse(await readFile('./email.json', 'utf8'));
const { html, text, subject, preheader } = await renderSavedEmail(
  savedEmail,
  { first_name: 'Alex' }, // Use the stable IDs of tags in your document.
);
// Submit these fields through your own email delivery provider.
console.log(html);

3. Proporciona valores del destinatario

mergeValues asocia los ID de etiquetas con cadenas: { first_name: "Alex" }. Usa el ID, no {{first_name}}. Proporciona cada valor usado en contenido visible, asunto y preencabezado. No se sustituyen valores de ejemplo.

Los valores de texto se escapan en HTML. Los valores URL deben ocupar un campo de enlace completo compatible y usar HTTP, HTTPS, mailto o tel. Si faltan valores, se devuelve 422 con el ID y la ubicación.

4. Proporciona resultados de condiciones

Para documentos condicionales, evalúa las reglas en tu backend. Pasa los resultados booleanos en conditionValues por ID. Un padre falso elimina todo su diseño; los valores usados solo dentro no son necesarios. Si falta el resultado de una regla visible, se devuelve 422.

typescript
// Evaluate your application's rules before calling the renderer.
const output = await renderSavedEmail(
  savedEmail,
  { first_name: 'Alex' },
  { free_account: true }, // Condition ID -> boolean, never an expression.
);
// output.html and output.text contain only matching layouts.

5. Envía el resultado

La respuesta contiene html, text, subject, preheader y rendererVersion. Envía los campos del email con tu proveedor. Renderizar no guarda ni envía. Las imágenes y los temporizadores deben tener ya URL públicas.

Límites y errores

Las imágenes de fondo de diseños y el CSS global personalizado no son compatibles. Para los fondos, abre el email en el editor y usa exportHTML(). El contenido no compatible devuelve un error.

Petición máxima: 1 000 000 bytes UTF-8. Documentos: 2 000 nodos renderizados, profundidad 30. Valores: 1 000 cadenas de hasta 8 192 caracteres cada una.

Estado HTTPAcción
400 / 415Corrige el JSON, los tipos de los valores o Content-Type.
401 / 403Comprueba la clave de editor y, en el navegador, el origen permitido.
413Reduce el tamaño de la solicitud o la complejidad del documento.
422Consulta error e issues; corrige los valores que falten, el documento o el contenido incompatible.
429 / 503Reintenta con espera progresiva y aleatoria, respetando Retry-After si se incluye.
¿Necesitas ayuda? Escríbenos