Docusaurus

In this guide, you'll set up docsly in your Docusaurus (opens in a new tab) documentation project.

Prerequisites

Before proceeding with this guide, ensure you've the publicId copied from your docsly dashboard (opens in a new tab).

To copy the publicId, in the dashboard go to Settings > API keys section and click Copy Public ID.

ℹ️

You must use the publicId from the development project in your dashboard while testing locally.

Installation

Install the latest version of @docsly/react package using your favourite package manager.

pnpm add @docsly/react
# or
yarn add @docsly/react
# or
npm install @docsly/react

Initializing docsly

docsly uses swizzling (opens in a new tab) to wrap itself inside the default <Footer /> component provided by Docusaurus.

ℹ️

Wrapping the Footer component doesn't impact the default behaviour. It only allows docsly to enhance the documentation experience.

You need to initialize docsly with the publicId and pathname (to learn more about props, see React component). In Docusaurus, you can get the pathname using the useLocation hook from @docusaurus/router.

To initialize docsly,

Create a new file ./theme/Footer/index.js in the project root.
Copy the below code and paste it in the newly created file.
Replace the publicId copied from the docsly dashboard (opens in a new tab).

./theme/Footer/index.js

import React from "react";
import Footer from "@theme-original/Footer";
import Docsly from "@docsly/react";
import "@docsly/react/styles.css";
import { useLocation } from "@docusaurus/router";
 
export default function FooterWrapper(props) {
  const { pathname } = useLocation();
  return (
    <>
      <Footer {...props} />
      <Docsly publicId="<copied-from-dashboard>" pathname={pathname} />
    </>
  );
}

🥳 Your documentation is now ready to receive interactive feedback using docsly.

⚠️

To avoid misuse of the development project's private ID, you must create a new project and use it's publicId when deploying your project.

Example project

We've a Docusaurus template project working with the latest @docsly/react package hosted live at docusaurus.docsly.dev (opens in a new tab).

You can also check out the code on GitHub (opens in a new tab).

nextra Overview