Last Updated: February 25, 2016
·
1.359K
· 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

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside