Improve the Documentation

Though we strive to maintain high-quality documentation, you may find typos, grammar issues, clumsy explanations, out-of-date information, and other problems.

You can help by fixing these issues or submitting new content.

Klive generates its documentation using Nextra. This article explains how to contribute to improving the documentation.

Follow the steps to get the source code.

Running the Documentation Site Locally

Start the documentation site locally on your development machine with the npm run doc:dev command, then visit http://localhost:3000 in your browser.

This site uses hot module reloading (HMR), so as you modify the documentation, updates are displayed live in your browser. When you have completed all modifications, create a GitHub Pull Request from your working branch to Klive’s master branch for review and merging.

Documentation Structure

You can find these documentation-related folders within the project’s root:

pages: The source documentation files using Nextra and the .mdx (extended markdown) format. Documentation lives in .mdx files. The content of this folder represents the hierarchy of the documentation. Each folder describes its content in a _meta.ts file (you’ll understand them; they map the individual files with the table of contents).
public/images: The image resources of the documentation pages (organized hierarchically). The project contains some other Nextra-related files; please do not touch them. If you have to do so, please add some comments to your submitted PR to explain your intention.

Common Documentation Tasks

Adding a New Page

Create a new .mdx page in the appropriate folder. Use a short name representing the contents you intend to describe.
Optionally, you can create a new folder and add documentation files there.
Ensure you update the _meta.ts file in the new article folder with a suitable title. Place the new article in the location where it fits the best among the already existing articles.

You can consider existing articles as examples.

Creating Hidden Pages

Sometimes you may want to create documentation pages that are accessible via URL but don’t appear in the navigation sidebar. This is useful for:

Supplementary reference materials
Draft content that’s ready but not yet promoted
Special-purpose landing pages
Beta feature documentation

To create a hidden page:

Create your .mdx file in the appropriate folder (e.g., pages/book.mdx)
Add an entry for this page in the corresponding _meta.ts file with display: "hidden"
The page will be accessible via its URL path (e.g., /book) but won’t appear in navigation

Example:

// pages/_meta.ts
export default {
  index: "Introduction",
  "getting-started": "Getting Started",
  book: {
    display: "hidden"  // Page exists at /book but hidden from sidebar
  }
};

The page at pages/book.mdx will be accessible at /book but hidden from the sidebar. You can link to hidden pages from other documentation pages using standard markdown links: [Link text](/book).

See the example hidden page to understand how this works in practice.

Adding images

You can add images following these steps:

Add the following line to the top of the .mdx file:

import ClickableImage from '../../page-components/ClickableImage'

Copy the image to add into the right folder within public/images (under the project’s root folder).
Use the <ClickableImage> component to place your image in an article:

<ClickableImage 
  src="/images/working-with-ide/mem-view.png" 
  alt="Memory view" 
  width={512} 
/>

To set the image’s display dimensions, use the width attribute. The ClickableImage component will handle proper path resolution for both development and production environments.

Get the source code Overview