HTML Position Editor Guide

This skill provides context and guidance for working with the HTML Position Editor codebase - a visual drag-and-drop editor for adjusting element positions in fixed-dimension HTML presentations (375×667px). The editor uses CSS transforms for positioning without modifying the content structure.

What This Skill Does

Provides comprehensive context about the HTML Position Editor project architecture, file structure, development setup, and common tasks. Enables you to effectively understand, modify, and extend the single-file application.

Project Structure

```

simplehtmleditor/

├── index.html # Single-file application (HTML, CSS, JavaScript)

├── html/ # Sample HTML files

│ └── sample01.html

├── docs/

│ └── html-editor-requirements.md

├── README.md

├── LICENSE

└── CLAUDE.md # Project guidance file

```

Architecture Overview

Single-File Application Design

The entire application is contained within `index.html` with inline CSS and JavaScript, organized into logical sections:

1. **HTML Structure**: Editor UI with toolbar, preview frame, and layer panel

2. **CSS Styles**: Organized with CSS variables for theming

3. **JavaScript Application**: Object-based architecture with modular components

JavaScript Modules

The application uses an object-based module pattern with the following components:

Key Implementation Patterns

Development Instructions

1. Running the Application

Start a local development server for proper CORS handling:

```bash

Python (recommended)

python -m http.server 8000

Navigate to http://localhost:8000/

Alternatives:

- VS Code Live Server extension

- npx http-server

- php -S localhost:8000

```

2. Understanding the Codebase

When exploring or modifying the code:

3. Common Development Tasks

#### Adding New Features

1. Create a new manager method on `EditorApp` object

2. Update `EditorApp.init()` to initialize your feature

3. Add UI elements to the HTML structure section

4. Wire up event handlers in `eventHandler` module

#### Modifying Element Manipulation

Key functions in `elementManager`:

#### Testing Export Functions

```javascript

// Test PDF export (print dialog)

EditorApp.exportManager.exportToPDF()

// Test PDF export (image)

EditorApp.exportManager.exportToPDFImage()

// Test SVG export

EditorApp.exportManager.exportToSVG()

```

4. Debugging

Use these console commands to inspect application state:

```javascript

// View current state

console.log(EditorApp.state)

// Check frame document

console.log(EditorApp.getFrameDocument())

// Check current selection

console.log(EditorApp.state.selectedElement)

// List all movable elements

console.log(EditorApp.state.movableElements)

// Force history save

EditorApp.historyManager.saveState()

// Clear selection

EditorApp.elementManager.clearSelection()

```

5. Working with Dependencies

External dependencies are loaded from CDN:

These are referenced via `<script>` tags in the HTML head section.

6. Browser Requirements

Known Issues and Solutions

Export Functionality

Cross-Frame Communication

Important Notes

When to Use This Skill

Use this skill when you need to: