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

10 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

  7. Thanks for your marvelous posting! I quite enjoyed reading it,
    you could be a great author.I will make sure to bookmark your blog and definitely will come back in the future.
    I want to encourage yourself to continue your great posts, have
    a nice day!

    Comment by Wechat — April 30, 2014 @ 1:08 am

  8. If some one wants expert view regarding blogging after that
    i suggest him/her to go to see this webpage,
    Keep up the good work.

    Comment by On This Website — July 13, 2014 @ 9:54 am

  9. Helpful info. Lucky me I discovered your website accidentally, and I’m
    shocked why this twist of fate didn’t came about earlier! I bookmarked it.

    Comment by Http://Www.Thornta.Com/Upgrades.Html — July 24, 2014 @ 7:01 am

  10. When someone writes an piece of writing he/she retains the image of a user
    in his/her brain that how a user can understand it. Therefore that’s why this post is
    outstdanding. Thanks!

    Comment by offers — August 10, 2014 @ 3:43 pm

Leave a comment