Quickly Build and Share a Sitemap with a jQuery Sitemap Creator

January 1, 2009

A while back we saw the SlickMap CSS that generated a sitemap from nested unordered lists and we were inspired. Since the DOM is so easy to manipulate using jQuery, why couldn't we build a nice and quick sitemap creator?  With a little bit of free-time hacking, we came up with the HiFi Sitemap Creator.

HiFi Sitemap Creator

With this tool it is easy to create and collaborate on a sitemap. Using the textbox on the right, you can build textile-like nested lists.  This instantly updates the sitemap to the left.  When you click the save button, a custom link is generated for your sitemap.  Share this with a client and they can see and edit the very same sitemap!  They can even make changes and send a link back.

Additionally, since this is based on CSS it prints beautifully:

sitemap print

This was largely based around the Slickmap CSS and jQuery.  Some custom functions were written to translate the textile list to and from html.  This will allow us to add cool features like edit-in-place and drag-and-drop in the future.  For now though, we really like being able to quickly type plain text and see generate a good-looking sitemap.

We also used the Recess PHP Framework to build a RESTful key-value store for the saved sitemaps.  This took no time at all becuase of the great scaffolding and tools it has out of the box.  It was my first time integrating Recess and jQuery and it couldn't have gone better.

Check out the final product and be sure to leave comments and suggestions on how to improve it.


Shawn Rebelo's avatar
Shawn Rebelo
SyntaxError: expected expression, got '<' button.js:1:0<br /> unreachable code after return statement compiled.js:19:1309

Needs fixing.
Flaxicom.com's avatar
I am looking for an SEO friendly sitemap for my website http://www.flaxicom.com/
windERP's avatar
When I am trying to add any hyperlink than it is not working. I am trying to create for my site http://www.winderp.com/ . Any Idea..?
Grace's avatar
Hi. Not able to save the sitemap. Any suggestion?
Ben's avatar
Cool script. However, when you have a fourth level the tab remains yellow!!!

Can you amend the css pls so that it deepens up to 5 levels?
Aark Mndrews's avatar
Aark Mndrews
Hi, have you ever got the drag drop to work with this?
Mark Andrews's avatar
Mark Andrews
When I try to save the site map nothing happens?

Mark Andrews's avatar
Mark Andrews
Wow this is so helpful. I will be using this with my clients from here on in. Is there a version that I can integrate with my website as a client tool?



Leave a comment