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.

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:

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.