Best Bootstrap Visual Editor

In this post I compare the features of currently available Bootstrap editors, discuss how good a job they do in practice before coming to a conclusion about which of them currently is the best Bootstrap Visual Editor.

Best Bootstrap Visual Editor

For designers who either don’t know how to write code or don’t like to write code using a visual editor can be very appealing. A visual editor lets you drag and drop components on to a canvas and you (instantly) see a live preview of your web page. Most people who know how to code are skeptical about visual editors because they often don’t result in clean HTML.

To see which is the best Bootstrap visual editor I’ll briefly discuss their features. I also did some simple tests to see how they perform in practice and what the quality of their output is like. At the end of this post you’ll find a table summarizing the features of the most interesting editors.

Layoutit

Layoutit

Layoutit features

Layoutit has a simple to understand graphical interface. Select and drag elements from the panel on the left to the canvas on the right. The canvas clearly shows where elements like the container, rows and columns are located. Besides the Bootstrap Base CSS and components about half of the Bootstrap JavaScript plugins can be used. The grouping of elements in the panel on the left is almost the same as that on the Bootstrap website making it easy to select them.

Layoutit doesn’t have a code editor. The interface does show a Developer button but that still only shows a visual preview and no code.

With Layoutit you’re limited to dragging and dropping the elements. You cannot change the components. You can however choose between a few options for some components (e.g. the position of the Navbar).

Currently no CSS styling or the option to apply a theme is included with Layoutit.

Layoutit in practice

At first glance adding new elements to the canvas seems easy. But as soon as you try to change something to the existing layout or try to insert a new element between other elements it becomes difficult to get the correct layout.

I also discovered that components are not always correct (e.g. you get 3 thumbnails or 2 media objects at once when you try to insert one). And since you cannot correct the code in the Layoutit editor you need to download the code and then correct it in another editor.

Bootply

Bootply visual editor with preview of starter template

Bootply features

The Bootply Visual Editor is available after you sign up for a free account. With this visual editor you select Base CSS elements and components from a ribbon at the top (with Base CSS on the right and components on the left). When you hover over the canvas you can see the outline of previously inserted rows and columns. You can then click on the row/column to keep seeing its outline before dragging and dropping a new element inside it.

In visual view you can switch between drag-and-drop mode or preview mode. Although you´d expect to be able to check your responsive design with with the visual editor you actually need to toggle to code view first and then click on the appropriate icon to get a preview in another resolution.

Bootply not only provides you with a visual editor but also with a code editor. You click on a button at the top to toggle between the visual – and the code editor. The grouping of elements in the code editor differs from that in the visual editor (and from the Bootstrap website itself) which makes it a bit more difficult to select them. Besides the Bootstrap elements you can also insert icons, image placeholders, add Bootstrap classes and convert your Bootstrap 2 code to Bootstrap 3 with the Bootply code editor.

A distinguishing feature of Bootply is that it contains a large collection of snippets (also called ‘plys’) created and evaluated by other Bootply users. You can also write and run your own CSS rule sets and javascript(s). Your creations are automatically added to the publicly available plys. Bootply’s settings also allow you to work with different versions of Bootstrap or jQuery and even with other includes like jQuery UI of AngularJS.

Currently there are only 3 themes that you can apply to your plys.

Bootply in practice

Adding new components with Bootply’s visual editor is not difficult as soon as you get in the habit of first clicking on a container, row or column to see its outline before selecting a new element. But when I tried to add a new row below a component and inside the container an error message told me to first insert a container, row or span. Adding a new row correctly proved much easier with the code editor.

Mostly the use of the visual editor resulted in clean HTML but sometimes I also found examples of extraneous code. Since you’re not limited to the visual editor with Bootply you can correct this with the code editor.

Divshot

Divshot

Divshot features

Divshot has a very professional looking graphic interface. With this visual editor you can insert components from a panel on the right. Clicking on the name of a component in the panel will (when appropriate) reveal subcomponents that can be selected.

Divshot contains all of the Bootstrap 3 components but not the JavaScript plugins.

Drag and drop a grid row into the container and you will see a series of presets appear in the top panel on the right (e.g. one column full-width, 2 columns with sidebar). Click on a column in the canvas and the top panel on the right will show you all the grid classes that can be specified (xs, sm, md, lg, offsets, etc.).

You can choose which element to work on by selecting one from the breadcrumbs at the top. You can set properties for components in the inspector panel. Click on the element in the canvas and the inspector panel (top-right) will show you its properties and their options.

Divshot contains a code editor. You can use the code editor to work on related HTML, CSS and JS files. In the navigator panel on the left you can create new files or upload existing files and folders.

Divshot has an introductory tour to learn about its features and a user manual. The tour will really take you through all the steps and monitor if each step was executed correctly.

With Divshot you can select a Bootswatch theme from a panel on the left and see a preview of the theme or decide to activate it.

Divshot lets you create and edit LESS files which will automatically be compiled into CSS when you save them.

A unique feature of Divshot is that several people can work on a project.

Divshot in practice

Positioning elements correctly with Divshot is very easy. In the visual editor you can clearly see the outline of the container, rows and columns. Divshot produces really clean HTML.

When I tried working with LESS files I found that this only works with small files. If you need to work with larger LESS files or several LESS files that are imported into one LESS file (like the Bootstrap LESS files) you’d better edit and compile them outside Divshot.

Pingendo

Pingendo Visual Editor with starter template, theme and DOM tree

Pingendo features

Pingende is an installable application. After installing the free download you can choose to start with a starter template. You can drag and drop Bootstrap 3 components from the bar at the top. None of the JavaScript plugins is provided.Pingendo also contains a code editor.

Pingendo also provides the Bootswatch themes to style your page(s).

Specific for Pingendo (besides being installable) is the DOM-tree panel that you can use to specify where you want to insert a new component.

Pingendo in practice

Inserting elements like the container, rows and columns in the Pingendo canvas is mostly very easy. You clearly see the outline of the parent element and the element itself after it’s been dropped. Unfortunately the column element is incorrect. You can of course correct this with the code editor. But because most of the layouts will require you to add several column elements this error can quickly become a nuisance.

The code editor also isn’t easy to work with. It doesn’t show a visual hierarchy of block elements for instance.

Jetstrap

Jetstrap

Jetstrap features

The Jetstrap visual editor contains Base CSS and Bootstrap components. These can be selected from a panel on the left. This panel unfortunately isn’t organized in groupings or in any other logical structure making it somewhat difficult to select an element (e.g. row element at the top and container element at the bottom of the panel). The Bootstrap JavaScript plugins are not available in Jetstrap.

When you click on an element in the canvas the panel on the right shows its properties. For grid rows this also allows you to select a grid (classes) or create a custom one.

Switching to a preview or selecting another screen resolution is done with buttons at the top.

Besides the visual editor Jetstrap also contains a code editor with can be used to edit HTML, CSS and JavaScript.

Jetstrap in practice

In practice I found the visual editor somewhat difficult to work with. Inserting a new row correctly resulted more often in having it inside the Jumbotron or outside the container.

Jetstrap is the only visual editor that doesn’t offer a free plan. Because the evaluation is based on the demo and information provided on the website I can’t say anything about how clean the HTML result is.

Also some of the Bootstrap components are not included and the Navbar component doesn’t contain any links.

Pinegrow

Pinegrow

Pinegrow features

Pinegrow differs from most of the other visual editors in the sense that it’s an application that you install on your computer.

The graphical interface of Pinegrow is very easy to use. On the left you see a panel with the Bootstrap (and HTML) elements. Hover over an element and you’ll see a preview. On the right you see a panel with the DOM tree. Drag and drop an element from the left on to the canvas in the middle. Or continue dragging it on to the DOM tree (for more precise positioning).

The latest version of Pinegrow contains all of the Bootstrap 3 components and JavaScript plugins.

Hover over a component on the canvas and you will see its outline. Click on the component and you will get a contextual menu with options such as delete, copy, edit code, collapse a component and move or clone a component with placer.

Besides the option to drag and drop components on to the canvas Pinegrow also has a code editor.  Above the canvas you’ll see a page dropdown menu where you can select the code editor. To edit the code of one of the components on the canvas just click on it and select the code editor from the contextual menu.

The panel on the left also shows a Prop tab. After clicking on one of the components on the canvas you can customize its properties when you click on this Prop tab. Or you can choose the CSS tab and add a style rule to an element on canvas.

You can also use an existing theme style sheet. Select and/or download a theme and attach it to the HTML file (previewed on canvas) through the manage style sheet option shown on the CSS tab.

One of the distinguishing features of Pinegrow is that you can work with LESS variables. Create a variable on the Vars tab (make sure that the name of the variable start with a @). Go to the CSS tab and choose or add a CSS rule. Choosing or adding a rule will open a panel where you can define a class name, dimensions, etc. Insert your variable name in the desired field. You can also create LESS functions and expressions this way (but not mixins and imports).

You can see a preview of your web page with different screen resolutions (click on the current screen resolution above the canvas and select another screen resolution e.g. laptop/1280px or phone/320px). Pinegrow also allows you to see the same page with different screen resolutions sitting side by side.

Pinegrow in practice

Pinegrow results in really clean HTML. Positioning elements correctly is very easy because you can see the outline of an existing row or column on the canvas and drop the new element into it. But for even more precision you can drop a new element into the DOM tree or use the placer option.

Brix.io

brix.io screenshot

Brix.io features

Brix.io is an online Bootstrap visual editor. With the interface you can add bricks (= components) to a web page: either by clicking on (the star above) a brick in the side panel and then clicking again in a designated area on the canvas or you can use the drag-and-drop method. The side panel shows all the components in groups. You can collapse one or more groups to get an overview of relevant bricks. Brix also contains a Favourite Bricks panel (which should gather all the bricks you use most often).

Editing bricks can be done by clicking on a brick in the canvas panel. This will open the properties panel. You can also edit the code directly. At the bottom of the canvas you see HTML and CSS tabs. Clicking on a tab will open the code editor. If you want to edit an existing CSS file go to the File Manager panel and click on the file name. This will open it directly to the right.

A distinguishing feature of Brix.io is that you can add the names of co-workers and clients to a project which will allow them to collaborate on a project or add comments to (each brick) of your design.

Brix.io contains the Bootstrap components but not the JavaScript plugins. Neither does it allow you to work with the Bootstrap LESS files to design a theme.

There are no starter templates or themes available in Brix.io.

Brix.io provides some basic help in the form of a video (with an “English” commentator who is sometimes difficult to understand).

Brix.io in practice

Unfortunately Brix.io doesn’t produce clean code. The Brix.io editor adds “data-mbcode-id’s” to each component, which you need to remove manually after downloading your project files.

The bricks panel would have been easier to work with if you could collapse all the groups with one command and then only open the group(s) you need to work with. When I worked with Brix.io during the trial period the Favourite Bricks panel kept showing the same 2 bricks (even when I changed the project I was working on). The help video tells you that you can also quickly select a brick with the search box but when I tried inserting the name of a brick in the search box this proved impossible.

Selecting components on a web page was sometimes difficult/impossible. You cannot select any element in the code editor. And when I tried selecting components on the canvas this turned out impossible for parent elements (e.g. a container holding a row or a table).

Brix.io is still in the beta stage which probably explains why some of the existing features do not work as they should. I found the pricing of Brix.io outrageous seeing what it has to offer compared to the other editors.

Frontenda

Frontenda is an online Bootstrap Visual Editor. At the time of writing this addition to my post Frontenda is still very much in beta (several features are not working correctly).

Frontenda features a graphical interface allowing you to create a grid in which you can then drag-and-drop Bootstrap components and 4 of the JavaScript plugins. Besides the visual editor it also contains a code editor.

Frontenda uses Bootstrap Magic for styling themes.

BootTheme

BootTheme currently only provides support for Bootstrap 2. But is still interesting enough to mention here. It’s the only Visual Editor that contains a complete Theme Generator. An update for Bootstrap 3 is foreseen in a couple of months. I’ll keep you posted about this update.

Rapidmoon

Rapidmoon is still very much in the development phase. Based on the Beta version Rapidmoon will contain base CSS elements and components but no JavaScript plugins. Besides the visual editor it will contain code editors for HTML, CSS and JavaScript.

Invokator

Invokator started as an ambitious project but seems to got stuck in beta phase. The last modifications were reported in may 2013. Requests for an account stay unanswered.

Overview of features

In the table below I have compared the most interesting Visual Editors discussed above:

Bootply Divshot Pinegrow Pingendo Layoutit
Base CSS YES YES YES YES YES
Components YES YES YES YES YES
JavaScript Plugins 80% YES 50%
HTML editing YES YES YES YES
CSS editing YES YES YES
JavaScript editing YES YES YES
LESS editing YES YES
Starter templates YES YES YES YES YES
Snippets YES
Themes yes Bootswatch yes Bootswatch

Conclusions

So which Bootstrap Visual Editor is the best?

Clean HTML and correctly positioned components are obviously the first requirement. From this perspective Divshot and Pinegrow are both the best options.

Currently only Pinegrow contains all of Bootstrap’s CSS, components and the JavaScript plugins. But Bootply’s community provides you with a lot more scripts/plugins. With Bootply everything you save will be publicly available and if that’s not what you want then Pinegrow is the better option.

In my opinion the graphical interfaces of Divshot and Pinegrow are the best. Their interfaces actually have a lot in common and are both very easy to work with.

If you’re looking for a free editor then Bootply, Layoutit and Pingendo are the available options.

Working with an app instead of an online editor might fit better within your workflow. If that’s your priority then try Pinegrow or Pingendo. The last is free but the first will result in clean HTML and that will save you (a lot of) time.

Divshot and Pingendo already contain Bootswatch themes but with Pinegrow you can easily attach an existing theme. With Divshot and Pinegrow you can create/customize themes with LESS. In practice the latter proved difficult with Divshot. Personally I prefer Pinegrow when it comes to creating/customizing themes because you can easily attach an existing theme and then customize it with LESS variables, functions and expressions.

The focus in this post was on Bootstrap editing so other features were left undiscussed. When choosing an editor those other features (such as the possibility to work with other frameworks) should obviously also be taken into consideration.

Which Visual Editor do you consider the best? Write a comment to let me and others know. And if you have worked for some time with one or more of these editors let us know what you think about their pros and cons in practice.

35 comments

Eddie - January 12, 2017 Reply

Very interesting site i have bookmarked tutsme-webdesign.info for future reference.

rootoor - December 18, 2015 Reply

Super récapitulatif, regroupement de tous ces frameworks ou studio de developpement. Cela m’a très aidé dans mes travaux. GRAND MERCI

Theo - December 18, 2015 Reply

Merci a toi aussi,

ça fait plaisir de lire que ce billet t’a été utile.

Salut

Olli - October 8, 2015 Reply

Great post – helped me a lot

I went through all the tools and it looks like you have been keeping the list up-to-date recently. If so, you may want to put an updated-at-date, because now it looks like the list is last update March 22, 2014.

Theo - October 17, 2015 Reply

Hi Olli,

thanks. Good to hear that it’s still mostly up to date even though I do not keep it up to date (it’s undoable to keep the post up to date for all of these editors; especially when some of the editors do not publish which changes have been implemented in later releases).

Cheers,

Theo

Tracky M - December 15, 2015 Reply

Agree, some info is outdated, for example divshot is closed and joined the Firebase team. As for me I used some builders from your list – pinegrow, brix, webflow – nice and powerful; for small and fast projects – mobirise is great

arfath - September 22, 2015 Reply

pinegrow the best among all of the front end web bootstrap development tools

Ronnie - August 19, 2015 Reply

I think,as a desktop application,Pinegrow is the best. Pinegrow is simply awesome.

max - August 1, 2015 Reply

you can edit both the less and ccs in Pingendo

Dreighen - June 12, 2015 Reply

Thanks for your review, I initially was using pingendo (and may still) but now that I’ve heard about Pinegrow, I may start utilizing it instead. Thanks for your in depth review!

maxi wu - June 5, 2015 Reply

I’ve tried layoutit! and it is ok for prototyping. but the result you get is a lot different from their preview. I am actually getting resulting with no padding between rows, which is not ideal for production.
will try Pingendo, thanks for the review.

Philippe - April 14, 2015 Reply

Thank you very much for this helpful work.

Ruz - March 30, 2015 Reply

Thanks for a great article!
I usually dont leave comments, but this was a great job!

Theo - March 30, 2015 Reply

Thanks Ruz,

Glad you liked it. Appreciate your comment!

Theo

Martin - March 18, 2015 Reply

Thanks for your this list. I”m going to give divshot a go.

Mehmet Dogan - January 26, 2015 Reply

Very good detailed explanation! Thanks your valubale work.

pyeman - January 22, 2015 Reply

Thank you for actually telling us which ones are best, and not just listing features and benefits. Very useful article.

eleonore - October 4, 2014 Reply

Hello Theo,
Thanks for creating this review.

rm - September 8, 2014 Reply

thank you!

really good stuff and after researching and trying most all that is out there at this time from Coffeecup to Pinegrow and Pingendo … Webflow is the most stable and rapid to understand and start building responsive sites on, however I am still wanting a desktop version for my final long term choice as that fits my biz better. Great review and right on in your evaluations.

Srei - July 20, 2014 Reply

Thanks for the comprehensive roundup of editors. After looking at a few, I chose Pinegrow. So far, I’m delighted with it and it’s certainly speeding things up for me. It also works with the Foundation framework, which some companies I know use too.

+1 for Pinegrow

The Diabolical Mr 4Dee - June 19, 2014 Reply

Great article. One more I would add that I found equally as impressive as pinegrow is webflow. Great interface, themes, support. snippets, videos, tutorials and exports as nice clean code.

Theo - June 19, 2014 Reply

Hi,

thanks!

Looked at your suggestion but that website builder isn’t based on Bootstrap but uses it’s own CSS. And I’m limiting this review to Bootstrap editors.

Cheers,

Theo

Lukasz - June 14, 2014 Reply

You should add brix.io to this list.

Theo - June 14, 2014 Reply

Hi Lukasz,

thanks for this tip. I’ll evaluate Brix.io and will add it to the list. One thing is immediately clear: it sure is expensive compared to the other visual editors.

Regards, Theo

Lukasz - June 19, 2014 Reply

Thanks for your feedback Theo, we’re working on this.

Hasmi - May 30, 2014 Reply

This is fantastic! Thank so much. I don’t code although I can follow and learn by example. Have two super simple bootstrap templates for our first craft show. This is the first article I’ve seen that is thorough, unbiased and clean, both in its analysis and summary. You have saved me so much time and effort. And the $50 for Pinegrow is really affordable. our template is $15 so for 65$ and some effort we can build what we need to promote our event. Thanks for this. It really has been so helpful.

Tim - April 19, 2014 Reply

Good review. I’m wondering how Coffeecup Software’s Responsive Layout Maker compares with these?

Theo - April 22, 2014 Reply

Hi Tim,

looking at the Responsive Layout Maker as a Bootstrap editor the following aspects strike me:

  • currently it only works with Bootstrap 2. Why they made this choice I don’t know. Since the Layout Maker was only released a short while ago I would have expected them to include the Bootstrap 3 grid system.
  • The Layout Maker doesn’t provide Bootstrap components or plugins.
  • There is no code editor included
  • The purpose of the Layout Maker is to create a layout. Not to edit the content. Which makes it a tool that is difficult to compare with the editors discussed in this post.

In my opinion it’s better to judge it independently from the Bootstrap Editors.

Cheers, Theo

Ivan - March 15, 2015 Reply

Coffeecup Layout Maker does not belong in this category. It is just a layout maker that lacks a user friendly design. It is expensive compared to most of the listings and as Theo said, is based on Bootstrap 2. It looks like they have stopped supporting it already and have moved on as they have done with most of the Coffeecup software apps. They have had zero updates since the first month. The only tutorials are a trailer and a couple of mishmash videos on certain features. All of the tutorials are old and outdated just like the software. Like I said, they stopped supporting it and moved on. Pinegrow is Fantastic. The updates are frequent and the tutorials are user friendly.

KEITH - March 23, 2014 Reply

Great article.. and timely as I was digging into a new search for visual Bootstrap editors.

Pinegrow was by far the most powerful and most intuitive tool in the bunch.. kudos to Matjaz and Ivona for a great product with future plans for much much more. Looking forward to integrating Pinegrow into my workflow and seeing how features allow me more freedom to design and create (with solid code behind the curtain).

Jerzy - March 10, 2014 Reply

Thanks for your roundup. I have tried all of them and chosen Pinegrow, because it’s the most powerful, has the most configurable components, works off-line, edits local HTML files, supports other CSS frameworks by plug-ins (e.g. 960.gs), shows multiple viewports simultaneously and costs only $10 for students.

Adhir Pandit - March 10, 2014 Reply

I came from Graphic background and no doubt my vote goes to layoutit

+1 From me! 🙂

Matjaz - Pinegrow - February 13, 2014 Reply

Theo, thanks for a comprehensive review and for including Pinegrow. We have lots of exciting improvements in the pipeline.

Skelly - December 12, 2013 Reply

Nice thorough review of Bootstrap editors.

+1 – Bootply.com

Theo - December 12, 2013 Reply

Thanks Carol,

and thank you for creating Bootply!

Add your comment