Introducing an editor for WNYC’s Audiogram themes

No more coding JSON. Edit and preview Audiogram designs on one page with this upgrade to WNYC’s popular tool.

When the developers at WNYC first open-sourced their Audiogram tool for making stylized video clips from audio I immediately downloaded it.

It’s an amazing tool that automates what otherwise might take a graphics artist half an hour to make. But almost immediately I realized it was missing something: a theme editor.

Trying to explain to my newsroom (normally a visual bunch) that they needed to open something called a JSON file and then input pixel values to create new designs was not happening – not to mention trying to tell them why they need a comma after this end quote but not a comma after that one.

This and other barriers meant Audiogram creation was left to a handful of more technically inclined journalists. Until now…hopefully.

Designing new themes is as easy as filling out a tax form — and much more fun!

After some developing of my own, I’m happy to open-source a small contribution to this amazing library: a WSYIWYG theme editor.

On the homepage you’ll find an Edit and New button added next to the theme selector. Clicking either of these buttons will take you to a page where you can toggle custom options on and fill them out as you’d like.

Live Editing

Veteran users of WNYC’s tool will recognize that Audiogram’s “overwrite parts of the default” design philosophy is maintained in my tool. Just like before, input the options you want to customize and leave the rest to the default. Now, though, you don’t need to fill out the themes file, save, and reload. You can see a live preview as you design.

The live preview stays up to date as you tweak pixel values.

Create, Update, Delete

It’s just as easy to set up the editor with your current themes file and begin editing them. The editor will override only the theme your editing when you hit Save and be immediately available on the home page. You can also delete themes, so be careful with that one. There’s no undo.

Override older themes to keep them fresh and up to date.

Try It Yourself

You can find my code on Github and it can be installed either locally or on a server using the same instructions as the main app. No extra assembly required!

If you want to try it before installing, I’ve uploaded a live demo to my site. Feel free to play around with it and save what you’d like. Edit my themes or each other’s themes. I’ll make sure to tweet out particularly nice designs.

If you have any feedback I’d love to hear about it in the comments or on Twitter. Please share it with anyone you know who uses the tool or who thought the JSON editing was a bit too daunting to get started.

Happy audiogramming!