Interactive code examples using codapi

A laptop with code editor opened

By Jonas Bengtsson

May 12

I've been wanting to include interactive code examples in the documentation for Dossier for a while now. I really enjoyed using Observable notebooks, but want something more integrated for the documentation. In addition, the fact that Observable is reactive requires a bit of a mental shift for the reader. A much simpler alternative is codapi, which is now integrated into the Dossier documentation.

Getting Dossier to run in codapi was straightforward, since Dossier can already run entirely in the browser. In order to get a simple code editor with syntax highlighting, I'm using CodeJar and PrismJS. There are still some improvements to be made, but I'm happy with the current state of the integration.

For now there are a few examples to the documentation (see e.g. Dossier API getEntity() and createEntity() articles). Please have a look, modify the code, and click on the "Run" buttons to see the results. I hope this will make it easier for users to understand how to use Dossier and provides a foundation for writing the documentation.