Kodemo Player

The Kodemo Player is the component we use to view and play back Kodemo documents. It handles all of the client side interactivity such as code transitions, image highlights and navigation.

The player comes in two forms; a React component and a standalone player with all dependencies baked in.

React Component

To use Kodemo within a React project start by installing the @kodemo/player package.

Now you're ready to import the KodemoPlayer component and render it in your app.

So far we're only rendering a blank document so there won't be anything visible on screen. Next, we'll use the json property to tell the player what document to render.

This code is now a fully functional example of how to run Kodemo! There are other properties besides json available for customizing the player size and theme. Read more in Config Options.

Composition

The Kodemo player supports composition, allowing you to extend, customize or remove individual parts of the interface. You can provide a custom player composition as a child of the KodemoPlayer component.

Take a look at a simple example where we use composition to add a custom header to the top of the story. We're also wrapping the story with an additional div for layout purposes.

Besides our custom header we are also providing a render tree for the Story, Subjects and Timeline. In our example we're not making any changes to those components but it is possible to modify them in any way you see fit. For example, you could remove the header tabs, flip the placement of the story and subjects or add custom styles.

Standalone Player

The standalone player is intended to make it easy to use Kodemo without being familiar with or having to install React. For this example, let's keep things simple and include the player JavaScript from a CDN.

Once the player script has loaded, the KodemoPlayer class will be available in the window and we can create a new instance of the player.

The final ingredient will be to feed our new player instance with a document to render. This is done by calling the load method which accepts a single parameter; the JSON document we want to render.

And that's it! If you copy-paste this HTML and run it, it will produce a working version of the Kodemo player on your page.

You can pass a container element to the KodemoPlayer constructor to tell it where to render. If you don't provide a container, the player will automatically add itself to the document body.

ESM Standalone Player

If you want to install the standalone player from npm it's available as @kodemo/player-standalone. Once installed the API for initializing and loading documents remains the same.

Player Options

Both the React component and standalone player can be customized and themed using Config Options.