Converting OPML to HTML using JavaScript

Adding iOS Touch Events to jQuery Color Picker
July 16, 2012
Front End, Back End, Which End?
July 27, 2012
Show all

Converting OPML to HTML using JavaScript

OPML to List jQuery Plugin code sample

We have been working on workflows this week at SignedOn. One of our workflows includes a neat mind-mapping tool called iMindMap.

The tool allows us to think visually, while categorizing information quickly and re-organize complex interdependent structures in an intuitive way.

“We realized very quickly that we needed the ability to convert our mind-maps into Ordered or Un-ordered HTML Lists.”

From Mind-Maps to HTML Lists

Screen shot of the iMindMap 3D editor

Rapidly generating ideas and tracking bugs in a mind-map is fun and convenient. But storing the result in an image or an SVG is not a practical way of exchanging the information.

For example: it may be helpful for a client to see your non-linear thinking process from looking at the mind-map, but it is very frustrating for linear tasks, like entering bugs into a tracking system.

So we set about creating a jQuery plugin to handle this task. Fortunately iMindMap comes with an OPML export feature. While XML is rarely our favorite way of working with data, it is very consumable.

What is OPML?

According to Wikipedia, OPML stands for “Outline Processor Markup Language” and is an XML format for outlines, defined as “a tree, where each node contains a set of named attributes with string values”. OPML is an out-dated standard. We would advise you not use a format as old as OPML unless you have good reason.

OPML allows years to be written in 2 digits!

OPML in XML Form

Here is an example of an OPML file:

OPML in HTML List Form

The following block of code is an example of what we want the OPML to look like. This code is actually output from our OPML-to-List jQuery Plugin.

Using The OPML to List Plugin

The jQuery plugin does not handle the AJAX for the user, as the user’s AJAX requests may be very specific to the requirements of the application. For example: one user may want to used cached request, another may not. We made the choice not to clutter the jQuery plugin with options.

The following code demonstrates how easy it is to use the OPML to List plugin.


Using the jQuery Plugin allows us to streamline our creative workflow. We can remain abstract and creative in our thinking, while retaining the ability to provide data in more consumable forms for use in: email, bug trackers and web pages.

If you would like us to help you write a jQuery Plugin, contact us today!

Links to The Code

GitHub Repo: OPML to HTML List
Live Demo: Test The Code
jQuery Plugin: View Source

Leave a Reply

Your email address will not be published. Required fields are marked *