Skip to main content

​
Overview

The getHTML method converts Yoopta editor content into HTML string format. It serializes blocks using plugin-defined HTML parsers and includes embedded JSON data for lossless copy/paste within Yoopta editors.

​
Usage

import { useYooptaEditor } from '@yoopta/editor';

function ExportButton() {
  const editor = useYooptaEditor();

  const handleExport = () => {
    const html = editor.getHTML(editor.children);
    console.log(html);
  };

  return <button onClick={handleExport}>Export to HTML</button>;
}

​
Signature

function getHTML(
  editor: YooEditor,
  content: YooptaContentValue
): string

​
Parameters

​
editor
YooEditor
required
The editor instance (automatically provided when called as editor.getHTML())
​
content
YooptaContentValue
required
The content to convert to HTML. Typically editor.children for current content.

​
Returns

string - HTML representation of the content

​
Output Format

The generated HTML includes:
  1. Body wrapper with editor metadata
  2. Block HTML generated by plugin serializers
  3. Embedded JSON data for lossless Yoopta copy/paste
<body 
  id="yoopta-clipboard" 
  data-editor-id="editor-123" 
  data-yoopta-json="{...escaped JSON...}"
>
  <!-- Block content -->
  <p>Paragraph content</p>
  <h1>Heading content</h1>
</body>

​
Examples

​
Export Current Content

function ExportToHTML() {
  const editor = useYooptaEditor();

  const handleExport = () => {
    const html = editor.getHTML(editor.children);
    
    // Download as file
    const blob = new Blob([html], { type: 'text/html' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'document.html';
    link.click();
  };

  return <button onClick={handleExport}>Download HTML</button>;
}

​
Copy to Clipboard

function CopyHTMLButton() {
  const editor = useYooptaEditor();

  const handleCopy = async () => {
    const html = editor.getHTML(editor.children);
    
    await navigator.clipboard.write([
      new ClipboardItem({
        'text/html': new Blob([html], { type: 'text/html' }),
      }),
    ]);
    
    alert('HTML copied to clipboard!');
  };

  return <button onClick={handleCopy}>Copy HTML</button>;
}

​
Export Selected Blocks

function ExportSelection() {
  const editor = useYooptaEditor();

  const handleExportSelection = () => {
    // Filter selected blocks
    const selectedPaths = editor.path.selected || [];
    const selectedContent = Object.values(editor.children)
      .filter(block => selectedPaths.includes(block.meta.order))
      .reduce((acc, block) => {
        acc[block.id] = block;
        return acc;
      }, {} as YooptaContentValue);

    const html = editor.getHTML(selectedContent);
    console.log('Selected HTML:', html);
  };

  return <button onClick={handleExportSelection}>Export Selection</button>;
}

​
Preview in Modal

function HTMLPreview() {
  const editor = useYooptaEditor();
  const [html, setHtml] = useState('');
  const [isOpen, setIsOpen] = useState(false);

  const handlePreview = () => {
    const htmlContent = editor.getHTML(editor.children);
    setHtml(htmlContent);
    setIsOpen(true);
  };

  return (
    <>
      <button onClick={handlePreview}>Preview HTML</button>
      {isOpen && (
        <div className="modal">
          <h2>HTML Preview</h2>
          <pre><code>{html}</code></pre>
          <button onClick={() => setIsOpen(false)}>Close</button>
        </div>
      )}
    </>
  );
}

​
Send to Server

function SaveToServer() {
  const editor = useYooptaEditor();

  const handleSave = async () => {
    const html = editor.getHTML(editor.children);
    
    await fetch('/api/documents', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ html }),
    });
    
    alert('Document saved!');
  };

  return <button onClick={handleSave}>Save</button>;
}

​
Export with Custom Processing

function ExportWithProcessing() {
  const editor = useYooptaEditor();

  const handleExport = () => {
    let html = editor.getHTML(editor.children);
    
    // Remove Yoopta-specific data attributes
    html = html.replace(/data-yoopta-[^=]*="[^"]*"/g, '');
    html = html.replace(/id="yoopta-clipboard"/g, '');
    
    // Add custom styling
    const styledHtml = `
      <!DOCTYPE html>
      <html>
        <head>
          <style>
            body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
            h1 { color: #333; }
            p { line-height: 1.6; }
          </style>
        </head>
        ${html}
      </html>
    `;
    
    console.log(styledHtml);
  };

  return <button onClick={handleExport}>Export Styled HTML</button>;
}

​
How It Works

​
Block Serialization

Each plugin defines an HTML serializer that converts its elements to HTML: 
const ParagraphPlugin = {
  type: 'Paragraph',
  parsers: {
    html: {
      serialize: (element, text, meta) => {
        const align = meta?.align ? ` style="text-align: ${meta.align}"` : '';
        return `<p${align}>${text}</p>`;
      },
    },
  },
};

​
Text Formatting

Text marks are converted to HTML tags:
  • Bold → <strong>
  • Italic → <i>
  • Underline → <u>
  • Strike → <s>
  • Code → <code>

​
Inline Elements

Plugins can define inline element serializers (e.g., links): 
const LinkPlugin = {
  parsers: {
    html: {
      serialize: (element, text) => {
        const url = element.props?.url || '#';
        return `<a href="${url}">${text}</a>`;
      },
    },
  },
};

​
Embedded JSON Data

The HTML includes embedded Yoopta JSON data in the data-yoopta-json attribute. This enables:
  • Lossless copy/paste between Yoopta editors
  • Preserving metadata not representable in HTML
  • Round-trip conversion (HTML → Yoopta → HTML)
The JSON data is escaped for safe HTML embedding: 
const escapedJson = jsonData
  .replace(/&/g, '&amp;')
  .replace(/"/g, '&quot;')
  .replace(/</g, '&lt;')
  .replace(/>/g, '&gt;');

​
Use Cases

  • Export Documents: Download content as HTML files
  • Email Content: Generate HTML for email templates (use getEmail for better email HTML)
  • Web Publishing: Export content for web pages
  • Copy/Paste: Enable rich copy/paste with other applications
  • API Integration: Send HTML content to external services
  • Preview: Show HTML preview of content
  • Archiving: Store content in HTML format

​
Limitations

  • Requires plugins to implement HTML serializers
  • Some Yoopta features may not have direct HTML equivalents
  • Styling is limited to what plugins generate
  • For email-specific HTML, use getEmail instead

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us