Oxygen Builder is an incredibly powerful tool but when it comes to team collaboration in terms of creating the website, things can get a bit difficult. Officially, the team behind the page builder strongly recommends that only one user edits at a time. Unfortunately, for agencies with major projects, this is impossible and may scare some away from using this tool.

In our opinion, the pros far outweigh these cons, and we’ve found several ways to work around these limitations. In this article, we’re going to discuss how our team collaborate when creating websites with Oxygen Builder. Over the past year, we have transitioned into creating 100% of all of our agency websites and projects in Oxygen, getting a fairly decent understanding of how best to do this.

Update October, 2024: We now use the Collaboration Plugin by DPlugins which resolves the issue of muli user editing on Oxygen Builder. Read our review here.

First, Understand The Limits Of The Builder

Before you even begin to consider collaboration using the Oxygen Builder, it’s important to understand the limitations, and why exactly it is difficult for multiple users to effectively create a website with Oxygen.

First, you should read this article published by the Oxygen team, which states exactly why Edit Locking exists (the mechanism that makes it so only one user can edit at once). Here’s the important stuff:

“Because of the way Oxygen saves global styles, classes, and settings, multi-user or multi-tab editing with Oxygen is highly discouraged.

We recommend using a single tab when working with Oxygen to avoid issues where one tab is saving older data than another, resulting in overwriting your new changes. The same scenario can occur when two or more users are working in Oxygen at the same time.”

Essentially, everything is stored in a central place. Tabs don’t talk to each other, so if one dev adds a custom class or custom css in the global style sheet, and another dev doesn’t, even if the first saves, if the second dev saves after, the classes and styles will be overwritten and lost. Not good for collaboration.

If you need to work as a team, it’s important to understand why this works, so you can best circumvent this issue. Again, the two things that will be overwritten: 1) Custom classes added, and 2) CSS added to global stylesheet.

As long as it’s only one user on a page/template saving, structure will be saved, as well as any styles set for the individual ID of the element will be fine. But if you add classes (important, because this is super time saving), they may be overwritten.

If you don't need to be editing all at once, don't. But if this is essential to your company or project, try out some of the techniques discussed below.

Edit Anyway (Or Disable This)

The first thing to note is that you technically can override Edit Locking, which is exactly what we do. There are no settings to turn on, you simply click the Edit Anyway link. This means our whole team can technically initialize the builder at once, but I’d strongly consider reading more into how we do it. We still need to consider the overwriting issues here.

A cool thing to note is that with Hydrogen Pack (one of our top addons for Oxygen, we use it every day), you can turn off the “Edit Locking” feature, hiding the “Edit Anyway” all together. This is just aesthetically pleasing, but doesn’t really impact the workflow.

Use A Framework

The framework is a mentality, which must be considered during the whole process of designing and building a website in Oxygen. A framework is a collection of CSS classes that work together to help you structure your website in a consistent manner. Frameworks are very prevalent throughout the web design industry. For example, there’s Bootstrap, Tailwind, and more.

With a recent Swiss Knife update, you can bulk upload classes into the builder, call in the framework stylesheet, and use virtually anything you have the list of classes for.

For us, we use an Oxygen specific framework called Core CSS. This is included in OxyNinja Core, which is one of our favorite plugins because of that framework. Here’s the selling proposition, from the website:

“Making a site perfectly consistent was never so easy in combination of Core utility classes and Oxygen Builder. CSS grid columns, cards, typography, sizing & spacing, colors and much more are already set!”

With the framework, we can easily apply Font Sizes, padding and more, without needing to add new CSS classes, and keeping consistent without even needing a central digital style guide. Because the classes are installed on the site from the start of development, no new classes are needed to be added, meaning nothing gets overwritten.

Write CSS Outside Of The Builder

As an agency, we love using CSS to make unique interactions and hover effects. Therefore we usually have a ton of custom CSS that each of our developers write themselves. This would be fine to add to the global style sheet if it was only one user on the website at a time, but there are typically multiple developers working, so we need a way to circumvent the overwriting issue.

To do this, we simply write CSS in a third-party plugin called Advanced Scripts. This is created by the same developer behind hydrogen pack, and is one of our favorite plugins out there. Each developer has his or her own stylesheet which they write their CSS on. Upon saving, styles are applied globally to the website. At the end of the project, all of the styles are combined into a single main stylesheet.

Communicate Constantly

There are many cases where we need to add specific CSS classes to individual elements within the building. When working as a team this is risky due to the issues where things are overwritten. To get it right and not loose any work, We all collaborate using slack do you have a single developer at all of the styles necessary at a point in the day. This is perhaps the biggest annoyance with this builder, but if managed correctly all data will be saved.

Because all of the CSS associated with the classes are in style sheets, all we need to do is add the classes, and the styles will be applied accordingly.

We’re also experimenting with several concepts. For example, we can create a Github repo that contains a central CSS stylesheet, and use the Live Share feature on VS Code to all be able to write styles together. We can then use Advanced Scripts and Statically to deliver the styles to our website. We've also recently adopted the bulk class upload that comes with Swiss Knife.

Do you do things differently that result in an even better collaborative workflow on Oxygen? Let us know in the comments here!