react-edit-to-html 1.2.6 → 1.2.8

package/README.md

@@ -1,6 +1,8 @@
 # react-edit-to-html
 
-`react-edit-to-html` is a premium, highly customizable, responsive React drag-and-drop template builder for creating dynamic HTML layouts. It is perfect for generating backend templates (invoices, shipping lists, email templates, billing letters, reports, etc.) that get populated with dynamic data.
+`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
 
@@ -8,25 +10,40 @@ Click the button below to try out `react-edit-to-html` live on CodeSandbox:
 
 [![Edit react-edit-to-html](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/devbox/react-edit-to-html-forked-tfsm4n)
 
-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 (Handlebars, Liquid, Scriban, .NET, C#), and export clean, production-ready HTML files.
+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
+## 🌟 Key Features & Highlights
 
-- 🛠 **Drag-and-Drop Canvas:** Select element blocks (headings, paragraphs, tables, images, barcodes) from the sidebar and drag them onto the paper canvas.
-- 🔄 **Multi-Syntax Loop Templates:** Pick your templating engine (Handlebars, Liquid, Scriban, JS/TS maps, C#/Razor, or Custom tags) for dynamic table looping.
+- 🛠 **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 & Custom CSS:** Customize padding, margin, sizing, and colors. Write custom inline CSS styles (e.g. `border-radius: 8px; border: 1px dashed slate;`) for a WYSIWYG editing experience.
-- 🔤 **Custom Typography:** Register custom font sizes and Google Fonts directly in the panel.
-- 🖼 **Custom Image Types & Neutral SVGs:** Register custom graphic categories (e.g., Signature, Thumbnail) on the fly, with standard clean base64 image placeholders.
-- 📱 **Fully Responsive Layout:** Automatically stacks vertically on smaller screens and side-by-side on larger desktop screens.
+- 🎨 **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.
-- 💾 **Silent Callbacks:** Custom handlers for block changes and template exports instead of intrusive alerts.
 
 ---
 
-## Installation
+## 📦 Installation
 
 Install the package via npm:
 
@@ -34,7 +51,7 @@ Install the package via npm:
 npm install react-edit-to-html
 ```
 
-Make sure to import the CSS stylesheet in your main React application entry point (e.g. `App.tsx` or `main.tsx`) so that the editor displays correctly:
+Make sure to import the CSS stylesheet in your application:
 
 ```typescript
 import 'react-edit-to-html/dist/react-edit-to-html.css';
@@ -42,50 +59,36 @@ import 'react-edit-to-html/dist/react-edit-to-html.css';
 
 ---
 
-## Usage
+## 💻 Integration Examples Across Frameworks
 
-Here is a basic example of how to embed `react-edit-to-html` in a React application:
+### 1. React / Next.js Example (TypeScript & JavaScript)
 
 ```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 MyBuilderPage() {
-  const customTables = [
+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 }
+        { columnName: 'Item Name', placeholder: '${item.name}', enabled: true },
+        { columnName: 'SKU', placeholder: '${item.sku}', enabled: true },
+        { columnName: 'Price', placeholder: '${item.price}', enabled: true }
       ],
-      loop: true,
-      isNestable: false,
-      parentPath: 'order',
-      maxNestingDepth: 5,
-      nestingPrefix: ' ',
-      showNestingLevel: false
+      loop: true
     }
   ];
 
-  const customPlaceholders = [
-    { label: 'Invoice ID', placeholder: '{{invoice_id}}', category: 'General', mockValue: 'INV-2026-9021' },
-    { label: 'Customer Name', placeholder: '{{customer_name}}', category: 'General', mockValue: 'Sophia Mueller' }
-  ];
-
-  
-
   return (
     <div style={{ height: '100vh', width: '100vw' }}>
       <HtmlEditor
-        headerTitle="Custom Document Designer"
-        headerSubtitle="Build invoices & export dynamic templates"
+        headerTitle="React Document Builder"
         tableSchemas={customTables}
-        placeholders={customPlaceholders}
-        templatingLanguage="csharp"
-        loopSyntax="each"
-        
+        templatingLanguage="ts"
+        onExport={(html: string) => console.log('Exported HTML:', html)}
       />
     </div>
   );
@@ -94,15 +97,135 @@ export default function MyBuilderPage() {
 
 ---
 
-## Props Reference
+### 2. Vue 3 Example (Using `mountHtmlEditor`)
+
+```vue
+<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`)
+
+```typescript
+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`)
+
+```svelte
+<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
+
+```html
+<!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
 
 ```ts
 type TableColumn = {
   columnName: string;
   placeholder: string;
   enabled?: boolean;
-  loop?: boolean; // Set to true to make column a nested sub-table loop
-  columns?: TableColumn[]; // Sub-table column definitions when loop is true
+  loop?: boolean;
+  columns?: TableColumn[];
 };
 
 type TableSchemaInfo = {
@@ -133,7 +256,7 @@ interface HtmlEditorProps {
   headerTitle?: string;
   headerSubtitle?: string;
   headerLogo?: React.ReactNode;
-  templatingLanguage?: 'handlebars' | 'liquid' | 'scriban' | 'dotnet' | 'js' | 'csharp' | 'custom';
+  templatingLanguage?: 'js' | 'ts' | 'handlebars' | 'liquid' | 'scriban' | 'dotnet' | 'csharp' | 'custom';
   loopSyntax?: 'for' | 'foreach' | 'each';
   onChange?: (blocks: CanvasBlock[]) => void;
   onExport?: (html: string) => void;
@@ -146,11 +269,10 @@ interface HtmlEditorProps {
   showPreview?: boolean;
   showExport?: boolean;
   showExportPdf?: boolean;
-  /** Allows passing custom CSS inline style properties dynamically to any of the header actions (importHtml, importPdf, clearCanvas, preview, export) */
+  /** Position of the sidebar panel ('left' | 'right'). Defaults to 'left' */
+  sidebarPosition?: 'left' | 'right';
   customButtonStyles?: Record<string, React.CSSProperties>;
-  /** Allows passing custom CSS class names dynamically to customize/override button class sheets for header actions */
   customButtonClassNames?: Record<string, string>;
-  /** Allows passing completely custom React components for header actions. Receives an onClick prop to trigger the action. */
   customActionComponents?: {
     importHtml?: (props: { onClick: () => void }) => React.ReactNode;
     importPdf?: (props: { onClick: () => void }) => React.ReactNode;
@@ -163,117 +285,90 @@ interface HtmlEditorProps {
 
 | Prop | Type | Default | Details |
 | :--- | :--- | :--- | :--- |
-| `tableSchemas` | `TableSchemaInfo[]` | `[]` | Configures dynamic table schemas. Supports top-level loop tables and nested sub-tables (`loop: true` with `columns`).<br/>**Example:** `tableSchemas={[{ tableName: 'items', loop: true, columns: [{ columnName: 'SKU', placeholder: '{{item.sku}}' }] }]}` |
-| `placeholders` | `PlaceholderItem[]` | `[]` | Controls variables shown in the Placeholders tab. Left empty by default until passed as a prop.<br/>**Example:** `placeholders={[{ label: 'User Name', placeholder: '{{user.name}}' }]}` |
-| `defaultLogo` | `string` | Neutral SVG placeholder | Default image source when inserting/selecting `logo` image blocks. Accepts URL or base64 data URI.<br/>**Example:** `defaultLogo="https://example.com/logo.png"` |
-| `defaultBanner` | `string` | Neutral SVG placeholder | Default image source when inserting/selecting `banner` image blocks. Accepts URL or base64 data URI.<br/>**Example:** `defaultBanner="https://example.com/banner.png"` |
-| `headerTitle` | `string` | `'Layout Designer'` | Header title text displayed at the top of the editor.<br/>**Example:** `headerTitle="Invoice Template Builder"` |
-| `headerSubtitle` | `string` | `'Interactive Document HTML Builder'` | Header subtitle text displayed below the title.<br/>**Example:** `headerSubtitle="Customize & Export Invoices"` |
-| `headerLogo` | `React.ReactNode` | Sparkles icon badge | Custom header logo node. If omitted, the built-in orange Sparkles badge is rendered.<br/>**Example:** `headerLogo={<img src="/logo.png" className="h-6 w-6" />}` |
-| `typographySizes` | `Array<{ label: string; value: string }>` | Standard px list | Custom list of font sizes available in the formatting panel dropdown.<br/>**Example:** `typographySizes={[{ label: '14px', value: '14px' }, { label: '20px', value: '20px' }]}` |
-| `typographyWeights` | `Array<{ label: string; value: string }>` | Standard weights list | Custom list of font weights available in the formatting panel dropdown.<br/>**Example:** `typographyWeights={[{ label: 'Normal', value: '400' }, { label: 'Bold', value: '700' }]}` |
-| `typographyFonts` | `Array<{ label: string; value: string }>` | Default fonts list | Custom list of font families available in the typography font selector dropdown.<br/>**Example:** `typographyFonts={[{ label: 'Inter', value: 'Inter, sans-serif' }]}` |
-| `templatingLanguage` | `'handlebars' \| 'liquid' \| 'scriban' \| ...` | `'handlebars'` | Sets initial loop-tag generation mode for table export.<br/>**Example:** `templatingLanguage="liquid"` |
-| `loopSyntax` | `'for' \| 'foreach' \| 'each'` | `'each'` | Sets initial mapping keyword used by the loop-tag generator.<br/>**Example:** `loopSyntax="foreach"` |
-| `onChange` | `(blocks: CanvasBlock[]) => void` | `undefined` | Fired whenever canvas blocks state changes.<br/>**Example:** `onChange={(blocks) => console.log('Blocks:', blocks)}` |
-| `onExport` | `(html: string) => void` | `undefined` | Called when user clicks Export Template. If omitted, it automatically downloads `template.html`.<br/>**Example:** `onExport={(html) => saveTemplate(html)}` |
-| `onExportPdf` | `(html: string) => void` | `undefined` | Called when user clicks Download PDF. If omitted, it defaults to triggering `window.print()` for a native PDF preview.<br/>**Example:** `onExportPdf={(html) => downloadPdfFile(html)}` |
-| `initialBlocks` | `CanvasBlock[]` | `[]` | Pass preloaded blocks to initialize the layout canvas.<br/>**Example:** `initialBlocks={[{ id: 'b1', type: 'h1', content: 'Title', style: { fontSize: '24px' } }]}` |
-| `defaultStyles` | `Record<string, Partial<TextStyle>>` | `{}` | Key-value dictionary providing pre-defined styling configurations for elements dropped or created in the canvas.<br/>**Example:** `defaultStyles={{ h1: { fontSize: '24px', fontWeight: 'bold' } }}` |
-| `showHeader` | `boolean` | `true` | Show or hide the top header bar branding. Visible by default (`true`).<br/>**Example:** `showHeader={false}` |
-| `isTablesLoading` | `boolean` | `false` | Displays an animated skeleton loader inside the Dynamic Tables sidebar tab.<br/>**Example:** `isTablesLoading={true}` |
-| `isPlaceholdersLoading` | `boolean` | `false` | Displays an animated skeleton loader inside the Variables Palette sidebar tab.<br/>**Example:** `isPlaceholdersLoading={true}` |
-| `showImportHtml` | `boolean` | `true` | Show/hide the "Import HTML" action button in the toolbar.<br/>**Example:** `showImportHtml={true}` |
-| `showImportPdf` | `boolean` | `true` | Show/hide the "Import PDF" action button in the toolbar.<br/>**Example:** `showImportPdf={false}` |
-| `showClearCanvas` | `boolean` | `true` | Show/hide the "Clear Canvas" utility button in the canvas toolbar.<br/>**Example:** `showClearCanvas={true}` |
-| `showPreview` | `boolean` | `true` | Show/hide the "Live Preview" action button in the toolbar.<br/>**Example:** `showPreview={true}` |
-| `showExport` | `boolean` | `true` | Show/hide the "Export Template" action button in the toolbar.<br/>**Example:** `showExport={true}` |
-| `showExportPdf` | `boolean` | `true` | Show/hide the "Download PDF" action button in the toolbar.<br/>**Example:** `showExportPdf={true}` |
-| `customButtonStyles` | `object` | `{}` | Allows passing custom CSS inline style properties dynamically to any of the header/toolbar actions.<br/>**Example:** `customButtonStyles={{ export: { backgroundColor: '#10b981' } }}` |
-| `customButtonClassNames` | `object` | `{}` | Allows passing custom CSS Tailwind class names dynamically to customize/override button class sheets.<br/>**Example:** `customButtonClassNames={{ export: 'bg-emerald-600 hover:bg-emerald-700' }}` |
-| `customActionComponents` | `object` | `undefined` | Pass custom React components for toolbar actions (`importHtml`, `importPdf`, `preview`, `exportPdf`, `export`). Render prop receives `{ onClick }`.<br/>**Example:** `customActionComponents={{ export: ({ onClick }) => <button onClick={onClick}>Save</button> }}` |
-
-### Notes on Table & Sub-Table Types
-
-- `TableSchemaInfo` and `TableColumn` are exported from the package (`export * from './types'`).
-- **Sub-Tables:** Define `loop: true` and specify a `columns: TableColumn[]` array on any column item. In both editor canvas and exported HTML, sub-tables render with nested headers (`<thead>`) and body rows (`<tbody>`).
-- **Column & Sub-Column Management:** In the Formatting Panel (**Styles Tab**), click the Pencil (`Edit`) icon next to any column or sub-column to edit header names and placeholders inline, add new sub-columns, or delete sub-columns.
+| `sidebarPosition` | `'left' \| 'right'` | `'left'` | Controls the sidebar panel position. Defaults to `'left'` (sidebar on left, canvas on right). Set to `'right'` to position the sidebar on the right side. |
+| `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. |
+| `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. |
+
+| 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. |
 
 ---
 
-## Editing & Managing Sections
-
-The sidebar contains 4 main tabs for configuring elements and settings:
-
-### 1. Typography Elements (Text Tab)
-Contains Heading styles, Paragraphs, Titles, and Captions.
-- **How to add:** Drag any element block onto the canvas or click "Insert at End".
-- **How to edit:** Click directly on the text block on the canvas to type text. Highlight text to trigger the inline **Rich Text Selection Bubble** (bold, italics, underline, or colors).
-
-### 2. Dynamic Tables (Tables Tab)
-Loads your configured table schemas.
-- **How to add:** Drag a table card from the sidebar onto the canvas or click "Insert at End" to append.
-- **Toggling Columns:** Click checkboxes in the sidebar schema card to enable/disable columns.
-- **Custom Tables:** Input a Table Name, choose loop start/end tags, and click "Add Custom Loop Table" to dynamically register new tables.
-
-### 3. Image & Barcode Elements (Images Tab)
-- **Logos & Banners:** Drag logos or banners onto the canvas. Upload custom files (converted to base64) under settings properties.
-- **Dynamic Barcodes:** Drag a barcode block. Change the mock value (e.g. `SHIP-99201`) or backend template tag (e.g. `{{barcode}}`) in block settings configurations.
-- **Custom Image Types:** Register custom graphics categories (e.g., Signature) by typing a label and clicking "Add Image Type".
-
-### 4. Variables Palette (Placeholders Tab)
-- **Inserting Placeholders:** Highlight any text block or table cell and drag a placeholder variable chip onto it. Alternatively, select a block, and click a variable in the palette to insert it at the cursor position.
-- **Custom Mock Values:** Next to each variable in the palette, type a mock value. This will instantly replace placeholders in the canvas for layout testing.
-
-### 5. Formatting Styles Panel (Styles Tab)
-Applies when a canvas block is selected:
-- **Typography & Layout:** Adjust alignment, font size, font family, and font weight.
-- **Visual Colors:** Adjust text color and background color using interactive selectors.
-- **Sizing & Spacing:** Control block margins, padding, widths, and heights using range sliders.
-- **Typography Variants:** Register custom sizes (e.g. `17px`) and Google fonts dynamically.
-- **Table Columns Editor:** Add columns, delete columns, or edit raw JSON records for tables.
-- **Global template settings:** Choose template syntaxes (Handlebars, Liquid, Scriban, Razor) and toggle HTML comment wraps.
+## ⚡ Templating Language Output Comparison
 
----
-
-## Customizing Element Styling
-
-`react-edit-to-html` provides a rich visual formatting panel to easily customize fonts, weights, sizes, margins, padding, and alignments:
-- **Style Customization:** End users can control text alignment, colors, padding, margins, block widths, and heights directly from the sidebar.
-- **Layout-Safe:** The raw custom inline CSS styles textarea has been removed from the formatting panel options to ensure design consistency and prevent layout breaks.
-- **Developer Default Styles:** Pass styling presets via the `defaultStyles` prop to auto-configure initial properties on drops or insertions.
-
----
-
-## Export HTML Structure
-
-When exporting the template layout, `react-edit-to-html` packages the final output into a clean HTML format. Tables are exported using the exact inline styles and template comments matching the selected engine:
+### TypeScript / JavaScript ES6 Template Literals (`templatingLanguage="ts"` or `"js"`)
+```html
+<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"`)
 ```html
-<table style="font-size: 10px; color: #334155; text-align: left; font-weight: 400;">
+<table>
   <thead>
     <tr>
-      <th>Weight</th>
-      <th>Package Code</th>
-      <th>Package Net Weight</th>
-      <th>Package Gross Weight</th>
-      <th>Package Content</th>
+      <th>SKU</th>
+      <th>Product Name</th>
+      <th>Price</th>
     </tr>
   </thead>
   <tbody>
-    <!-- {{#each shipment.packages}} --><tr>
-      <td>{{gross_weight}}</td>
-      <td>{{package_code}}</td>
-      <td>{{package.net_weight}}</td>
-      <td>{{package.gross_weight}}</td>
-      <td>{{package_content}}</td>
+    <!-- {{#each items}} --><tr>
+      <td>{{sku}}</td>
+      <td>{{name}}</td>
+      <td>{{price}}</td>
     </tr><!-- {{/each}} -->
   </tbody>
 </table>
 ```
 
-## License
+### C# / Razor (`templatingLanguage="csharp"`)
+```html
+<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>
+```
+
+---
+
+## 📄 License
 
-Proprietary & Commercial License © 2026 [BEO Software Pvt. Ltd.](https://beo-software.in/)
+Proprietary &amp; Commercial License © 2026 [BEO Software Pvt. Ltd.](https://beo-software.in/)
 
 All rights reserved. Unauthorized copying, distribution, or commercial use is strictly prohibited. For licensing inquiries, please visit [beo-software.in](https://beo-software.in/).