tags cannot break the editor structure. Scripts and styles are preserved untouched."}},{"@type":"Question","name":"Why do vw and vh units collapse in other HTML editors?","acceptedAnswer":{"@type":"Answer","text":"Viewport units resolve against the browser viewport, so editors using content-sized iframes collapse heights to zero. This editor uses a fixed-size 16:9 adaptive iframe that gives vw/vh units a stable reference frame."}},{"@type":"Question","name":"What are the limitations of browser-based HTML visual editing?","acceptedAnswer":{"@type":"Answer","text":"Drag-move uses margins, so elements in grid or flex layouts may reflow neighbors. Resizing is panel-only with no drag handles, and export re-serializes the DOM so original indentation may be normalized while content and behavior are preserved."}}]}]}

Verified:GitHub

NQ-PPT-HTML-Editor

Generates a browser-based visual editable version of static HTML files and PPT decks.

1|Updated Jul 13, 2026

Search Tags:#nodejs #browser #export #visual editing #base64 #html editor #ppt slides

One-click install

npx skills add https://github.com/HalseyYang/Skills-HY --skill nq-ppt-html-editor-halseyyang

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: NQ-PPT-HTML-Editor
Source: https://github.com/HalseyYang/Skills-HY/tree/main/NQ-PPT-HTML-Editor
Command: npx skills add https://github.com/HalseyYang/Skills-HY --skill nq-ppt-html-editor-halseyyang

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve? After an AI generates an HTML file (a slide deck, landing page, or document), users often want to fine-tune it themselves—nudge a title, shrink a card, change a font weight—without going back to the AI for every tiny tweak. This Skill converts any static HTML into a self-contained editable version that opens in a browser with a full visual editor, then exports a clean copy with no editor code. ## Core Features & Use Cases - Visual In-Browser Editing: Select elements, double-click to edit text, drag to move, and adjust font size, weight, color, line height, width, and height via a property panel with sliders and arrow keys. - Robust Storage & Export: Original HTML is stored as base64 so GLSL shaders, multiple script tags, and special characters never break the editor; export produces a clean standalone HTML with all editor traces stripped. - PPT and Webpage Support: Detects vw/vh viewport-based slide decks (fixed 16:9 canvas with page navigation) versus px-based scrollable webpages, and adapts the editing canvas accordingly. - Use Case: You generated a PPT deck with an HTML slide skill and want to move a title up and narrow a background block yourself. Run the builder, open the editable file in Chrome, make the changes visually, and click Export to get the clean final deck. ## Quick Start Ask your AI assistant to make your generated HTML file editable, for example: "Make deck.html editable so I can tweak it in the browser."

Frequently Asked Questions about NQ-PPT-HTML-Editor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I make an AI-generated HTML file editable in the browser?▼

Run the build script with Node.js: node build-editable.js input.html output-editable.html myfile. Open the generated file in Chrome or Edge and it enters edit mode immediately, letting you select, drag, and restyle elements visually.

How to visually edit an HTML PPT slide deck without coding?▼

Generate the editable version, open it in a browser, then click elements to select them, double-click to edit text, drag to reposition, and use the side panel to change font size, color, width, and height. Click Export to download a clean final deck.

Does the editor work with WebGL shaders and inline scripts in HTML?▼

Yes. The original HTML is stored as base64, which contains no HTML-meaningful characters, so GLSL shader code with naked < symbols and multiple </script> tags cannot break the editor structure. Scripts and styles are preserved untouched.

Why do vw and vh units collapse in other HTML editors?▼

Viewport units resolve against the browser viewport, so editors using content-sized iframes collapse heights to zero. This editor uses a fixed-size 16:9 adaptive iframe that gives vw/vh units a stable reference frame.

What are the limitations of browser-based HTML visual editing?▼

Drag-move uses margins, so elements in grid or flex layouts may reflow neighbors. Resizing is panel-only with no drag handles, and export re-serializes the DOM so original indentation may be normalized while content and behavior are preserved.