cognidocs

v0.0.2

Published

3 months ago

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

Downloads

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!

🚀 Quick Start in 60 Seconds

Installation

# npm
npm install -g cognidocs

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

# yarn
yarn global add cognidocs

# npx (Try without installing)
npx cognidocs 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.

🎨 Premium Documentation Sites

12 Professional Themes - GitBook, GitHub, Nord, Dracula, Monokai, Solarized, One Dark, Material (light/dark variants).
Advanced Search - Lunr.js with Cmd+K command palette for instant navigation.
Interactive Dependency Graphs - D3.js force-directed visualization of module relationships.
Mermaid.js Diagrams - Full support for flowcharts, sequence diagrams, class diagrams, and more.
Responsive Design - Works beautifully on desktop, tablet, and mobile.
Dark Mode - Toggle between light and dark themes.

📊 Deep Analysis

Coverage Reports - Track documentation health across Components, 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.

📸 Preview

CogniDocs Dashboard Interactive Dashboard with documentation health metrics and coverage analysis.

Detailed component documentation with props tables and source code view.

Mermaid Diagram Mermaid.js diagrams for visualizing complex logic.

🛠 Supported 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

Excluding Files and Folders

You can exclude specific files, folders, or patterns from documentation generation using the exclude array in your configuration. This is useful for:

Test files (**/*.test.ts, **/*.spec.tsx)
Build artifacts (**/dist/**, **/build/**)
Third-party code (**/node_modules/**)
Development utilities (**/scripts/**, **/tools/**)
Next.js specific folders (**/.next/**)

Example:

export default {
  entry: './src',
  output: './docs',
  exclude: [
    // Test files
    '**/*.test.ts',
    '**/*.test.tsx',
    '**/*.spec.ts',
    '**/*.spec.tsx',

    // Build output
    '**/node_modules/**',
    '**/dist/**',
    '**/build/**',
    '**/.next/**',
    '**/.cognidocs/**',

    // Development utilities
    '**/scripts/**',
    '**/tools/**',

    // Config files
    '**/*.config.js',
    '**/*.config.ts',
  ],
};

💡 Tip: The exclude patterns use glob syntax. Use ** to match any number of directories and * to match any characters within a directory name or filename.

📋 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

Create an additional-documentation/ folder in your project root.
Add .md files to this folder.
Use YAML frontmatter 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.

```mermaid 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! Please see our Contributing Guide for details.

📄 License

Made with ❤️ by the CogniDocs team