In this article, we're going to take a look at two WordPress page builder plugins that are focused on website speed and low bloat. There are a bunch of similarities between these two platforms, as well as several major differences that may impact your purchasing decision. In this article, we take a look at everything from the usability, back end design, pricing, support, and more to help you understand the differences between Oxygen Builder and LiveCanvas.
Out of all page builders on the market, Oxygen Builder and LiveCanvas are increasingly being grouped into the same category of "low bloat builder". Oxygen has been around for much longer, whereas LiveCanvas was recently released and has less of a following. Because of its newer status, it's missing out on several features which we will discuss in our comparison section.
To ensure that this review was as complete as we could make it, we purchased LiveCanvas and messed around with it on a local installation for several days. Our agency uses Oxygen Builder for the majority of our projects, so we're pretty familiar with the features and pros/cons of it (and we assume many of our readers are too).
We really enjoy Oxygen Builder, so for us, we're trying to figure out if LiveCanvas is a better solution. However, this review is made to be as unbiased as possible, and is created for a consumer trying to compare LiveCanvas versus Oxygen Builder.
We will inject our personal thoughts and opinions into the end of this article, letting you know what we think the best solution is for the majority of people out there.
First, let's take a look at each page builder individually, breaking down the features and pricing structures of both.
You can also use additional themes that are based on Bootstrap 4.
LiveCanvas has several major features, all focused on outputting clean code and building a fast website. It's 100% front end based, similar to competitors. You can drag and drop elements onto a canvas, click text and images to edit, and generally access the benefits that page builders have to offer.
However, it looks like it's made for more of a power user, because you have access to advanced HTML and CSS editing, and you can also create your own blocks of custom HTML snippets to reuse throughout projects.
You can also build your own header and footer, replacing the default ones from your theme.
A major feature that sets this page builder apart is the fact that it outputs pure HTML. Virtually every other page builder that we have tested create proprietary code or short codes to lock you in to their tool. LiveCanvas doesn't do this, which is notable, and not well advertised. This also means that you can export a page built with LiveCanvas outside of WordPress, and even create a completely static website using this tool (that's cool!).
Now that we've covered the major features of this builder, let's take a look at the tool itself. We are going to be discussing the design, usability, and accessibility of the back end builder.
When loading a page element, you have access to a familiar page builder user interface.
On the left, you have a collection of ready made elements that you can drag and drop into your canvas. You can also access a grid builder utility, which allows you to create complex rows and columns that are completely responsive. Let's take a look at all of the elements, and then the grid builder individually.
Readymade elements are sections of a website that are pre styled and created for you. You add these individual sections onto your canvas, remove the placeholder content, and populate it with your own.
These ready made sections allow you to click on the individual elements that make them up, and edit their content directly in the canvas, and the styling in the left hand builder user interface.
When clicking on the tab of a specific row, this menu pops up, which allows you to edit the properties, copy the content, duplicate the row, move it around the page, or access an HTML editor. The two main features of this menu are the HTML editor and the properties editing utility that pops up in the builder UI.
First, the HTML editor toggles a fully featured code editing utility that relates specifically to that individual section of the page. This is the underlying HTML that makes up the section of the page; edit it and the general structure of the page will be edited as well.
The HTML editor can be toggled for any section on the canvas. It is fully featured, and includes debugging tools and auto fill:
The next major aspect of this builder when looking at the editing capabilities of individual elements is the styling and properties that you can change via the builder interface.
The block properties builder tab allows you to change the majority of styling rules available to you with vanilla CSS. This includes padding, alignment, text decoration, general CSS animations, colors, and more. All changes are instantly reflected on the canvas.
You can easily assign custom classes, IDs, and inline CSS styling. You can also edit the global CSS stylesheet directly in the editor.
In addition to the structural readymades elements, you have access to two WordPress integrations; shortcodes and a proprietary “get posts” element.
The shortcode integration is a simple text input field that allows you to place a short code directly into your LiveCanvas page, calling and rendering plugin specific content.
The “Get posts” element is proprietary, and essentially creates a dynamic grid of your WordPress blog posts. This is fairly limited in what it can do, but you can build out custom queries, and display posts on the front end. However, there is virtually no expandability when it comes to styling; you have two main choices – Cards or unstyled. This isn't super great when it comes to displaying a ton of content dynamically, but at least the builder includes this tool.
However, if you are looking to build out a complex blog website, you may want to look to another builder, or use a third party plugin such as Content Views (which uses shortcodes).
With LiveCanvas, you also have access to a fairly advanced grid builder utility that allows you to generate clean HTML and CSS grid layouts by using a graphical user interface.
These premade columns are completely responsive to changes in screen size. On the topic of responsive design, LiveCanvas comes with several built in breakpoints that you can toggle directly in the editor. Changes made to content when these breakpoints are toggled will apply directly to that device screen size (using media queries).
Once you have set up your grid, clicking on the “choose block” interface loads the individual block elements that can be placed on the page. These are different than readymade sections.
You have access to embeds, standard Bootstrap blocks, text, images, videos, SVG icons, and more.
Once you've finished building out your page, you can save it, and changes will appear directly on the front end of your WordPress website. You can also access revision history , and even export the entire page as pure HTML. This is a feature unique to this page builder that you won't find anywhere else, And could be interesting if you are building a purely static corporate website, and want to omit WordPress due to security concerns (look up WordPress to Static Site).
As you can see, this is a fairly decent page builder, but there are several drawbacks that we have come to find in our days of testing.
A big problem is the lack of support for advanced dynamic features. There's no built-in system to conditionally display elements, and there is very limited support for dynamic post display. The built-in get posts element it's very lackluster, and would only work on a very basic corporate website. For anything more, you would probably need to purchase the Content Views plugin (or something like it) to adequately display your content.
We have heard that additional dynamic features are in the works.
We will discuss this further when comparing the similarities and major differences between LiveCanvas and Oxygen Builder.
The final thing to cover is the pricing structure of LiveCanvas. This tool offers a lifetime deal, as well as a subscription. These screenshots were taken during the Black Friday special, so take a look at the crossed out prices if you are reading this after the fact.
There are only two pricing tiers, pro and lifetime. Pro comes in at $39.00 per year and allows you to build unlimited websites. You need to renew after the year to get additional updates. Lifetime comes in at $199 per year, but allows you to build unlimited websites while accessing lifetime updates and lifetime support. There's also a 30 day money back guarantee, so you can test out LiveCanvas features for yourself.
Now let's get into the Oxygen Builder, which is the main page builder that our agency has been using for the past year. We use it due to the flexibility, power, and workflow benefits that come with it.
Like LiveCanvas, the main features of Oxygen Builder are the fact that it outputs incredibly clean code, Allows for drag and drop editing, enables you to build out headers and footers, and comes with global (savable) blocks.
A major differentiating factor that this page builder has when compared to anything else on the market is the fact that it disables the WordPress theme system in totality. Instead, you build the entire website using Oxygen Builder. This is interesting, and requires you to rethink the way that you build out WordPress websites.
Instead of relying on premade templates, stored in your file system and generated by PHP, you need to create templates yourself. Templates can be assigned to post types, or globally. For example, you would create a header template, a single post template, and then populate that single post template with content in Gutenberg.
Oxygen Builder also comes with two additional features, a WooCommerce and a Gutenberg integration. The Gutenberg integration allows you to build a page in Oxygen, and then edit the content such as text and images directly from the Gutenberg block builder. You can also create custom Gutenberg blocks in Oxygen with this integration. The WooCommerce integration allows you to build WooCommerce product pages, cards, and check outs, using Oxygen Builder.
Let's hop into the back end of the Oxygen Builder, and take a look at the features that it comes with.
Oxygen Builder comes with standard elements like images, text, columns, and more, and gives you advanced features for each. In the screenshot above, you can access layout, alignment, text color, and background color for a section under the primary tab. the advanced tab allows you to access virtually everything that CSS has to offer, from text coloring to transform effects.
You can easily toggle between screen sizes and breakpoints, and also view the structure of the page.
The Oxygen Builder is much more complex than the LiveCanvas builder, which is good and bad. You get access to a lot more, but it's also a bit more difficult to learn.
The dynamic features of this tool are fairly powerful. You can build out customer repeaters, populating them with data queried by custom settings. you can also insert dynamic data such as page titles, excerpts, categories, and more.
Every single element also comes with conditions, which you can use to toggle the visibility based on a collection of data points:
Once you're done building out the page, Oxygen generates a collection of custom shortcodes which renders the page on the front end when called by a visitor's browser. The code output is incredibly clean (but not straight up Bootstrap+HTML like LiveCanvas).
Oxygen pricing Is also a bit more nuanced than LiveCanvas, as you can purchase add-ons, or the straight up builder.
Everything is lifetime and unlimited, except the top tier plan gives you access to the WooCommerce integration, as well as the Gutenberg block builder, whereas the basic plan only gives you access to the Oxygen Builder.
The company offers a 60 day money back guarantee, meaning that you can try the product out, and if you don't like it within 60 days, return it for a full refund.
LiveCanvas outputs pure HTML code, and is built directly on the Bootstrap 4 framework. This differs from Oxygen Builder, which outputs its own custom shortcodes, locking you into the tool. A unique feature of LiveCanvas (that no other page builder can do) is that users can export a static page directly from the builder.
Because of this, LiveCanvas allows you to edit the actual HTML structure of the page directly from the builder, as well as the CSS. We really like the code editor that is included with the page builder; it comes with debugging features as well as autocomplete, which we really miss in the Oxygen Builder (add that to the CSS editor, PLEASE!).
Oxygen Builder has two major features that LiveCanvas does not. The first is the conditions engine, which allows you to display and hide sections based on different conditions such as device type, user login status, and more. This is incredibly advanced, and allows you to create super dynamic websites that change based on different variables.
Oxygen also has support for dynamic content through their lovely repeater element. This repeater element allows you to display posts, and custom post types while allowing you to layout the content in a completely custom manner.
Another big difference is the fact that you can insert PHP directly into pages using Oxygen Builder, whereas you need to follow the standard route with WordPress when using LiveCanvas, and create a custom shortcode.
LiveCanvas itself also has no support for WooCommerce, but if you are using a theme built for WooCommerce and using Bootstrap 4, this concern is invalidated.
You should also consider the communities surrounding the two builders. LiveCanvas is much smaller then Oxygen Builder, meaning that their community is smaller (100 members in their FB group, compared to Oxygen's 18k), as well as the third party add-on ecosystem. There are dozens of 3rd party add-ons created specifically for Oxygen Builder which seriously enhance the tool and your workflow with it. From what we can tell, there are essentially no additional add-ons for LiveCanvas. At the same time, LiveCanvas is definitely not as complex as Oxygen, meaning that it is difficult for us to see a similar ecosystem evolving around it, even well into the future.
It always boils down to “it depends”. For some, Oxygen Builder is the clear winner. For others, LiveCanvas may be the best choice. In our opinion, these are the customer groups that would benefit most from each tool.
Oxygen Builder – Building Complex Websites
There's no doubt about it, Oxygen Builder is a much more powerful platform than LiveCanvas. This allows you to build complex websites that are incredibly dynamic, and integrate with additional plugins and custom PHP. At the same time, this power gives Oxygen a learning curve that is definitely more difficult than LiveCanvas.
LiveCanvas – Building (really) Basic Websites
LiveCanvas is quick and easy to use, but doesn't give you access to advanced features like conditions and dynamic repeater building. Therefore, it is much more suited to building out basic websites that load quickly and look good on the front end.
There is 1 issue with this recommendation. Once you use Oxygen Builder and figure out how to be efficient with the tool, you can create basic websites as well as complex websites fairly quickly. Oxygen Builder outputs incredibly low-bloat code as well, which essentially invalidates LiveCanvas' main selling point of speed.
Something else to consider is that the Oxygen agency package costs $169 at the time of this publication, whereas the lifetime package of LiveCanvas comes in at $199. In our opinion, you are paying more for less features.
Therefore, if you use Oxygen Builder, it's probably a good idea to stick with it. However, if you're on the fence between the two, and you know that you will only be building basic websites (and are intersted in that static HTML output), then LiveCanvas is a viable option.
There's also one more caveat when comparing Oxygen Builder and LiveCanvas that you must consider. LiveCanvas allows you to use a theme built with Bootstrap 4, whereas Oxygen Builder disables that completely. There are many WordPress themes out there that add complex functionality out of the box, saving you a lot of time when building your website. This is especially true with WooCommerce.
Oxygen has an official add-on for WooCommerce, but this is quite finicky and doesn't work very well. We have used it many times in the past, and there are a ton of things that could be improved. If using LiveCanvas and a theme designed specifically for WooCommerce, you may end up saving time and ending up with a better end product. (this is just speculation because we have never used LiveCanvas on an ecommerce project before.)
Both of these products get grouped into the same category due to their focus on clean code and website speed, but are incredibly different products. The Oxygen Builder is much more powerful due to the fact that it completely replaces the WordPress theme, allows you to access PHP directly in the backend editor, has a conditions engine built in, and more.
At the same time, LiveCanvas outputs pure HTML, and allows you to use a WordPress theme. However, there are virtually no dynamic aspects to this tool, and surprisingly it is pricier than the Oxygen Builder (when looking at lifetime pricing).
Both offer money back guarantees, so we recommend purchasing both of them if you can, testing them out, and seeing which one you like better. LiveCanvas is probably a bit easier to get ahold of, whereas Oxygen is more powerful.
If you have any specific questions related to this article, feel free to leave them in the comments section below.
Finally, a funny meme we found in the Oxygen FB group:
IsoGroup- Web Dev/Design, WordPress and More