Check out this Pen:

It's a bare-bones demo illustrating how you can really easily use CodePen with RunKit to prototype or test consuming data from some service. In this case, I have a plan to build a Preact (could be React, Vue etc) component that displays some events. Its part of a larger project that will use that component and others to show some content on the homepage of a new site. Using CodePen I can quickly sketch out my events Preact component and show it to other people, fork it or whatever.

However, as with a lot of demos I need some data. I could just inline some JSON but that's not really very dynamic, and I want to populate this component with random mock data. Luckily NPM has a package for that called Faker. Using RunKit I can test that package, create some fake 'events' and even create an endpoint that my CodePen pen can consume.

NOTE! RunKit offers these endpoints as a courtesy and they are rate-limited! So, think about that and maybe use some sort of caching if you're going to hit the endpoint a lot! In the case below, I've used pouchdb to store the events returned from RunKit in the browser's storage so each viewer of the Pen should only hit the endpoint once.

So combining that data, with some pretty standard Preact component code, I can get a nice little prototype for my Events component that updates each time someone runs it, and doesn't use the same mock data each time. Check it out:

Its pretty simple to get started like this, just check out RunKit, the demos above and figure out what kinda service you want to prototype. All told, you can have something that's a pretty fair approximate of what you want to build in just a few hours, all from your browser.


181 0 2