Frontend HTML editor for WordPress — edit post_content directly on the page and preview changes instantly without a page reload.

Re{code} Front HTML Editor

Re{code} Front HTML Editor adds a fixed toolbar to the frontend of your WordPress site (visible only to users who can edit the current post). Click Edit, modify the HTML directly in the editor, then hit Save &amp; Preview — the page updates in place with no reload required.
<h4>Features</h4>
<ul>
<li>Live on-page editing — no page reload, no switching to the backend</li>
<li>Lightweight plain textarea editor — no external dependencies, works everywhere</li>
<li>Format toolbar — Bold, Italic, Strikethrough, Highlight, Inline code, H2, H3, Paragraph, Blockquote, UL, OL, Insert link, Insert image</li>
<li>Keyboard shortcuts — Ctrl+E (open/close), Ctrl+S (save), Escape (cancel), Ctrl+B/I/K</li>
<li>Custom Snippets — save any HTML block as a toolbar button; use {|} to mark where the cursor lands after inserting</li>
<li>Element Picker — click any element on the page to discover its CSS selector, navigate ancestor breadcrumbs, and copy it to Settings</li>
<li>Dark and Light themes configurable in Settings → Front HTML Editor</li>
<li>Configurable content selector — choose from popular theme defaults or enter any custom CSS selector</li>
<li>Secure — nonce-verified AJAX, <code>edit_post</code> capability check per-post, content sanitized with <code>wp_kses_post</code></li>
<li>Works with Twenty* themes, Astra, GeneratePress, Kadence, Divi, OceanWP, Flatsome, and most other themes</li>
</ul>
<h4>How It Works</h4>
<ol>
<li>Visit any post or page on the frontend while logged in as an editor or administrator</li>
<li>The ✏️ HTML Editor toolbar appears at the top of the page</li>
<li>Click Edit — the plugin loads the raw <code>post_content</code> from the database into the editor</li>
<li>Edit the HTML, use the format toolbar or keyboard shortcuts</li>
<li>Click 💾 Save &amp; Preview — your changes are saved and the page content updates instantly</li>
<li>Use 🎯 Pick element if the editor can&#8217;t find the content area — click any block to get its CSS selector</li>
</ol>
<h4>Custom Snippets</h4>
Go to Settings → Front HTML Editor → Custom Snippets to add reusable HTML blocks. 
Each snippet gets its own button in the editor toolbar. 
Use <code>{|}</code> in the HTML code to control where the cursor appears after the snippet is inserted.
Example:
<pre><code>&lt;div class="see-also-block"&gt;&lt;div class="see-also-title"&gt;See also:&lt;/div&gt;&lt;ul&gt;&lt;li&gt;&lt;a href="{|}"&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;
</code></pre>
<h4>Security</h4>
<ul>
<li>AJAX requests are nonce-verified</li>
<li>Every action checks <code>current_user_can('edit_post', $post_id)</code> for the specific post</li>
<li>Saved content passes through <code>wp_kses_post</code></li>
<li>The toolbar is never rendered for unauthenticated users or users without edit rights for the current post</li>
</ul>

Alternative Plugins for

Discover the Lists with Re{code} Front HTML Editor