How      works


Q is a MIT licensed

visual journalism toolbox

developed at NZZ Storytelling



WebZurich 25.10.2017


Beni Buess


We believe that journalism should be more visual.


It should be easy for journalists to create visual elements for their stories.

some examples

how journalists use it

choose tool

enter data

embed in article CMS

see it on website

now from a technical perspective

  1. Q editor asks Q server for configured tools
  2. loads JSON schema for selected tool
  3. generates a form based on the schema 
  1. Q editor constantly validates data against schema
  2. sends data to tool service via Q server to get markup/scripts/stylesheets
  3. updates preview (which is a CustomElement with ShadowDOM)
  1. Livingdocs Editor loads iframe for embed dialog from Q
  2. Q shows recent items and preview for target
  3. iframe sends ID and displayOptions as JSON to Livingdocs
  4. Livingdocs shows preview (iframe delivered by special service) and stores the JSON
  1. Livingdocs delivery requests renderingInfo for graphic from Q server
  2. Q server loads graphic data and sends it to map tool
  3. tool responds with markup/scripts/stylesheets
  4. Q server adds scripts/stylesheets configured for target
  5. Livingdocs delivery adds everything to the page markup before sending it to the client.

some specials

  1. By having special stylesheets/scripts configured per tool and target we do theming for and
  2. We have targets for AMP and the native app.
  3. A slackbot tells us whenever someone creates a graphic
  4. There is a service to get a Q graphic as PNG (using headless chrome)
  5. JSON Schema is extended to define relations between properties (e.g. certain options based on other property values) and access control to options based on user roles
  6. Q is MIT licensed

Thanks for listening


Come work with us!



How the visual journalism toolbox Q works

By benib

How the visual journalism toolbox Q works

  • 701
Loading comments...

More from benib