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.

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.

import React from 'react'
import ReactDOM from 'react-dom/client'
import { KodemoPlayer } from '@kodemo/player';

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<KodemoPlayer
// Disabled pagination
keyboardPagination={false}>
</KodemoPlayer>
</React.StrictMode>
)
import React from 'react'
import ReactDOM from 'react-dom/client'
import { KodemoPlayer } from '@kodemo/player';

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<KodemoPlayer
layout="auto">
</KodemoPlayer>
</React.StrictMode>
)
import React from 'react'
import ReactDOM from 'react-dom/client'
import { KodemoPlayer } from '@kodemo/player';

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<KodemoPlayer
layout="responsive"
width={1280}
height={720}>
</KodemoPlayer>
</React.StrictMode>
)
import React from 'react'
import ReactDOM from 'react-dom/client'
import { KodemoPlayer } from '@kodemo/player';

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<KodemoPlayer
theme={{
tabHeight: 60,
colors: {
active: 'red'
}
}}>
</KodemoPlayer>
</React.StrictMode>
)
import React from 'react'
import ReactDOM from 'react-dom/client'
import { KodemoPlayer } from '@kodemo/player';

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<KodemoPlayer option='value'></KodemoPlayer>
</React.StrictMode>
)
import React from 'react'
import ReactDOM from 'react-dom/client'
import { KodemoPlayer } from '@kodemo/player';

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<KodemoPlayer
// Scroll down 100 pixels
scrollTop={100}
</KodemoPlayer>
</React.StrictMode>
)
import React from 'react'
import ReactDOM from 'react-dom/client'
import { KodemoPlayer } from '@kodemo/player';

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<KodemoPlayer
json={/* the document JSON to render */}>
</KodemoPlayer>
</React.StrictMode>
)
import React from 'react'
import ReactDOM from 'react-dom/client'
import { KodemoPlayer } from '@kodemo/player';

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<KodemoPlayer
// Hide copy to clipboard button
copyCode={false}>
</KodemoPlayer>
</React.StrictMode>
)
import React from 'react'
import ReactDOM from 'react-dom/client'
import { KodemoPlayer } from '@kodemo/player';

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<KodemoPlayer
// Disables the image diff UI
compareImages={false}>
</KodemoPlayer>
</React.StrictMode>
)
const config = {
keyboardPagination: false
}

const player = new KodemoPlayer(config);
interface KodemoTheme {
/**
* The height of the subjects tab bar
*/
tabHeight: number;

/**
* The height of the subjects tab bar on small screens.
*/
tabHeightSmall: number;

/**
* Optional rounding for the top left corner of the subjects tab bar.
*/
tabBarTopLeftRadius: number;

/**
* Optional rounding for the top right corner of the subjects tab bar.
*/
tabBarTopRightRadius: number;

/**
* Horizontal padding to use around the story, in pixels.
*/
storyPaddingH: number;

/**
* Vertical padding to use around the story, in pixels.
*/
storyPaddingV: number;

/**
* The CSS height to use for subjects on small screens.
*/
subjectsMobileHeight: string;

import React from 'react'
import ReactDOM from 'react-dom/client'
import { KodemoPlayer, Pagination } from '@kodemo/player';
import { KodemoMenu, Dropdown } from '@kodemo/util';

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<KodemoPlayer menu={<Menu />}></KodemoPlayer>
</React.StrictMode>
)

function Menu() {
return (
<KodemoMenu.Root>
<KodemoMenu.Dropdown>
<Dropdown.Item onSelect={() => {}}>
This is a custom dropdown item
</Dropdown.Item>
</KodemoMenu.Dropdown>

<KodemoMenu.RightSlot>
<Pagination />
</KodemoMenu.RightSlot>
</KodemoMenu.Root>
);
}