This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
Sign in to like and favorite skills
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
HTML Position Editor - 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.
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 # This file
The entire application is contained within
index.htmlEditorAppfileManagerpageManagerelementManagerhistoryManagerexportManagerviewManagereventHandlerEditorApp.stateEditorApp.elements# Development server (recommended for proper CORS handling) python -m http.server 8000 # Navigate to http://localhost:8000/ # Or use any other local server: # - VS Code Live Server # - Node.js http-server # - PHP built-in server
// Test PDF export (print) EditorApp.exportManager.exportToPDF() // Test PDF export (image) EditorApp.exportManager.exportToPDFImage() // Test SVG export EditorApp.exportManager.exportToSVG()
// Check current selection console.log(EditorApp.state.selectedElement) // List all movable elements console.log(EditorApp.state.movableElements)
Loaded from CDN:
EditorApp.init()EditorApp.fileManager.openFile()EditorApp.fileManager.saveFile()EditorApp.exportManager.exportToPDF()EditorApp.exportManager.exportToPDFImage()EditorApp.exportManager.exportToSVG()EditorApp.elementManager.selectElement(element)EditorApp.elementManager.startDrag(event)EditorApp.elementManager.startResize(event, handle)// View current state console.log(EditorApp.state) // Check frame document console.log(EditorApp.getFrameDocument()) // Force history save EditorApp.historyManager.saveState() // Clear selection EditorApp.elementManager.clearSelection()