LiveCanvas HTML/CSS pagebuilder for WordPress – REVIEW

I go over what I liked and didn’t like about this raw HTML/CSS pagebuilder.

LiveCanvas is a no-frills newcomer to the WordPress pagebuilder market. It doesn’t promise you fancy features or flashy animations, but it does run super lean and super clean. No extra CSS or JS junk on frontend whatsoever!

Let’s go over what makes this a good pagebuilder for old-school style devs.

LiveCanvas unique features

1. LiveCanvas is built for old-school style devs working in pure HTML/CSS.

This is both a pro and a con. If you like working in pure HTML and CSS, and avoiding any PHP logic or drag-and-drop visual nature of newbie pagebuilders, LiveCanvas is absolutely perfect for you.

It very cleanly allows you to define your working space, arranging the layout in the columns you want, and then picking from pre-built templates and content blocks or coding in raw HTML/CSS. This aspect of it alone makes it perfect for devs wanting to get straight to the wiring instead of being forced to operate like newbies.

Then there’s also the ability to create your custom sections and blocks for you to re-use anywhere around your site. Everything is raw HTML based. LiveCanvas feels more like a simple way to static-hardcode rather than an actual dynamic-database pagebuilder.

The HTML/CSS editor is a nice touch. I also enjoyed how it popped up from the bottom like the browser developer tools and comes with different styling options. Syntax auto-correct also nice. It all feels very intuitive.

You can also check out the LiveCanvas founder’s explanation of why he built it:

• LiveCanvas – I built a wordpress page builder from scratch. Here’s how & why 🚀 – reddit

2. LiveCanvas uses the Bootstrap CSS framework.

Again, here goes another pro and con. If you’re one of those build-from-scratch devs that love (and familiar with) the Bootstrap CSS framework, this pagebuilder is built just for you! If you don’t like the Bootstrap framework, then this obviously isn’t for you.

For what it’s worth, I personally don’t like CSS frameworks but will say that LiveCanvas is indeed very very fast with it. It’s really not so bad. To write CSS from scratch would take so much longer. Your call.

3. LiveCanvas loads super fast, no extra CSS/JS on frontend.

It’s very simple how they managed it but also sensible. There’s no extra CSS or JS, because the CSS is already built off the same Bootstrap framework that the theme was built with. And there’s no JS unless you manually enable animations. This is the perfect granular control for developers that want super clean customized designs but without bloated/slow JS animations.

This is what allows LiveCanvas to be so darn fast! I also love that it loads fast on the backend as well. Other pagebuilders can take anywhere from 5-20 seconds to load and that’s a total buzzkill. Makes your site feel so much heavier and that much more annoying to get in and out of.

If you really care about better page scores and not having so much CSS/JS to optimize, LiveCanvas will help you there as well.

4. LiveCanvas is layout-centric, not content-centric.

While LiveCanvas can be used by anyone, it’s really more for someone with an understanding of HTML code. A developer understands how sections, divs, columns, and html work. (LAYOUT FIRST.) First they define the space and then they fill the space.

Whereas non-coders think the opposite way. (CONTENT FIRST.) First they throw items onto the page and then they drag things around to move or resize/reshape them. If you’ve been designing or working with pagebuilders in non-coder mentality, LiveCanvas is not for you.

5. LiveCanvas is not flashy.

This is why I like it, but will also be the reason why others may hate it. Whatever slick graphics and layouts you saw on the website…the actual pagebuilder doesn’t feel like that. It’s very no-frills, no fancy templates and layouts to choose from. The included “prebuilt templates” are more like draft blueprints for you to build upon. Again…that’s perfect for me…but I’m sure many people accustomed to the slick finished Elementor/DIVI designs will think LiveCanvas is “inferior”.

It really depends where you’re coming from. If you’re a noob with no sense of design logic…I think you’re better off with a finished theme or DIVI/Elementor to give you nice design inspirations. LiveCanvas is more for developers that already have finished graphic designs from their clients and now just have to code them into WordPress.

My suggestions to improve LiveCanvas.

1. The plugin should have a simple checkbox to “load Bootstrap CSS framework”.

This is useful if you’re using a theme that doesn’t already have it. Or at least a link in the settings to the documentation that shows you how to enqueue.

2. The left side panel could probably be designed better.

I can’t logically argue with what they have currently…because it makes sense, but I think it could be laid out better for more clarity.

• What they have now is text labels for the sections, and then 2-column block images for the options within those sections.

I sort of wished even the sections could have been 2-column blocks as well but then the distinction between sections vs block options within those sections wouldn’t be as clear.

Aghh…I’m not sure how to improve it and I’m not going to spend the time to figure out somebody else’s UI but I’m certain it could be done better to feel easier instead of me having to read each label till I find the one I want. Maybe small icons next to each section label might do it. *OK, OK. Just leave it alone, Johnny!*

3. There needs to be a preview option when selecting SECTIONS/BLOCKS.

Currently…if I want to choose a section, I pick a section option like “Hero”, “Content”, or “Features”…then I have to squint at all the tiny blocks and pick one randomly and then it pops immediately into my content area as if I selected it. I would prefer this to work differently.

I’ll give you 2 different ways I think you could make it better:

• OPTION 1 – when user selects a main section option, a small screen appears at center of the page allowing users to scroll through the options in multiple columns. It’s easier to see side-by-side this way and should allow bigger thumbnails. This is probably the safer option if LC plans to have more options later.
• OPTION 2 – when user hovers over the option, it (previews) shows in content area but doesn’t commit until you click.

4. Reconsider the marketing.

As much as I feel LiveCanvas was accurately called an “HTML/CSS pagebuilder”, it really isn’t and shouldn’t be compared to existing pagebuilders…that were designed for the non-coding masses. I have no doubt all users will be overjoyed by LiveCanvas’ speed, but I suspect many will complain that it lacks features or doesn’t have the cute blocks and fancy features to click on.

If it were up to me…LiveCanvas could have also been called the “static site pagebuilder” or “hardcode pagebuilder” or just “page-coder”. Because that’s what it really is. With so many people tempted to try static sites…marketing from that angle would more attractively clarify what it is and its unique benefits against other pagebuilders.

Simply put, LiveCanvas lets you hardcode WordPress content and theme areas from scratch. Letting coders return to the simplicity of Dreamweaver days.

Who I recommend for LiveCanvas

LiveCanvas is perfect for you if…

• You like developing in raw HTML/CSS. (Bonus if familiar with Bootstrap.)
• You already have a design in mind, and don’t need pre-polished templates for “inspiration”.
• You want a truly super-fast, super-lightweight, practically static site.
• You want a flexible custom design without JS bloat.
• You don’t need/want “fancy” pagebuilder features.
• You want simple pagebuilder functions in your existing theme, but add very little weight.
• You hate the slow-DB dynamic aspect of WordPress and CMS.
• You’re tempted to try static sites for better speed, but don’t want to leave WordPress.

LiveCanvas is ok for non-coders if…

• You want a clean classy site.
• You’re able to learn or know someone who knows basic HTML/CSS.
• You’re not trying to replicate all the million effects that DIVI/Elementor have.

How does LiveCanvas compare to…

• Newbie pagebuilders (DIVI, Elementor, WP Bakery, BeaverBuilder) – it’s much more lean, but hardly any fancy templates, requires more hand-code and manual designing to get a polished design.
• Developer pagebuilders (Oxygen Builder) – both result in a super fast frontend site. LC doesn’t have all those html ID’s but does load Bootstrap. Oxygen has more features and can do complicated things beyond design but requires full template build and slower backend load and more settings/options to navigate through. LC is faster workflow if you mostly only need HTML/CSS editing for certain bits.
• Gutenberg blocks (Stackable, Qubely, Atomic Blocks, etc) – Gutenberg is easier to use than pagebuilders if you’re not trying to do anything super custom. Gutenberg blocks now have such variety and so much fun to use. You can mix and match blocks from different developers. However, Gutenberg blocks are not yet able to custom-builder headers and footers.

You can try LiveCanvas if you think it’s good for you. (They still have lifetime deals at the moment.)