Introducing Custom Value Viewers

by Randy Luecke
Share on facebook or twitter

Since day one, RunKit has shipped with several fun ways to visualize your data including graphs, charts, and maps. Internally we call these "Value Viewers". As package maintainers you often know how to display your data better than we do. That's why today we're excited to announce we're opening up Value Viewers so developers can build their own!

This new API allows you to render any HTML for your viewer. To create a new viewer, simply require the ValueViewerSymbol from the @runkit/value-viewer package and use it to make a custom property on your objects. RunKit will look for this property and render a custom viewer if it's found. Here's an example we've created for displaying the weather in a more intuitive way than JSON (code available here):

const ZipcodeWeather = require("zipcode-weather"); await ZipcodeWeather("94117");

When a custom viewer is supplied it will automatically be chosen, but a user can always get to our standard viewers using the drop down directly above the viewer. In the example above, you can select "Properties Viewer" to see the original JSON. You can find the code on our NPM pages.

You can read the full documentation here and also see some more complex examples to help you get started.

We're excited to see what developers will build, so contact us if you want to show us what you've built!

What is RunKit?

  • RunKit is an interactive playground for running Node.js in the cloud.
  • RunKit offers serverless functions with zero deploy time — prototype code changes in real time!
  • RunKit can be embedded in your tutorials and docs to make them interactive as seen on lodash.com, expressjs.com, and stripe.com.
Follow RunKit Blog updates with the RSS Feed
Follow @runkitdev on Twitter for the latest updates from RunKit
© 2015–2018 Playground Theory, Inc.