Skip to main content

Getting started

Install​

npm install docusaurus-plugin-glossary

Use the preset​

The easiest setup is to swap @docusaurus/preset-classic for the plugin's preset wrapper — it configures the classic preset and wires up the auto-linking remarkremark A markdown processor. Remark plugins transform the markdown AST before it becomes HTML/JSX. plugin in one step:

// docusaurus.config.ts
export default {
  presets: [
    [
      'docusaurus-plugin-glossary/preset',
      {
        glossary: {
          glossaryPath: 'glossary/glossary.json',
          routePath: '/glossary',
        },
        // Standard preset-classic options continue to work:
        docs: { sidebarPath: './sidebars.ts' },
        blog: { showReadingTime: true },
        theme: { customCss: './src/css/custom.css' },
      },
    ],
  ],
};

Create the glossary file​

At glossary/glossary.json (or wherever glossaryPath points):

{
  "title": "Glossary",
  "description": "A collection of technical terms and their definitions",
  "terms": [
    {
      "term": "API",
      "abbreviation": "Application Programming Interface",
      "definition": "A set of rules and protocols that allows different software applications to communicate.",
      "relatedTerms": ["REST", "GraphQL"]
    },
    {
      "term": "REST",
      "abbreviation": "Representational State Transfer",
      "definition": "An architectural style for designing networked applications.",
      "relatedTerms": ["API", "HTTP"]
    }
  ]
}

Start your site​

npm start
  • /glossary now shows the full list
  • Any use of "API" or "REST" in your docs is auto-underlined with a tooltip
  • No imports needed

Next​