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

re{code}commerce

<p><strong>Re{code} Front HTML Editor</strong> adds a fixed toolbar to the frontend of your WordPress site (visible only to users who can edit the current post). Click <strong>Edit</strong>, modify the HTML directly in the editor, then hit <strong>Save & Preview</strong> — the page updates in place with no reload required.</p>
<h4>Features</h4>
<ul>
<li><strong>Live on-page editing</strong> — no page reload, no switching to the backend</li>
<li><strong>Lightweight plain textarea editor</strong> — no external dependencies, works everywhere</li>
<li><strong>Format toolbar</strong> — Bold, Italic, Strikethrough, Highlight, Inline code, H2, H3, Paragraph, Blockquote, UL, OL, Insert link, Insert image</li>
<li><strong>Keyboard shortcuts</strong> — Ctrl+E (open/close), Ctrl+S (save), Escape (cancel), Ctrl+B/I/K</li>
<li><strong>Custom Snippets</strong> — save any HTML block as a toolbar button; use {|} to mark where the cursor lands after inserting</li>
<li><strong>Element Picker</strong> — click any element on the page to discover its CSS selector, navigate ancestor breadcrumbs, and copy it to Settings</li>
<li><strong>Dark and Light themes</strong> configurable in Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> Front HTML Editor</li>
<li><strong>Configurable content selector</strong> — choose from popular theme defaults or enter any custom CSS selector</li>
<li><strong>Secure</strong> — 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 <strong>✏️ HTML Editor</strong> toolbar appears at the top of the page</li>
<li>Click <strong>Edit</strong> — 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 <strong>💾 Save & Preview</strong> — your changes are saved and the page content updates instantly</li>
<li>Use <strong>🎯 Pick element</strong> if the editor can’t find the content area — click any block to get its CSS selector</li>
</ol>
<h4>Custom Snippets</h4>
<p>Go to <strong>Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> Front HTML Editor <span aria-hidden="true" class="wp-exclude-emoji">→</span> Custom Snippets</strong> to add reusable HTML blocks.<br />
Each snippet gets its own button in the editor toolbar.<br />
Use <code>{|}</code> in the HTML code to control where the cursor appears after the snippet is inserted.</p>
<p>Example:</p>
<pre><code><div class="see-also-block"><div class="see-also-title">See also:</div><ul><li><a href="{|}"></a></li></ul></div>
</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>


Alternatives to Re{code} Front HTML Editor

Top alternatives