Now is your last chance to buy a lifetime license before we switch to annual pricing. Existing licenses will be unaffected.
read more
docs PHP, CSS & JS

Emmet Integration

Oxygen includes an integration with Emmet, allowing you to add elements or entire layouts using a CSS-like syntax.

To activate the Emmet input, press CMD/CTRL+Shift+E. You'll notice an Emmet input in the +Add pane instead of the normal search box. You can also access this input by clicking the magnifying glass icon in the normal search box.

To get back to the normal search box, you can either click the icon in the Emmet input box or press CMD/CTRL+Shift+A.

After you've typed your abbreviation in the Emmet input, press enter to execute it.

Emmet uses a CSS-like syntax. Where CSS is targeting elements, Emmet is creating elements. It uses similar operators with similar logic.

You can find a full Emmet cheat sheet here: Note that not all of the operations included there will work with Oxygen, but most of them do.

Adding A Single Element

To add a single element, simply type its name in an Emmet-friendly format. This means all lowercase and hyphens instead of spaces. For example:

  • section
  • heading (also available: h1, h2, h3, h4, h5, h6)
  • rich-text
  • text (also available: p)
  • link-wrapper
  • text-link

In cases where a specific HTML tag is available as an alias for an Oxygen element, using that alias will insert the associated Oxygen element and swap its tag to the tag indicated. For example, typing "p" will insert a Text element and swap its tag to "p."

Adding Multiple Elements

To add multiple elements, you can use the child (>), sibling (+), and multiplication (*) operators.

Here's an example that will create a section with a heading inside of it:


Note that spaces are not allowed.

If you want to add a sibling element to the heading inside the Section, you can use the sibling operator:


If you want to add multiples of a single element, you can use the multiplication operator:


This will create 5 text elements inside the section.


Complex structures might require grouping. This can be accomplished by wrapping parts of your abbreviation in parentheses:


This will create a section with 3 Divs. The first two Divs will each have a Heading, Text, and Button element inside them. The third Div will contain a Heading and Text element and a Link Wrapper element with a Text element nested inside. 

This is especially helpful if you plan to use the multiplication operator and want an entire structure duplicated rather than the last element in the abbreviation.

Classes, IDs, Text Content, And Attributes

You can add classes to elements in your abbreviation:


You can add multiple classes, as well:


You can also add IDs to elements:


Or some combination of the two:


You can also add text content to elements  using curly brackets:

text{This is my text content.}

To add attributes, use square brackets. Note that you should not use quotes around the attribute value:

Last modified: March 3, 2023
Copyright © 2024 Soflyy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram