react-edit-to-html

v1.2.12

Published

2 days ago

`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, repor

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.
🟨 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, and colors 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.

📦 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';

💻 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, PlaceholderItem } 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}', enabled: true },
        { columnName: 'SKU', placeholder: '${item.sku}', enabled: true },
        { columnName: 'Price', placeholder: '${item.price}', enabled: true }
      ],
      loop: true
    }
  ];

  return (
    <div style={{ height: '100vh', width: '100vw' }}>
      <HtmlEditor
        headerTitle="React Document Builder"
        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',
      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',
      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',
      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',
      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;
  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;
  mockValue?: string;
};

interface HtmlEditorProps {
  tableSchemas?: TableSchemaInfo[];
  placeholders?: PlaceholderItem[];
  defaultLogo?: string;
  defaultBanner?: string;
  headerTitle?: string;
  headerSubtitle?: string;
  headerLogo?: React.ReactNode;
  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;
  initialBlocks?: CanvasBlock[];
  defaultStyles?: Record<string, Partial<TextStyle>>;
  showImportHtml?: boolean;
  showImportPdf?: boolean;
  showClearCanvas?: boolean;
  showPreview?: boolean;
  showExport?: boolean;
  showExportPdf?: boolean;
  /** Position of the sidebar panel ('left' | 'right'). Defaults to 'left' */
  sidebarPosition?: 'left' | 'right';
  /** Primary UI theme color hex/string. Defaults to '#ea580c' (orange). Supports any valid CSS color. */
  themeColor?: string;
  /** Alias for themeColor */
  primaryColor?: string;
  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;
  };
}

⚡ Templating Language Output Comparison

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

<table>
  <thead>
    <tr>
      <th>SKU</th>
      <th>Product Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <!-- ${items.map(item => ` --><tr>
      <td>${item.sku}</td>
      <td>${item.name}</td>
      <td>${item.price}</td>
    </tr><!-- `).join('')} -->
  </tbody>
</table>

Handlebars / Mustache (`templatingLanguage="handlebars"`)

<table>
  <thead>
    <tr>
      <th>SKU</th>
      <th>Product Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <!-- {{#each items}} --><tr>
      <td>{{sku}}</td>
      <td>{{name}}</td>
      <td>{{price}}</td>
    </tr><!-- {{/each}} -->
  </tbody>
</table>

C# / Razor (`templatingLanguage="csharp"`)

<table>
  <thead>
    <tr>
      <th>SKU</th>
      <th>Product Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <!-- @foreach (var item in items) { --><tr>
      <td>@item.Sku</td>
      <td>@item.Name</td>
      <td>@item.Price</td>
    </tr><!-- } -->
  </tbody>
</table>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

react-edit-to-html

🚀 Live Online Demo

🌐 Multi-Framework & TypeScript/JavaScript Support

🌟 Key Features & Highlights

📦 Installation

💻 Integration Examples Across Frameworks

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

2. Vue 3 Example (Using mountHtmlEditor)

3. Angular Example (Using mountHtmlEditor)

4. Svelte Example (Using mountHtmlEditor)

5. Vanilla JavaScript / Plain HTML Example

📋 Props Reference

⚡ Templating Language Output Comparison

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

Handlebars / Mustache (templatingLanguage="handlebars")

C# / Razor (templatingLanguage="csharp")

📄 License

2. Vue 3 Example (Using `mountHtmlEditor`)

3. Angular Example (Using `mountHtmlEditor`)

4. Svelte Example (Using `mountHtmlEditor`)

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

Handlebars / Mustache (`templatingLanguage="handlebars"`)

C# / Razor (`templatingLanguage="csharp"`)