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 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.
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.
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 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.
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 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.
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.
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 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).
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 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.
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.
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.
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:
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.
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.