jsTaskPaper: Display Taskpaper Todo lists as HTML using Javascript

Posted on December 23, 2013 by David Hilowitz

For the longest time I’ve wanted to set up a giant billboard-style to-do list in my office–something that would be so big that it would be hard to ignore.  I was tempted by Panic’s gorgeous Status Board iOS app, but I didn’t know how easy it would be to integrate my daily Taskpaper-based todo lists with Panic’s widgets. (Also, the thought of tying up my iPad for this project was a no go.) We have tons of old computers lying around here, all perfect for powering a read-only browser-based status board, so it seemed like a no-brainer to throw something together.

Surprisingly, there didn’t seem to be any Javascript-based TaskPaper formatters out there.  So, using Jim King’s tp_to_html.pl script as a starting point, I created jsTaskPaper, a Javascript library for rendering TaskPaper files as HTML. Here’s what the output looks like:

Screen Shot 2013-12-23 at 3.21.45 PM

Usage is pretty simple. You create a div in your HTML like so:

<div id="scratchTasks"></div>

and then you invoke the Javascript lib as follows:

<script type="text/JavaScript">
$(document).ready(function(){
new TaskPaperPanel('#scratchTasks', '<url-of-taskpaper-todo-file>', 4000);
});
</script>

That’s pretty much it. Once you’ve got it set up, you can style it using the taskpaper.css file.

Check it out here: jsTaskPaper

–Dave

6 Comments »

  1. […] post jsTaskPaper: Display Taskpaper Todo lists as HTML using Javascript appeared first on […]

    Pingback by jsTaskPaper: Display Taskpaper Todo lists as HTML using Javascript | Dave Hilowitz — December 23, 2013 @ 5:31 pm

  2. Thanks for this. I used it to create an app to edit Taskpaper files in the browser via Dropbox.

    https://github.com/thrashr888/dropbox-taskpaper-editor

    Comment by Paul Thrasher — January 5, 2014 @ 5:17 am

  3. I can’t get this to work. It’s stuck on “loading…” Is it a CORS issue with Dropbox?

    http://jeffreykishner.com/javascript/jsTaskPaper/demo.html

    Comment by Jeffrey Kishner — January 6, 2014 @ 2:19 pm

  4. Nope! Seems to be a straight-up bug in my code. I’ll get back to you shortly on that. :)

    Comment by David Hilowitz — January 7, 2014 @ 11:44 am

  5. Should be fixed now. Do you want to try another pull? jsTaskPaper

    Comment by David Hilowitz — January 7, 2014 @ 6:39 pm

  6. thanks for the tweet, it’s working now

    Comment by Jeffrey Kishner — January 8, 2014 @ 10:15 am

Leave a comment