@dooboostore/dom-editor

v1.0.1

Published

a month ago

A visual drag-and-drop DOM editor for creating and manipulating HTML structures with real-time preview

0High
0Medium
0Low

dooboostore

dom editor drag-drop html visual-editor dom-manipulation html-builder wysiwyg typescript browser ui-builder web-editor

@dooboostore/dom-editor

Full Documentation: https://dooboostore-develop.github.io/@dooboostore/dom-editor

A visual drag-and-drop DOM editor for building, editing, and exporting HTML structures in real time.

Features

Visual drag and drop editing for element trees.
Structured JSON export/import (NodeData) for persistence.
Runtime property panel for attributes and content editing.
Mobile-friendly interaction with drag delay control.
Root-first API usage plus bundle-entry support.
ESM/CJS/UMD/ESM-bundle outputs.

Installation

npm install @dooboostore/dom-editor

yarn add @dooboostore/dom-editor

pnpm add @dooboostore/dom-editor

Import Guide

Root import (recommended)

import { DomEditor } from '@dooboostore/dom-editor';

Bundle entry import

import { DomEditor } from '@dooboostore/dom-editor/bundle-entry';

Quick Start

Basic Usage

import { DomEditor } from '@dooboostore/dom-editor';

const editor = new DomEditor('#editor-container', {
  debug: true,
  enableMobileSupport: true
});

// Get the generated HTML
const html = editor.getContent();
console.log(html);

With Custom Options

import { DomEditor, DomEditorOptions } from '@dooboostore/dom-editor';

const options: DomEditorOptions = {
  initialContent: '<section class="hero"><h1>Hello</h1></section>',
  debug: false,
  dragDelay: 500, // milliseconds
  enableMobileSupport: true,
  customStyles: `
    .my-custom-element {
      background: linear-gradient(45deg, #ff6b35, #f7931e);
      color: white;
    }
  `
};

const editor = new DomEditor(document.getElementById('editor-container')!, options);

Structured Data Import

import { DomEditor, NodeData } from '@dooboostore/dom-editor';

const initialTree: NodeData = {
  nodeType: 'element',
  tagName: 'div',
  className: 'container',
  children: [
    {
      nodeType: 'element',
      tagName: 'h2',
      children: [{ nodeType: 'text', textContent: 'Welcome' }]
    }
  ]
};

const editor = new DomEditor('#editor', { initialContent: initialTree });

HTML Usage (UMD Bundle)

<!DOCTYPE html>
<html>
<head>
  <title>DOM Editor Example</title>
</head>
<body>
  <div id="editor-container"></div>
  
  <script src="https://unpkg.com/@dooboostore/dom-editor/dist/umd-bundle/dooboostore-dom-editor.umd.js"></script>
  <script>
    const editor = new dooboostoreDomEditor.DomEditor('#editor-container', {
      debug: true
    });
  </script>
</body>
</html>

API Reference

DomEditor Class

Constructor

new DomEditor(target: string | HTMLElement, options?: DomEditorOptions)

Options

interface DomEditorOptions {
  /** Initial content: HTML string or structured NodeData */
  initialContent?: string | NodeData;
  /** Enable debug mode */
  debug?: boolean;
  /** Custom CSS styles to inject */
  customStyles?: string;
  /** Drag activation delay in milliseconds (default: 500) */
  dragDelay?: number;
  /** Enable mobile touch support */
  enableMobileSupport?: boolean;
}

Methods

Content I/O

// Load HTML string or structured NodeData
editor.loadContent('<div>New content</div>');
editor.loadContent(nodeData);

// Get current HTML content
const html = editor.getContent();

// Export structured root element data
const data = editor.exportData(); // ElementNodeData

// Import structured data
editor.importData(data);

Lifecycle

// Destroy editor and clean up
editor.destroy();

Data Types

ElementData

interface ElementData {
  nodeType: 'element';
  tagName: string;
  id?: string;
  className?: string;
  attributes?: Record<string, string>;
  children?: NodeData[];
}

interface TextNodeData {
  nodeType: 'text';
  textContent: string;
}

type NodeData = ElementData | TextNodeData;

Features in Detail

Drag & Drop System

Smart Activation: 500ms hold delay prevents accidental drags
Visual Feedback: Clear indicators for drop zones and positions
Mobile Optimized: Touch-friendly with scroll detection
Nested Support: Drag elements into other elements as children

Property Editor

Live Editing: Change tag names, attributes, and content in real-time
Attribute Management: Add, edit, and remove HTML attributes
Visual Interface: User-friendly forms for all editing operations

Content Export/Import

Export current edited tree as JSON.
Import JSON into editor and resume editing flow.
Export HTML string for direct embedding.

Mobile Support

Touch Events: Full touch event handling for mobile devices
Scroll Detection: Smart detection between scroll and drag intentions
Responsive Design: Works on all screen sizes

Animation System

Smooth Transitions: CSS-based animations for all interactions
Visual Feedback: Hover effects, selection indicators, and drag previews
Performance Optimized: Hardware-accelerated transforms

Browser Support

Chrome 80+
Firefox 75+
Safari 13+
Edge 80+

Examples

Basic HTML Builder

import { DomEditor } from '@dooboostore/dom-editor';

const editor = new DomEditor('#builder');

// Add event listener for content changes
document.getElementById('export-btn')?.addEventListener('click', () => {
  const html = editor.getContent();
  console.log('Generated HTML:', html);
});

Persist and Restore

const saved = editor.exportData();
localStorage.setItem('dom-editor:data', JSON.stringify(saved));

const raw = localStorage.getItem('dom-editor:data');
if (raw) {
  editor.importData(JSON.parse(raw));
}

Form Builder

import { DomEditor } from '@dooboostore/dom-editor';

const formBuilder = new DomEditor('#form-builder', {
  initialContent: `
    <form>
      <div class="form-group">
        <label>Name:</label>
        <input type="text" name="name" />
      </div>
    </form>
  `
});

Page Layout Designer

import { DomEditor } from '@dooboostore/dom-editor';

const layoutDesigner = new DomEditor('#layout-designer', {
  customStyles: `
    .layout-section {
      min-height: 200px;
      border: 2px dashed #ccc;
      padding: 20px;
    }
    .layout-header {
      background: #f8f9fa;
      padding: 20px;
    }
  `
});

Development

Building from Source

# Clone the repository
git clone https://github.com/dooboostore-develop/packages.git
cd packages/source/packages/@dooboostore/dom-editor

# Install dependencies
pnpm install

# Build all formats
pnpm run build

# Watch mode for development
pnpm run watch

Available Scripts

pnpm run build - Build all formats (ESM, CJS, UMD)
pnpm run build:esm - Build ES modules
pnpm run build:cjs - Build CommonJS modules
pnpm run build:umd-bundle - Build UMD bundle
pnpm run watch - Watch mode for development
pnpm run typecheck - Type checking

Best Practices

Initialize the editor with a stable container element size.
Use structured NodeData for long-term persistence or server sync.
Sanitize untrusted HTML before passing it into loadContent.
Call destroy() when unmounting to clean up editor resources.

Troubleshooting

Issue: Element not found: #selector in constructor
Solution: ensure target element exists before creating DomEditor.

Issue: Dragging feels too sensitive on touch devices
Solution: increase dragDelay in options.

Issue: Imported JSON fails
Solution: root object must be nodeType: 'element' and follow NodeData schema.

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

Support

📧 Email: [email protected]
🐛 Issues: GitHub Issues
💬 Discussions: GitHub Discussions

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@dooboostore/dom-editor

Features

Installation

Import Guide

Root import (recommended)

Bundle entry import

Quick Start

Basic Usage

With Custom Options

Structured Data Import

HTML Usage (UMD Bundle)

API Reference

DomEditor Class

Constructor

Options

Methods

Content I/O

Lifecycle

Data Types

ElementData

Features in Detail

Drag & Drop System

Property Editor

Content Export/Import

Mobile Support

Animation System

Browser Support

Examples

Basic HTML Builder

Persist and Restore

Form Builder

Page Layout Designer

Development

Building from Source

Available Scripts

Best Practices

Troubleshooting

Contributing

License

Support