Save 28% - Sale ends in -9 days
Go to Pricing
Editor Enhancer - The Best UI for Oxygen Builder
Back to Documentation

Oxygen Builder CLI

The Oxygen Builder Command Line Interface (OB-CLI) module will enable you to enter simple commands to process complex operations.

OB-CLI using Emmet to create a section with three columns.

Using the Command Line

To reveal and hide the command line, press Ctrl+/ or Cmd+/ from anywhere inside Oxygen Builder. It will then appear just below the top bar. Enter your command and either press Enter/Return on your keyboard, or click the "Run Command" button.

Command formatting is simple. The first part of any command is the action name you want to take place. See the "Commands at a Glance" table below for the list of available commands. Following that is a single space, then the command argument you'd like to process. In the example above, we are using the emmet shorthand "em" to add a section with ID, with columns wrapper inside, and three columns.

Commands At a Glance

CommandShorthandDescriptionDetails
emmetemProcess Emmet inputGo to section
id-Update selected component IDGo to section
classclAdd classes to selected componentGo to section
renamernRename selected componentGo to section

Commands

Emmet

Emmet lets us generate complex layouts quickly with syntax similar to writing CSS. In one line, you can create components and include custom IDs, classes, and attributes.

emmet selector
em selector

Syntax

We've all seen complicated CSS targeting, like this:

section#section-id.class-1[data-a="1234"] > h3 {
    color: red !important;
}

We can use the same concept to create elements in Oxygen Builder. Let's start with a simple example.

emmet section#my-section.class-1.class-2

OB-CLI will process that input to create a section with a custom ID and two classes.

Components

Many element selector options are available. Corresponding Oxygen components don't always match up, so this is a higher level overview of all specific element->component conversions:

ElementOxygen Component
sectionSection
header, footer, mainSection with tag set to element name
divDiv
article, aside, details, figure, hgroup, mark, navDiv with tag set to element name
ul, olDiv with custom tag set to element name
headingHeading
h1-h6Heading with tag set to element name
columnsColumns
textText
rich-textRich Text
li, pText with custom tag set to element name
image, imgImage
videoVideo
iconIcon
a, link-wrapperLink Wrapper
text-linkText Link
buttonButton
code-blockCode Block
inner, inner-contentInner Content

Any other types of elements are default created as divs with custom tag name set to the entered element name.

Targeting Basics

Emmet targeting is nearly identical to CSS targeting. Please review CSS targeting if you are not familiar, and check out the docs from Emmet directly to review.

Other Operations

OperandOperationExample
*XRepeat this component X timessection.class1*2 will repeat section.class1 twice
( )Group layout(div>h2)+(div>p) creates two divs, one with h2 and another with p inside. Without parentheses - div>h2+div>p - wouldn't be the same.
{ }Component namemain{Content} will create main element and set its Oxygen name to "Content"
[ ]Set attributediv[foo][bar="your value"] will add two attributes, one with no value and another with a set value

Formatting and Spacing

Emmet will not read spaces that are outside of double-quotation marks or curly brackets. This will fail:

emmet section {My Section} > div [attribute="foo bar"]

This, however, will succeed:

emmet section{My Section}>div[attribute="foo bar"]

Emmet Use Case: Tables

Creating tables is super easy in Oxygen Builder. While it's not exactly a full-fledged table editor, it will work well for lighter applications.

Update Selected Component ID

Simply, update the selected component's ID with entered option where "new-id" is below.

id new-id

Add Classes To Selected Component

Add classes - separated by spaces - to the selected component.

class new-class-1 new-class-2
cl new-class-1 new-class-2

Rename selected component

Update the Oxygen Builder name for the component.

rename My New Name
rn My New Name

Enhance Your Workflow

Get flowing with Editor Enhancer's suite of extensions and settings that immediately improve your workflow and editing environment.
Get The Full Suite
Editor Enhancer - The Best UI for Oxygen Builder
2022 Editor Enhancer. All rights reserved.
coggithubcopyrightfacebook-official