Creating themes for Tumblr sucks.

It’s a testament to the passion developers and designers feel for Tumblr that so many great themes exist – despite the complete lack of tools. No matter how you tackle it, developing a theme involves a time-consuming mess of manual copying and pasting, saving, testing, and copying and pasting again.

TumblrThemr solves this problem, letting you develop navigable themes locally using real data from your Tumblr blog.

Superfluous image of Tumblr theme side-by-side with TextMate

Get the code!

Download now v1.1

TumblrThemr is free as in beer.

If you used TumblrThemr to create a theme, we’d love to see the results! Send an email to tumblrthemr@icelab.com.au or hit us up on Twitter.

How it works

  1. You install our special Tumblr theme that outputs your blog’s data into machine-friendly XML.
  2. We have a web service which converts and escapes that XML into a JSON data source for client-side templating.
  3. We interpret your custom tumblr file and render it using your data.
  4. Then we hijack your theme’s links to reload different pages locally.
  5. Voila, local Tumblr theme development!

How to use

  1. Optionally, install the XML theme (on the right) in a Tumblr blog to test with your own data.
    Note: this will break the public face of your website to visitors, best to use it on a test blog.
  2. Download the TumblrThemr files.
  3. If you’re creating a new theme, add a new file to the themes directory with a .tumblr extension. E.g., daydream.tumblr
  4. Put all your Tumblr theme stuff inside this custom tag {block:tumblrThemr} {/block:tumblrThemr}
  5. Open index.html and use the default settings or specify your own data blog URL and Tumblr theme you created in step 3.

XML theme

The up-to-date source for our XML theme can be found on Github. You'll need to copy and paste the content of this file into the custom HTML textarea of your test Tumblr blog.

View the XML theme on Github

Built with

Made using TumblrThemr.

Notes

  • TumblrThemr enforces ‘well-formed’ themes. That is, for tags like {Caption} that have a {block:Caption} check, you can only get the value of {Caption} by nesting it inside {block:Caption}.
  • ‘Load more notes’ doesn’t work due to cross-domain problems.
  • No support for custom fields (booleans/colours/fonts)
  • Some browsers (Chrome 10+ and Firefox 4) impose security restrictions on files opened directly off the file system. If you’re testing in these browsers you’ll need to serve from a local web server.

Updates

  • 1.1: Added {PostType} to XML theme
  • 1.0: Initial release