liuyuplus/html-report-editor

★ 20HTMLAudience · designerComplexity · 1/5LicenseSetup · easy

Mindmap

mindmap
  root((html-report-editor))
    What it does
      Click-to-edit text
      Swap images
      Manage pages
    Modes
      Edit mode safe
      Interactive mode
    Layout tools
      Layer controls
      Alignment tools
      Page templates
    Output
      Single HTML file
      Runs locally

mindmap root((html-report-editor)) What it does Click-to-edit text Swap images Manage pages Modes Edit mode safe Interactive mode Layout tools Layer controls Alignment tools Page templates Output Single HTML file Runs locally

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Take an HTML report received by email, open it in the editor, and update all text and images without writing any code

USE CASE 2

Create a multi-page visual slide deck from scratch using built-in layout templates, then export as a single shareable HTML file

USE CASE 3

Edit a product landing page by clicking directly on elements to change copy and images, without reading or writing HTML

Tech stack

HTMLJavaScriptPythonNode.js

Getting it running

Difficulty · easy Time to first run · 5min

Use freely for any purpose, including commercial, as long as you keep the copyright notice.

In plain English

HTML Report Editor is a local, browser-based tool for editing HTML files as if they were slide decks or visual reports. You open an existing HTML file or paste in HTML code, and the editor lets you click directly on text to change it, swap out images, insert new text boxes, and rearrange elements on the page. There is no account, no cloud upload, and no subscription. Everything runs in your browser on your own computer. The editor has two modes. In edit mode, any scripts embedded in the HTML file are disabled, which is a safety measure that prevents unknown code from running while you work with HTML files from other sources. In interactive mode, scripts are allowed to run, which lets you preview how the original page behaves. The README recommends only using interactive mode with HTML files you trust. You can manage multiple pages within a single document: add new pages, copy existing ones, delete them, and reorder them. For arranging elements on a page, the editor supports layering controls (bring to front, send to back, move up or down one layer), alignment tools, equal spacing distribution, and size matching between components. Common page layout templates are included, and you can save your own custom templates for reuse. A macOS desktop app version is available as a beta download from the GitHub Releases page. On Windows and Linux, or if you prefer not to install an app, you run a local web server with one Python or Node.js command and open the editor in any browser. The macOS app is not yet code-signed, so macOS will show an unknown developer warning on first launch, which you bypass by right-clicking the app and choosing Open. The output is a single clean HTML file that you export when done. The project is released under the MIT license.

Copy-paste prompts

Prompt 1

I have an HTML report with outdated numbers. Using html-report-editor, how do I open the file, click on cells to update them, and export the finished version?

Prompt 2

Show me how to use html-report-editor to add a new page to an existing HTML document, apply a layout template, and insert a text box with custom content.

Prompt 3

I received an HTML file from an unknown source and want to edit it safely in html-report-editor. Explain the difference between edit mode and interactive mode and when I should use each.

Prompt 4

How do I reorder pages and match the size of multiple elements to each other in html-report-editor using the alignment and distribution tools?

Open on GitHub → Explain another repo

← liuyuplus on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.