Iterating JsonSchematic

July 10th, 2022
json schemasvelte

Iterating JsonSchematic

Wether it be for JSON Schema or TypeScript, I’m always craving a good documentation generator. I mean, it’s awfully nice to have your editor show you relevant hints, signatures, bits and pieces, but sometimes one needs to step back and have a way to see the big picture.

Alas, there are not a lot of those in the JSON Schema world. So when I began to dabble in Svelte a while ago, that’s the itch I decided to pedagogically scratch, and thus jsonschematic was born. It doesn’t look mega-glamorous, but it supports the vast majority of JSON Schema’s keywords.

Original version, not the prettiest, but serviceable.

Lately, I’ve felt the need to revisit that project. So meet the early stage of JsonSchematic’s next incarnation. I haven’t ported all the JSON schema keywords to it yet, but I like to think it does look snazzier than the previous version.

Upcoming version, prettier, soon to be serviceable.

How to use it

Screenshots are nice and all of that, but how does one can actually use this new version of JsonSchematic? Right now, there are two ways: smack right into a web page, or as a Svelte component.

The easy way

You just want to use jsonschematic to see a schema? Well, that’s going to be easy peasy.

You need to download and extract jsonschematic package’s archive:

# get it
$ npm pack @infinity-interactive/jsonschematic@next

# unarchive it
$ tar -zxf infinity-interactive-jsonschematic*.tgz

# dive into it
$ cd package

Now, if you open the file examples/index.html in your browser, you should see the example ‘software release’ schema. (Mind you, if you are using Google Chrome, chances are that the browser will complain about CORS and local files, and you’ll have to access the page via a web server. uuurgh )

To change that schema to anything you desire, open index.html in your editor and change the schema path. It can be a local file, can be an url, it’s all good.

<html>
    <head>
        <link rel="stylesheet" href="../dist/style.css" />
    </head>
    <body>
        <div id="jsonschematic-app" />

        <script type="module">
            import { startJsonschematic } from '../dist/jsonschematic.es.js';

            startJsonschematic('jsonschematic-app', './release-schema.json');
        </script>
    </body>
</html>

And… yeah, that should be it. Told ya it’d be easy.

Use as a Svelte component

You want to use the JsonSchematic components as part of your own Svelte or Sveltekit project? Okay.

You install it:

# install jsonschematic as a dev dependency
$ npm install -D @infinity-interactive/jsonschematic@next

You use it:

<JsonSchematic
  schemas={[
    'https://standard.open-contracting.org/schema/1__1__3/release-schema.json'
  ]} />

<script>
    import { JsonSchematic } from '@infinity-interactive/jsonschematic';
</script>

That’s it. Eventually there will also be the possibility to import individual components piecemeal, but for now: baby steps.

Next step: I need you

Yes, you. I need some feedback to know if that’s something other peeps would be interested in using. Are there specific features you’d like to see included? Some weird use cases you’d be going for? Or is there already a better solution out there? Hit me with comments, suggestions, whatever either in as an issue in the repo, or go straight for the jugular and wave at me on Twitter.

Enjoy!