Kodemo is a new format for more engaging and interactive technical documentation. It’s great for tutorials and walkthroughs.
- 🔗 Learn more at kodemo.com
- 👉 Try a live demo
- 👀 Follow @kodemoapp
This repo contains the @kodemo/player package which is responsible for rendering and navigating Kodemo documents. The player is a React component and it needs to be provided with a valid Kodemo document.
To install and integrate @kodemo/player please follow the docs at https://kodemo.com/docs/player.
- Install @kodemo/player using your package manager of choice:
npm i @kodemo/player # yarn add @kodemo/player
- Import and render the
If you want to make changes to the @kodemo/player source here’s how:
- Clone this repository
yarn devto start the development server
- Open the URL from the dev server output and 💥
# run tests yarn test # build a new release yarn build
Adding New Subject Types
Each subject in Kodemo is its own React component. You can easily add your own subject types by following these steps:
- Create your subject component in the subjects directory. I recommend using AbstractSubject as a starting point.
- Export your subject from subjects/index.ts.
- Add your subject to enum/SubjectType.ts.
If you’re planning to work with the Kodemo source here are a few key concepts and names that are good to know about.
storyis the main body text of the documentation.
Subjectsare the individual pieces of content that the documentation covers. A subject can be an image, code, etc.
- Subjects can have multiple
versions. Each version represents a variant of the same subject. For example, multiple versions are used to animate lines being added or removed from code.
timelineis the bar with vertical line segments that indicate which subject that will become active when scrolling.
Effectsare keywords within the story that are linked to a specific subject version. They form the relationship between the story and subjects.