react-edit-to-html

react-edit-to-html is a premium, highly customizable, responsive HTML editor and visual template builder for creating dynamic HTML layouts. It is perfect for generating backend templates (invoices, shipping lists, email templates, billing letters, reports, PDF documents, etc.) populated with dynamic data.

🚀 Live Online Demo

Click the button below to try out react-edit-to-html live on CodeSandbox:

The editor allows you to structure tables, images, text, and barcodes, preview them in real time with custom mock values, configure loop templates for multiple template engines (TypeScript (ts), JavaScript (js) ES6 Template Literals, Handlebars, Liquid, Scriban, .NET, C#/Razor), and export clean, production-ready HTML files.

🌐 Multi-Framework & TypeScript/JavaScript Support

Yes! react-edit-to-html is built with TypeScript (.ts/.tsx) and supports all JavaScript/TypeScript frameworks:

• React & Next.js (Native TSX/JSX component)
• Vue 3 & Vue 2 (via mountHtmlEditor helper)
• Angular (via mountHtmlEditor helper)
• Svelte & SvelteKit (via mountHtmlEditor helper)
• Vanilla JavaScript / TypeScript (plain HTML, jQuery, PHP, Laravel, Rails, ASP.NET)

The package includes full TypeScript declaration files (.d.ts) and exports mountHtmlEditor(container, props) and unmountHtmlEditor(container) for non-React or plain JS environments.

🌟 Key Features & Highlights

• 🛠 Drag-and-Drop Canvas Editor: Select element blocks (headings, paragraphs, tables, images, barcodes) from the sidebar and drag them onto the paper canvas.
• 🔷 Full TypeScript & JavaScript Flexibility: Built in TypeScript with full type definitions (.d.ts) + mountHtmlEditor helper for Vue, Angular, Svelte, and Vanilla JS.
• 📊 Live Dummy Data Preview Engine: Pass sample placeholder data (dummyData) to substitute placeholders ({{carrier_code}}, {{sender.name}}, etc.), table cells, and barcodes directly in the canvas. Toggle between template placeholder markers and live dummy data view with a single click.
• 📏 Percentage Column Width Controls: Fine-tune table column widths in percentage (%) directly via the Style Panel or floating Selection Bubble toolbar. Adjust with 5% stepping buttons (-/+) or direct input, complete with automatic cell-width detection on selection.
• 🏷️ Custom Document Title & Dynamic Export Filename: Explicitly specify the HTML document <title> tag and exported file download name via exportDocumentTitle and exportFileName (or exportFilename) props. Automatically falls back to using the first text/heading block on the canvas!
• 📄 Data-Driven Page Height Export: Exported HTML documents automatically fit content height dynamically (min-height: auto), eliminating unnecessary empty page padding and guaranteeing clean multi-page document printing.
• 🟨 JS/TS ES6 Template Literals (js / ts): Dynamic map looping (${items.map(item => \...`).join('')}`) alongside Handlebars, Liquid, Scriban, and C#/Razor syntaxes.
• 🔄 Multi-Syntax Loop Templates: Toggle template engines (templatingLanguage="js", "ts", "handlebars", "liquid", "scriban", "csharp", "dotnet") for dynamic table looping.
• 🖼 Image Alignment & Position Controls: Visual alignment controls (Left, Center, Right) for images and barcodes in both live canvas and exported HTML markup.
• 📊 Dynamic Mock Visualizer: View variables substituted instantly with mock data. Edit mock values for placeholders and raw JSON rows directly in the sidebar.
• 🎨 Advanced Styles & Layouts: Customize padding, margin, block widths, element sizing, colors, borders, and column alignment for a true WYSIWYG editing experience.
• 🔤 Custom Typography: Register custom font sizes, weights, and Google Fonts directly in the panel.
• 🖼 Custom Image Types & SVG Barcodes: Register custom graphic categories (e.g., Signature, Logo, Banner, Watermark, Barcode) on the fly with clean SVG base64 image placeholders.
• 📱 Fully Responsive Layout: Automatically stacks vertically on smaller screens and side-by-side on desktop screens.
• ⚡ PDF & HTML Importing: Import existing HTML templates or parse digital PDF text layers directly into editable canvas blocks.

💡 Live Dummy Data Substitution (dummyData)

You can pass real sample data via the dummyData prop. When present, a "View Dummy Data" button appears in the toolbar, enabling users to toggle between template placeholder tags ({{sender.name}}) and populated live values (BEO Software Solutions GmbH).

import HtmlEditor from 'react-edit-to-html';

export default function App() {
  return (
    <HtmlEditor
      exportDocumentTitle="Shipping Manifest Template"
      exportFileName="shipping_manifest_v1.html"
      dummyData={{
        placeholders: {
          carrier_code: "DHL",
          product_code: "EXPRESS_DOMESTIC",
          shipment_reference: "REF-884920",
          "sender.name": "BEO Software Solutions GmbH",
          "sender.postal_code": "60549",
          "sender.city": "Frankfurt am Main",
          tracking_number: "1Z9999999999999999",
          order_number: "ORD-2026-99201"
        }
      }}
    />
  );
}

🧪 CodeSandbox Demo Setup

Setting up react-edit-to-html on CodeSandbox takes under 2 minutes:

1. Create a React TypeScript Sandbox

Go to codesandbox.io/s and choose React TypeScript.

2. Add Dependency

In the CodeSandbox Dependencies panel, add:

react-edit-to-html

3. Replace App.tsx Content

Paste the following code into your App.tsx:

import React from 'react';
import HtmlEditor from 'react-edit-to-html';
import type { TableSchemaInfo, PlaceholderItem } from 'react-edit-to-html';
import 'react-edit-to-html/dist/react-edit-to-html.css';

export default function App() {
  const tableSchemas: TableSchemaInfo[] = [
    {
      tableName: 'package',
      columns: [
        { columnName: 'Package No', placeholder: '${item.packageNo}', width: '30%', enabled: true },
        { columnName: 'Weight (kg)', placeholder: '${item.weight}', width: '20%', enabled: true },
        { columnName: 'Dimensions', placeholder: '${item.dimensions}', width: '30%', enabled: true },
        { columnName: 'Status', placeholder: '${item.status}', width: '20%', enabled: true }
      ],
      loop: true,
      isNestable: false,
      parentPath: '',
      maxNestingDepth: 1,
      nestingPrefix: '',
      showNestingLevel: false
    }
  ];

  const placeholders: PlaceholderItem[] = [
    { label: 'Carrier Code', placeholder: '{{carrier_code}}', category: 'Shipping' },
    { label: 'Sender Name', placeholder: '{{sender.name}}', category: 'Sender' },
    { label: 'Tracking Number', placeholder: '{{tracking_number}}', category: 'Shipping' }
  ];

  const dummyData = {
    placeholders: {
      carrier_code: 'DHL EXPRESS',
      'sender.name': 'BEO Software GmbH',
      tracking_number: '1Z9999999999999999'
    }
  };

  return (
    <div style={{ height: '100vh', width: '100vw' }}>
      <HtmlEditor
        headerTitle="CodeSandbox HTML Designer"
        headerSubtitle="Interactive Template Builder Demo"
        exportDocumentTitle="CodeSandbox Invoice Template"
        exportFileName="codesandbox_invoice.html"
        tableSchemas={tableSchemas}
        placeholders={placeholders}
        dummyData={dummyData}
        templatingLanguage="ts"
        onExport={(html: string) => {
          console.log('Exported HTML Content:', html);
          alert('HTML Template exported successfully!');
        }}
      />
    </div>
  );
}

📦 Installation

Install the package via npm:

npm install react-edit-to-html

Make sure to import the CSS stylesheet in your application:

import 'react-edit-to-html/dist/react-edit-to-html.css';
// Or conveniently:
import 'react-edit-to-html/style.css';

💻 Integration Examples Across Frameworks

1. React / Next.js Example (TypeScript & JavaScript)

import React from 'react';
import HtmlEditor from 'react-edit-to-html';
import type { TableSchemaInfo } from 'react-edit-to-html';
import 'react-edit-to-html/dist/react-edit-to-html.css';

export default function ReactTemplateEditor() {
  const customTables: TableSchemaInfo[] = [
    {
      tableName: 'order_items',
      columns: [
        { columnName: 'Item Name', placeholder: '${item.name}', width: '40%', enabled: true },
        { columnName: 'SKU', placeholder: '${item.sku}', width: '30%', enabled: true },
        { columnName: 'Price', placeholder: '${item.price}', width: '30%', enabled: true }
      ],
      loop: true,
      isNestable: false,
      parentPath: '',
      maxNestingDepth: 1,
      nestingPrefix: '',
      showNestingLevel: false
    }
  ];

  return (
    <div style={{ height: '100vh', width: '100vw' }}>
      <HtmlEditor
        headerTitle="React Document Builder"
        exportDocumentTitle="Sales Invoice 2026"
        exportFileName="sales_invoice_2026.html"
        tableSchemas={customTables}
        templatingLanguage="ts"
        onExport={(html: string) => console.log('Exported HTML:', html)}
      />
    </div>
  );
}

2. Vue 3 Example (Using mountHtmlEditor)

<template>
  <div ref="editorRef" style="height: 100vh; width: 100vw;"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { mountHtmlEditor, unmountHtmlEditor } from 'react-edit-to-html';
import 'react-edit-to-html/dist/react-edit-to-html.css';

const editorRef = ref<HTMLDivElement | null>(null);

onMounted(() => {
  if (editorRef.value) {
    mountHtmlEditor(editorRef.value, {
      headerTitle: 'Vue 3 Template Designer',
      exportDocumentTitle: 'Vue Template Export',
      exportFileName: 'vue_template.html',
      templatingLanguage: 'js',
      onExport: (html: string) => console.log('Exported HTML from Vue:', html)
    });
  }
});

onUnmounted(() => {
  if (editorRef.value) unmountHtmlEditor(editorRef.value);
});
</script>

3. Angular Example (Using mountHtmlEditor)

import { Component, ElementRef, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
import { mountHtmlEditor, unmountHtmlEditor } from 'react-edit-to-html';
import 'react-edit-to-html/dist/react-edit-to-html.css';

@Component({
  selector: 'app-html-editor',
  template: `<div #editorContainer style="height: 100vh; width: 100vw;"></div>`
})
export class HtmlEditorComponent implements AfterViewInit, OnDestroy {
  @ViewChild('editorContainer') container!: ElementRef<HTMLDivElement>;

  ngAfterViewInit() {
    mountHtmlEditor(this.container.nativeElement, {
      headerTitle: 'Angular Template Designer',
      exportDocumentTitle: 'Angular Shipping Report',
      exportFileName: 'angular_report.html',
      templatingLanguage: 'ts',
      onExport: (html: string) => console.log('Exported HTML from Angular:', html)
    });
  }

  ngOnDestroy() {
    unmountHtmlEditor(this.container.nativeElement);
  }
}

4. Svelte Example (Using mountHtmlEditor)

<script lang="ts">
  import { onMounted, onDestroy } from 'svelte';
  import { mountHtmlEditor, unmountHtmlEditor } from 'react-edit-to-html';
  import 'react-edit-to-html/dist/react-edit-to-html.css';

  let container: HTMLDivElement;

  onMounted(() => {
    mountHtmlEditor(container, {
      headerTitle: 'Svelte Document Builder',
      exportDocumentTitle: 'Svelte Document Template',
      exportFileName: 'svelte_document.html',
      templatingLanguage: 'js',
      onExport: (html: string) => console.log('Exported HTML from Svelte:', html)
    });
  });

  onDestroy(() => {
    if (container) unmountHtmlEditor(container);
  });
</script>

<div bind:this={container} style="height: 100vh; width: 100vw;"></div>

5. Vanilla JavaScript / Plain HTML Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vanilla JS HTML Editor</title>
  <link rel="stylesheet" href="node_modules/react-edit-to-html/dist/react-edit-to-html.css">
</head>
<body style="margin: 0;">
  <div id="editor-root" style="height: 100vh; width: 100vw;"></div>

  <script type="module">
    import { mountHtmlEditor } from './node_modules/react-edit-to-html/dist/index.js';

    mountHtmlEditor(document.getElementById('editor-root'), {
      headerTitle: 'Vanilla JavaScript Editor',
      exportDocumentTitle: 'Vanilla JS Document',
      exportFileName: 'vanilla_document.html',
      templatingLanguage: 'js',
      onExport: function(html) {
        console.log('Exported HTML:', html);
      }
    });
  </script>
</body>
</html>

📋 Props Reference

type TableColumn = {
  columnName: string;
  placeholder: string;
  enabled?: boolean;
  loop?: boolean;
  colspan?: number;
  width?: string; // e.g. '25%', '50%', '150px'
  columns?: TableColumn[];
};

type TableSchemaInfo = {
  tableName: string;
  columns: TableColumn[];
  loop: boolean;
  isNestable?: boolean;
  parentPath?: string;
  maxNestingDepth?: number;
  nestingPrefix?: string;
  showNestingLevel?: boolean;
  loopStartTag?: string;
  loopEndTag?: string;
  mockRows?: any[];
};

type PlaceholderItem = {
  label: string;
  placeholder: string;
  category?: string;
};

interface DummyData {
  /** Map of placeholder keys to real string/number values, e.g. { "carrier_code": "DHL", "sender.name": "BEO Software" } */
  placeholders?: Record<string, string | number>;
  /** Fallback top-level properties directly accessible by key */
  [key: string]: any;
}

interface HtmlEditorProps {
  tableSchemas?: TableSchemaInfo[];
  placeholders?: PlaceholderItem[];
  dummyData?: DummyData;
  showDummyDataPreview?: boolean;
  onToggleDummyDataPreview?: (isApplied: boolean) => void;
  defaultLogo?: string;
  defaultBanner?: string;
  headerTitle?: string;
  headerSubtitle?: string;
  headerLogo?: React.ReactNode;
  typographySizes?: Array<{ label: string; value: string }>;
  typographyWeights?: Array<{ label: string; value: string }>;
  typographyFonts?: Array<{ label: string; value: string }>;
  templatingLanguage?: 'js' | 'ts' | 'handlebars' | 'liquid' | 'scriban' | 'dotnet' | 'csharp' | 'custom';
  loopSyntax?: 'for' | 'foreach' | 'each';
  onChange?: (blocks: CanvasBlock[]) => void;
  onExport?: (html: string) => void;
  onExportPdf?: (html: string) => void;
  getHTMLOutput?: (html: string) => void;
  initialBlocks?: CanvasBlock[];
  defaultStyles?: Record<string, Partial<TextStyle>>;
  showImportHtml?: boolean;
  showImportPdf?: boolean;
  showClearCanvas?: boolean;
  showPreview?: boolean;
  showExport?: boolean;
  showExportPdf?: boolean;
  showUndoRedo?: boolean;
  showUndo?: boolean;
  showRedo?: boolean;
  undoTooltip?: string;
  redoTooltip?: string;
  showHeader?: boolean;
  hideHeader?: boolean;
  showHintBadge?: boolean;
  hintBadgePosition?: 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center' | 'center-center' | 'center';
  sidebarPosition?: 'left' | 'right';
  tabNavigationPosition?: 'left' | 'right';
  tabsPosition?: 'left' | 'right';
  themeColor?: string;
  primaryColor?: string;
  isTablesLoading?: boolean;
  tablesLoading?: boolean;
  isPlaceholdersLoading?: boolean;
  placeholdersLoading?: boolean;
  customButtonStyles?: Record<string, React.CSSProperties>;
  customButtonClassNames?: Record<string, string>;
  customActionComponents?: {
    importHtml?: (props: { onClick: () => void }) => React.ReactNode;
    importPdf?: (props: { onClick: () => void }) => React.ReactNode;
    preview?: (props: { onClick: () => void }) => React.ReactNode;
    exportPdf?: (props: { onClick: () => void }) => React.ReactNode;
    export?: (props: { onClick: () => void }) => React.ReactNode;
    dummyDataPreview?: (props: { onClick: () => void; isApplied: boolean }) => React.ReactNode;
    undo?: (props: { onClick: () => void; disabled: boolean }) => React.ReactNode;
    redo?: (props: { onClick: () => void; disabled: boolean }) => React.ReactNode;
  };
  tourSelectors?: TourSelectors;
  importedHtml?: string;
  exportDocumentTitle?: string;
  exportFileName?: string;
  exportFilename?: string;
  toolbarTheme?: 'light' | 'dark' | 'auto';
  toolbarBgColor?: string;
  toolbarStyle?: React.CSSProperties;
  toolbarClassName?: string;
  headerTheme?: 'light' | 'dark' | 'auto';
  headerBgColor?: string;
  headerStyle?: React.CSSProperties;
  headerClassName?: string;
}

| Prop | Type | Default | Details | | :--- | :--- | :--- | :--- | | showHintBadge | boolean | true | Controls visibility of the floating shortcut hint & zoom range slider badge inside the canvas editor. | | hintBadgePosition | 'top-left' \| 'top-right' \| 'top-center' \| 'bottom-left' \| 'bottom-right' \| 'bottom-center' \| 'center-center' \| 'center' | 'bottom-right' | Configures positioning of the floating hint badge inside the editor screen ('top-left', 'top-right', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center', 'center-center', or 'center'). | | toolbarTheme | 'light' \| 'dark' \| 'auto' | 'auto' | Controls toolbar color theme mode. Accepts 'light', 'dark', or 'auto' (auto-detects based on background color luminance). | | toolbarBgColor | string | undefined | Custom background color hex/rgb for the canvas toolbar bar (e.g. '#0f172a', '#1e293b'). Automatically switches toolbar controls to dark-mode style when a dark background is passed. | | toolbarStyle / toolbarClassName | CSSProperties / string | undefined | Custom inline style or CSS class name for the top canvas toolbar bar container. | | exportDocumentTitle | string | undefined | Custom title tag (<title>) for exported HTML document. If omitted, derives document title from the first heading/text block on canvas or falls back to 'Exported HTML Template'. | | exportFileName / exportFilename | string | undefined | Custom filename for downloaded exported HTML file (e.g. 'shipping_manifest.html'). If omitted, derives filename from the first heading/text block on canvas or falls back to 'exported_template.html'. | | TableColumn.width | string | undefined | Width percentage or CSS length for table columns (e.g., '25%', '50%', '150px'). Controls live canvas column width and exports style="width: 25%" into HTML table headers and data cells. | | showUndoRedo / showUndo / showRedo | boolean | true | Controls visibility of Undo and Redo control buttons in the canvas action toolbar. | | tabNavigationPosition / tabsPosition | 'left' \| 'right' | 'left' | Controls the position of the vertical navigation tab bar strip relative to the tab content panel inside the sidebar ('left' or 'right'). | | sidebarPosition | 'left' \| 'right' | 'left' | Controls the position of the entire sidebar panel relative to the canvas ('left' or 'right'). | | dummyData | DummyData | undefined | Map of dynamic sample key-values ({ placeholders: { "carrier_code": "DHL", "sender.name": "BEO Software" } }) to replace placeholders in text, tables, and images. | | showDummyDataPreview | boolean | true | Controls visibility of the "View Dummy Data" action button in the canvas toolbar. | | onToggleDummyDataPreview | (isApplied: boolean) => void | undefined | Callback fired when the user toggles the View Dummy Data preview button on/off. | | getHTMLOutput | (html: string) => void | undefined | Real-time callback prop to receive or retrieve the latest compiled template HTML code on demand / changes. | | themeColor / primaryColor | string | '#ea580c' | Configures the primary theme color for the entire editor UI (buttons, active tabs, selected block outlines, range sliders, toggles, badges, drag lines). Accepts any valid hex (#3b82f6), RGB (rgb(59, 130, 246)), or named color (purple, blue). | | showHeader | boolean | true | Controls visibility of the top workspace header bar. | | hideHeader | boolean | false | When set to true, hides the top workspace header bar (convenient alias for showHeader={false}). | | tourSelectors | TourSelectors | undefined | Optional prop interface to pass custom data-tour attribute names to editor elements for driver tours (sidebar, tabText, tabTables, tableDragHandle, placeholderSearch, etc.). | | templatingLanguage | 'js' \| 'ts' \| 'handlebars' \| 'liquid' \| 'scriban' \| 'dotnet' \| 'csharp' \| 'custom' | 'js' | Configures loop-tag syntax mode for exported HTML tables. Supports JavaScript/TypeScript Template Literals (js/ts), Handlebars (handlebars), Liquid (liquid), Scriban (scriban), and C# Razor (csharp). | | tableSchemas | TableSchemaInfo[] | [] | Configures dynamic table schemas. Supports top-level loop tables and nested sub-tables. | | placeholders | PlaceholderItem[] | [] | Controls variables shown in the Placeholders tab. | | isTablesLoading / tablesLoading | boolean | false | Displays skeleton loading state in the Tables tab panel. | | isPlaceholdersLoading / placeholdersLoading | boolean | false | Displays skeleton loading state in the Placeholders tab panel. | | customButtonStyles | Record<string, React.CSSProperties> | undefined | Inline style overrides for header action buttons (importHtml, importPdf, clearCanvas, preview, export, exportPdf, dummyDataPreview, undo, redo). | | customButtonClassNames | Record<string, string> | undefined | Custom CSS class names to override button styles for header actions. | | customActionComponents | Object | undefined | Custom renderer functions for header action buttons (importHtml, importPdf, preview, exportPdf, export, dummyDataPreview, undo, redo). | | defaultLogo | string | Neutral SVG | Default image source for logo blocks. | | defaultBanner | string | Neutral SVG | Default image source for banner blocks. | | headerTitle | string | 'Layout Designer' | Header title text displayed at top of editor. | | headerSubtitle | string | 'Interactive Document HTML Builder' | Header subtitle text. | | onExport | (html: string) => void | undefined | Called when user exports template. | | onExportPdf | (html: string) => void | undefined | Called when user downloads PDF. | | importedHtml | string | undefined | Forcefully loads / parses the provided raw HTML template string in the editor on prop change. |

| Exported Helper Function | Parameters | Description | | :--- | :--- | :--- | | mountHtmlEditor | (container: HTMLElement, props?: HtmlEditorProps) | Mounts the full editor into any DOM element container. Perfect for Vue, Angular, Svelte, and Vanilla JS applications. | | unmountHtmlEditor | (container: HTMLElement) | Unmounts the editor component and cleans up internal DOM nodes. |

⚡ Templating Language Output Comparison

TypeScript / JavaScript ES6 Template Literals (templatingLanguage="ts" or "js")

<table>
  <thead>
    <tr>
      <th style="width: 30%;">SKU</th>
      <th style="width: 40%;">Product Name</th>
      <th style="width: 30%;">Price</th>
    </tr>
  </thead>
  <tbody>
    <!-- ${items.map(item => ` --><tr>
      <td style="width: 30%;">${item.sku}</td>
      <td style="width: 40%;">${item.name}</td>
      <td style="width: 30%;">${item.price}</td>
    </tr><!-- `).join('')} -->
  </tbody>
</table>

Handlebars / Mustache (templatingLanguage="handlebars")

<table>
  <thead>
    <tr>
      <th style="width: 30%;">SKU</th>
      <th style="width: 40%;">Product Name</th>
      <th style="width: 30%;">Price</th>
    </tr>
  </thead>
  <tbody>
    <!-- {{#each items}} --><tr>
      <td style="width: 30%;">{{sku}}</td>
      <td style="width: 40%;">{{name}}</td>
      <td style="width: 30%;">{{price}}</td>
    </tr><!-- {{/each}} -->
  </tbody>
</table>

C# / Razor (templatingLanguage="csharp")

<table>
  <thead>
    <tr>
      <th style="width: 30%;">SKU</th>
      <th style="width: 40%;">Product Name</th>
      <th style="width: 30%;">Price</th>
    </tr>
  </thead>
  <tbody>
    <!-- @foreach (var item in items) { --><tr>
      <td style="width: 30%;">@item.Sku</td>
      <td style="width: 40%;">@item.Name</td>
      <td style="width: 30%;">@item.Price</td>
    </tr><!-- } -->
  </tbody>
</table>

📄 License

Proprietary & Commercial License © 2026 BEO Software Pvt. Ltd.

All rights reserved. Unauthorized copying, distribution, or commercial use is strictly prohibited. For licensing inquiries, please visit beo-software.in.