MBR HTML Generator
A powerful HTML generator using a WYSIWYG visual editor. A free plugin for agencies, web developers, web designers and freelancers.
by Robert Palmer · github.com/harbourbob/mbr-html-generator · website
Install
The author publishes release zips, so WP-CLI can install straight from GitHub:
wp plugin install https://github.com/harbourbob/mbr-html-generator/releases/download/v-1.8.1/mbr-html-generator-v1.8.1.zipReadme
MBR HTML Generator
A two-panel HTML generator for WordPress. Compose visually in TinyMCE on the left; watch the formatted, syntax-highlighted HTML appear in real time on the right.
Available as an admin Tools page and as a [mbr_html_generator] shortcode for embedding on any frontend page or post.
Bundled with TinyMCE 8.6.0 (GPL community edition) — no CDN, no API key, no upsells.
Features
- Two-panel split: TinyMCE editor on the left, live HTML output on the right
- Available as an admin tool and as a
[mbr_html_generator]frontend shortcode - Tidy toggle that cleans up TinyMCE's HTML output for more semantic markup — see below
- Classify toggle that extracts inline
styleattributes into reusable CSS utility classes — see below - Custom CSS panel for writing your own CSS — applied live in the editor and included in the output — see below
- Skeleton loading state inside the editor panel while TinyMCE downloads, so the page feels responsive immediately
- Self-hosted bundled fonts on the frontend (Geist, Fraunces, JetBrains Mono) — no Google Fonts dependency
- Pretty-printed, syntax-highlighted source view that updates as you type or format
- Production-grade formatting via bundled js-beautify
- Auto-save to
localStoragewith silent restore (debounced, no server round-trip) - Multi-tab sync — edits in one tab mirror to others
- Copy-to-clipboard with toast confirmation
- Download as
.htmlfile (respects the Format toggle) - Format toggle (raw vs. pretty-printed) and line-wrap toggle
- Light and dark mode, with the TinyMCE skin matching the chrome
- Live character, word and line counts
- Locally-bundled TinyMCE 8.6.0 and js-beautify — no external CDN dependency, no licence prompts
- UK English throughout, fully translatable
- No tracking, no upsells, no premium tier
Requirements
- WordPress 5.8 or later
- PHP 7.4 or later
Installation
- Upload the
mbr-html-generatorfolder to/wp-content/plugins/, or install the ZIP through Plugins → Add New → Upload Plugin. - Activate the plugin from the Plugins screen.
- To use it in the admin, open Tools → HTML Generator.
- To use it on the frontend, add
[mbr_html_generator]to any page or post.
Shortcode
[mbr_html_generator]The shortcode renders the same two-panel tool inside the post content. Frontend assets (TinyMCE, js-beautify, stylesheets, fonts) are only enqueued on pages where the shortcode is detected — pages without it stay completely unaffected.
Single-instance: Only one [mbr_html_generator] per page is supported. A second copy on the same page renders a notice (visible to logged-in editors only) instead of broken duplicate markup.
Loading behaviour: TinyMCE is loaded in the document footer on the frontend so the page paints before the editor's ~5MB script downloads. While that's happening, a skeleton placeholder with a spinner sits inside the editor panel. The skeleton fades out the moment TinyMCE's init event fires.
Audience: The shortcode is intentionally not capability-gated. Its intended audience is anonymous visitors — web developers, designers, and students who want a quick HTML utility without signing in.
Tidy
The output panel includes a Tidy toggle (on by default) that cleans up TinyMCE's HTML output for more semantic, copy-paste-ready markup. The cleanup runs entirely in the browser via DOMParser — no server round-trip — and falls back to the original HTML on any parsing error.
When Tidy is on, these transformations are applied:
| Input | Output | When |
|---|---|---|
<p><img src="..."></p>, <p></p>, <p><video …></video></p>, <p><audio …></audio></p> |
bare embed | <p> contains only the embed and has no attributes of its own. <p style="text-align:center"><img></p> is preserved (user wants the embed centered). Same rule applies to all four media types. |
<h1><span style="color:red">Text</span></h1> |
<h1 style="color:red">Text</h1> |
Span wraps all of a heading's or paragraph's content. Style and class move up to the block element. Style merging is property-aware: if the block already has a style attribute, non-overlapping CSS properties from the span are merged in. Skipped only when there's a genuine property conflict (e.g. both sides defining color), to avoid losing data. |
<p style="text-align:left"><span style="color:#333">Text</span></p> |
<p style="text-align:left; color:#333">Text</p> |
Same rule applied to paragraphs — non-conflicting styles merge onto the block. |
<p></p>, <p> </p>, <p><br></p> |
(removed) | Paragraph contains no meaningful content. |
<span><span>x</span></span> |
<span>x</span> |
Nested attribute-less spans collapse to one. |
<p style=""></p> |
<p></p> |
Empty style attribute stripped. |
Toggle Tidy off in the output panel header to see TinyMCE's exact output. The Copy and Download buttons always match what's currently displayed in the output panel — so what you see is what you copy.
The toggle state is persisted to localStorage (key mbrHtmlGen.tidy), per-browser, and applies to both the admin tool and the frontend shortcode independently.
Classify
The output panel also includes a Classify toggle (off by default) that extracts inline style attributes into reusable, atomic CSS utility classes. Each unique CSS property/value declaration becomes one class; repeated declarations across elements share the same class. The generated rules are emitted as a single `
Read the full README on GitHub →