What is Kodemo#
Kodemo is an open source tool for creating more engaging code tutorials, walkthroughs and documentation. Documents can be created and shared in the cloud on kodemo.com, or you can integrate it with your own app using the @kodemo/player package.
The @kodemo/player is available open source at github.com/kodemoapp/player.
Story and Subject#
The Kodemo format splits content into two distinct areas. What you're reading here is the story. This is where you'll do all your writing.
The tabs on the right are the subjects you're writing about. We currently support code, image and website (iframe) subjects but the plan is to add more content types in the future.
Effects#
Any part of your story can be linked to a subject. This will make the subject appear when the viewer reads the corresponding part of the story. We call these links effects.
Effects can also be used to bring a specific part of a subject into view. For example, by scrolling to a specific line of code or highlighting a point of interest in an image.
Writing about code#
Kodemo makes it trivial to walk your viewers through code and animate between code changes. Let's take a look at the JSON that makes up a Kodemo document as an example. We can see where the story is defined and right below that we've got our list of subjects.
There are three different subjects available in this example. Each subject may have any number of context-specific fields such as width and height for images or a URL value for websites.
Each subject can exist in multiple different versions. A version is a sequential variant of the same asset. For example, each version could add or remove lines of code from a code subject.
Image highlights#
You can walk your viewers through different parts of an image by creating image highlights.
Here, we're looking at the empty state of the Kodemo editor. The UI tells the user to either upload new files via drag and drop or by clicking the "browse files" button.
If you pay close attention, you can see a list of the currently supported file types at the bottom of the page.