Core Concepts

Mobius gives you instant access to a global CSS editor, makes your code easier to organize and navigate, and adds a bunch of efficiency-boosters that you won’t find in other WordPress code editors.

IDE Mode

IDE Mode can be toggled by clicking "Toggle Output" in the bottom right.

This opens a preview of your website that will automatically update while you style. A variety of different screen sizes can be viewed by clicking the icons above the preview.

Resize and swap the panels at will by grabbing the drag handles and clicking "Swap Panes."

Autocomplete & Abbreviations

Autocomplete

...

Abbreviations

Mobius adds a variety of quick abbreviations to make styling a breeze.

* Type `..` after any selector and hit the Tab key to open curly braces * Tailwind-CSS inspired syntax - bg: background - p:padding - m:margin - etc

Navigating and Organizing

[[Add how each of these work and maybe an image]]

QuickJump

Quickly jump to a section of code by pressing [SHORTCUT] and typing what you're looking for

Searching, Search and Replace

...

Easily create a table of contents by adding headline comments in the following format


**Headline**
-Subhead-
or w/e the format is

Code Clean Up

Format/Beautify

You can format your code at any time by pressing [[shortcode]]