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!

Blog Logo



Back to Overview