CogniDocs

🚀 Premium documentation for React, Next.js, Vue, and Svelte — automatically generated from your code.

CogniDocs is a comprehensive documentation tool for JavaScript and TypeScript. Point it at your codebase, and it generates a stunning, premium documentation site with interactive dependency graphs, detailed coverage reports, and 12 professional themes.

🌐 View Live Demo — See CogniDocs in action!

📖 Table of Contents

• Quick Start
• Features
• Supported Frameworks
• Documenting Your Code
• Configuration
• CLI Commands
• Custom Documentation
• Advanced Markdown
• Contributing

📸 Preview

🚀 Quick Start in 60 Seconds

Installation

Choose your preferred package manager:

# pnpm (Recommended - especially for monorepo projects)
pnpm add -g @cognidocs/cli

# npm
npm install -g @cognidocs/cli

# npx (Try without installing)
npx @cognidocs/cli init

💡 Tip: For monorepo/workspace projects, we strongly recommend using pnpm as it provides superior workspace management and dependency handling.

Usage

# 1. Initialize your project
cognidocs init

# 2. Build your documentation
cognidocs build

# 3. Preview locally
cognidocs serve

Your documentation site will be generated in the ./docs directory.

⚡ Features at a Glance

🤖 Intelligent Code Parsing

• Multi-Framework Support - Native support for React, Next.js, Vue 3, and Svelte.
• TypeScript & JavaScript - Full AST parsing for both .ts/.tsx and .js/.jsx files.
• Deep Export Detection - Handles all export patterns (default, named, re-exports, aliases).
• Rich JSDoc Rendering - Supports @example, @see, @link, @tutorial, @deprecated, and more.

📊 Deep Analysis

• Coverage Reports - Track documentation health across 6 categories: Components, Modules, Functions, Classes, Interfaces, and Types.
• Project Metrics - Get instant insights into your project's complexity and structure.
• Zero Configuration - Intelligent defaults that work out of the box.

🛠 Supported Frameworks

CogniDocs handles the specific patterns of your favorite frameworks:

💡 Documenting Your Code (JSDoc)

CogniDocs automatically extracts information from your JSDoc comments. Here’s how to document your code for the best results:

React Components

Document props and provide usage examples.

/**
 * A premium button component with multiple variants.
 *
 * @component
 * @example
 * <Button variant="primary" onClick={() => console.log('Clicked!')}>
 *   Click Me
 * </Button>
 */
export const Button = ({ variant, children, ...props }: ButtonProps) => {
  return (
    <button className={variant} {...props}>
      {children}
    </button>
  );
};

Functions & Logic

Use standard JSDoc tags for parameters and return types.

/**
 * Calculates the total price including tax.
 *
 * @param price - The base price of the item
 * @param tax - The tax rate (e.g., 0.15 for 15%)
 * @returns The final price with tax applied
 *
 * @deprecated Use `calculateTotalV2` for better precision.
 * @see {@link https://api.docs.com/pricing}
 */
export function calculateTotal(price: number, tax: number): number {
  return price * (1 + tax);
}

⚙️ Configuration

Create a cognidocs.config.js in your root:

export default {
  entry: './src', // Source directory
  output: './docs', // Output directory
  theme: 'gitbook', // Theme (12 available)
  darkMode: true, // Toggle dark mode
  frameworks: ['react'], // Primary framework
  name: 'My Project', // Documentation title
  exclude: ['**/node_modules/**', '**/dist/**', '**/*.test.ts'],
};

Available Themes

• gitbook (Light/Dark)
• github (Light/Dark)
• nord (Light/Dark)
• dracula
• monokai
• solarized-light, solarized-dark
• one-dark
• material-light, material-dark

📋 CLI Commands

📚 Custom Documentation (Guides)

Beyond auto-generated API docs, you can add custom guides (like a "Getting Started" or "Architecture" page).

How to add Guides

1. Create an additional-documentation/ folder in your project root.
2. Add .md files to this folder.
3. Use YAML formatter to organize them:

---
title: Getting Started
description: Quick start guide for new users
category: Guides
order: 1
---

# Getting Started

Your content here...

CogniDocs will automatically discover these files and list them under a "Guides" section in the sidebar.

💎 Advanced Markdown Features

CogniDocs premium UI includes built-in support for advanced markdown elements:

🧜‍♂️ Mermaid.js Diagrams

Visualize complex logic with native Mermaid support.

graph TD;
    A[Source Code] --> B{CogniDocs Parser};
    B --> C[JSON Metadata];
    B --> D[Markdown Guides];
    C --> E[Premium Doc Site];
    D --> E;

🎈 Callout Boxes

Highlight important information using the :::type syntax:

:::info This is an information callout. :::

:::warning This is a warning callout. :::

:::tip This is a helpful tip. :::

:::danger This is a critical danger callout. :::

🤝 Contributing & Community

We welcome contributions! See CONTRIBUTING.md to get started.

• 🐛 Bugs: Report an issue
• ⭐ Support: Give us a star on GitHub!

Built with ❤️ by the open-source community.