Core Features

With Mobius, you can:

  • Stop commuting to your code. Edit global code directly over any WordPress site.
  • Preview changes live in multiple display resolutions.
  • Write code in a powerful editor with built-in Prettier formatting, Emmet abbreviations, navigation tools, and more.
  • Tailor the flexible UI to fit your workflow.

Access all Mobius features from the Mobius Dashboard.

The Mobius Dashboard

To view or hide the Mobius Dashboard, use the Mobius Toggle at the bottom right corner of any Mobius-enabled WordPress site's page. You must be signed into the site as an admin.

The Mobius Dashboard is composed of the Input Pane, the Output Pane, and the Toolbar.

The Input Pane contains the CSS and HTML Editors.

The Toolbar is fixed at the bottom of the page, so it doesn’t obstruct navigational elements or clutter the WordPress Admin Bar. It contains the Swap Panes, Toggle Output, Save, and Mobius Toggle buttons.

Heads-up CSS and HTML

Use the Input Pane to write and update your code directly over any page of your WordPress site. “Heads-up” means Mobius helps you keep your focus on the site. You don't have to constantly commute to a code editor somewhere else. Mobius's CSS and HTML Editors are packed with features to enhance your workflow.

  • True autocomplete, shortcuts, and abbreviations, including all Emmet abbreviations and Tailwind class abbreviations
  • Navigate within your code with a customizable Table of Comments
  • Media query wrap - never hand-write a media query again
  • Beautify.io code formatting

Preview changes

Mobius offers multiple ways to preview your changes.

Changes appear live as you make them directly on the page "behind" the Mobius Dashboard. You see the effect of your code immediately.

You can also toggle on the Output Pane with the Toggle Output button in the Mobius Toolbar. From the Output Pane, you can preview changes using several common device resolutions, such as for mobile and tablet:

The changes to your site are only visible to you until you save your code in Mobius. Once saved, they are applied to your production site.

Custom UI

Make the Mobius Dashboard your own.

  • Swap pane positions and resize them.
  • Adjust the editors' font size.
  • Endlessly customize the Mobius UI with its own CSS Editor. Change colors, fonts, contrast—it's all up to you.
On this page