Config Options

You can fine-tune the behavior and visuals of the Kodemo Player and Editor using a variety config options.

React

All of the config options listed below can be provided as props on the KodemoPlayer or KodemoEditor React components.

Standalone

If you're using the the standalone player, you can pass config options as an object to the KodemoPlayer constructor.

Options

json`: KodemoDocument`

Used to provide the player with the document JSON that we want to render.

layout: `string = "full"`

By default Kodemo will use a layout that covers 100% of the available viewport width and height.

If you want to control the size yourself, set layout to auto. This will make the player/editor auto-size itself to fit within its parent container.

width/height: `number`

The width & height properties can be used to size Kodemo to a fixed resolution. Note that you will also need to set layout to "auto" for these values to have any effect.

theme: `KodemoTheme`

Used to customize the look and feel of Kodemo. Among other things, you can use this to change the color theme, adjust responsive breakpoints or change the size of text.

The default theme is extended with the theme props you provide. That said you do not need to provide a full theme, only an object containing the theme props you want to override.

menu: `KodemoMenu.Root`

Used to add a menu to Kodemo. The menu contents can be fully customized to add options of your choosing.

In our example, we're adding a menu with a custom dropdown item as well as pagination arrows for navigating the document.

scrollTop: `number`

The initial scroll offset to use when Kodemo first loads.

keyboardPagination: `boolean = true`

Flags whether it should be possible to navigate between timeline steps using keyboard shortcuts. If enabled, viewers will be able to press the arrow keys or space to step forwards or backwards through the document.

copyCode: boolean = true

Determines whether or not we should include a button for copying code subjects to clipboard.

compareImages: boolean = true

By default, we provide a tool for viewers to compare image versions. This helps them easily switch between the current and previous image version. Set this to false to hide the image comparison UI.