SoulMirror

Better code editing for Beaver Builders.

Watch Screencasts → Explore Templates →
  • Introduction
  • Getting Started
  • Installation

SoulMirror is a souped-up coding environment that adds a layer of useful developer tools to the HTML, CSS, and JavaScript editors in WordPress.

Inspired by professional editors like VSCode and Sublime Text and built on top of Marijn Haverbeke’s brilliant CodeMirror, SoulMirror brings more ‘professional editor’ functions to the table (e.g. Emmet, Search and Replace, Folding, Formatting/Beautifying, etc.) to improve the experience of writing and editing code in a page-builder.

A screen shot of code.

When active, SoulMirror watches for the ‘arrival’ of default HTML/CSS/JS editors inside the Builder. When one ‘shows up (e.g. from editing an HTML module’s content or viewing custom CSS/JS from Local/Global settings)’, SoulMirror replaces the default editor.

SoulMirror is a zip file that you install like any other WordPress plugin.

Once you’ve installed SoulMirror, open up a Beaver Builder instance and pull an HTML module into your layout.

Toolbar

SoulMirror’s toolbar gives you a set of common code editor controls.

Emmet

Emmet is....

Keyboard shortcuts

SoulMirror comes with several handy keyboard shortcuts to speed up your editing process.