Last Updated: February 25, 2016
·
1.084K
· dhilowitz

jsTaskPaper: Display Taskpaper Todo lists as HTML using Javascript

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 tptohtml.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"&gt;</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