Referência de docs.json

O arquivo docs.json é a configuração central do seu site de documentação Jamdesk.

Campos obrigatórios

name

Tipo: string (obrigatório)

O nome do seu site de documentação. Exibido no cabeçalho e na aba do navegador.

{ "name": "Acme API Docs" }

theme

Tipo: "jam" | "nebula" | "pulsar" | "halo" (obrigatório)

colors

Tipo: object (obrigatório)

{
  "colors": {
    "primary": "#635BFF",
    "light": "#7C75FF",
    "dark": "#4F46E5"
  }
}

Marca

favicon

Tipo: string ou object

Caminho para o arquivo do favicon (SVG recomendado). Forneça uma única imagem para ambos os modos ou variantes separadas light / dark.

{ "favicon": "/images/favicon.svg" }

{
  "favicon": {
    "light": "/images/favicon.svg",
    "dark": "/images/favicon-dark.svg"
  }
}

logo

Tipo: object

{
  "logo": {
    "light": "/images/logo-light.webp",
    "dark": "/images/logo-dark.webp",
    "href": "https://yoursite.com"
  }
}

Tipografia

fonts

Tipo: object (opcional)

Substitua a fonte padrão do tema para o texto e os títulos. Cada tema inclui uma fonte padrão ajustada. Defina fonts somente quando precisar de uma aparência diferente.

Use a mesma fonte em todo o site:

{
  "fonts": {
    "family": "Lora"
  }
}

Separe títulos e corpo:

{
  "fonts": {
    "heading": { "family": "Space Grotesk" },
    "body": { "family": "Inter" }
  }
}

Tanto heading quanto body aceitam os mesmos campos. Consulte Tematização → Tipografia para obter orientações sobre como escolher fontes.

Aparência

appearance

Tipo: object (opcional)

Controle o comportamento padrão do modo escuro do seu site.

{
  "appearance": {
    "default": "dark",
    "strict": true
  }
}

Consulte Tematização → Modo escuro para saber como o alternador funciona.

Metadados da página

metadata

Tipo: object (opcional)

Controle os metadados exibidos em todas as páginas de documentação.

{
  "metadata": {
    "timestamp": true
  }
}

A data é exibida no site publicado e em jamdesk dev. Ela reflete o commit mais recente que alterou o arquivo de cada página, portanto as páginas que você não editou mantêm a data original.

Banner

Exiba uma barra de anúncio do site fixada no topo de todas as páginas, acima do cabeçalho, em largura total e na cor de destaque do seu tema. Use-a para lançamentos, migrações, períodos de manutenção ou qualquer mensagem que todos os visitantes devam ver.

{
  "banner": {
    "content": "🎉 Version 2.0 is live! Read the [changelog](/changelog).",
    "dismissible": true
  }
}

O banner é exibido no site publicado e em jamdesk dev. Ele é configurado globalmente (um banner para todo o site); banners por aba e por idioma ainda não são compatíveis.

OpenAPI

api.openapi

Tipo: string | string[]

Liste os arquivos de especificação OpenAPI 3.x que você quer que o Jamdesk valide e use nas páginas de endpoints. Use caminhos relativos ao seu docs.json.

{
  "api": {
    "openapi": ["/openapi/api.yaml"]
  }
}

Depois de configurar, você pode gerar páginas de endpoints adicionando um campo openapi ao frontmatter de uma página:

---
title: Create Ticket
openapi: /openapi/api.yaml POST /tickets
---

Se você tiver apenas uma especificação listada, também poderá usar o formato curto:

---
title: Create Ticket
openapi: POST /tickets
---

Consulte Exemplo de OpenAPI para ver uma página de endpoint funcional e Estrutura de diretórios para saber onde colocar os arquivos.

Se o seu site for multilíngue, coloque um arquivo <spec>.<lang>.<ext> ao lado de cada especificação de origem (por exemplo, openapi/api.fr.yaml), e o Jamdesk o disponibilizará nas URLs desse idioma. Consulte Tradução de especificações OpenAPI.

api.examples.languages

Tipo: string[] Padrão: ["curl", "python", "javascript"]

Escolha quais linguagens de programação aparecem nos exemplos de código de API gerados automaticamente nas páginas openapi:. A ordem do array determina a ordem de exibição das abas, e a primeira linguagem é selecionada por padrão.

Valores compatíveis: curl, bash, python, javascript, go, ruby, csharp, java, rust, php

{
  "api": {
    "examples": {
      "languages": ["curl", "python", "javascript", "go", "ruby", "csharp", "java", "rust", "php"]
    }
  }
}

{
  "api": {
    "examples": {
      "languages": ["python", "javascript", "go"]
    }
  }
}

api.examples.defaults

Tipo: "required" | "all" Padrão: "all"

Controle quais parâmetros aparecem nos exemplos de código gerados automaticamente.

{
  "api": {
    "examples": {
      "defaults": "required"
    }
  }
}

api.examples.prefill

Tipo: boolean Padrão: false

Quando true, o API Playground preenche previamente os campos de parâmetros com valores example da sua especificação OpenAPI.

{
  "api": {
    "examples": {
      "prefill": true
    }
  }
}

api.playground.display

Tipo: "interactive" | "simple" | "none" Padrão: "interactive"

Controla o API Playground nas páginas de endpoints. Um botão "Try it" aparece por padrão em todas as páginas openapi: e api:.

{
  "api": {
    "playground": {
      "display": "interactive"
    }
  }
}

Consulte API Playground para obter detalhes de uso e saber como substituir a configuração por página.

api.mdx.auth.method

Tipo: "bearer" | "basic" | "key" | "cobo"

Método de autenticação usado nos exemplos de código gerados automaticamente. Quando definido, os exemplos incluem o cabeçalho de autenticação apropriado.

{
  "api": {
    "mdx": {
      "auth": {
        "method": "bearer"
      }
    }
  }
}

api.mdx.auth.name

Tipo: string

Nome personalizado do cabeçalho para autenticação baseada em chave. Usado somente quando api.mdx.auth.method é "key".

{
  "api": {
    "mdx": {
      "auth": {
        "method": "key",
        "name": "X-API-Key"
      }
    }
  }
}

Navegação

tabsPosition

Tipo: "top" | "left"

Controla onde as abas de navegação são exibidas.

O valor padrão depende do seu tema:

{ "tabsPosition": "left" }

anchors

Tipo: array

Links externos exibidos no topo da barra lateral em todas as páginas.

{
  "anchors": [
    { "name": "Blog", "href": "https://blog.example.com", "icon": "newspaper" }
  ]
}

navigation (estrutura)

Tipo: object

A estrutura de navegação da sua documentação. Consulte Navegação para obter documentação detalhada.

As páginas podem ser strings (com título gerado automaticamente a partir do nome do arquivo) ou objetos com um título personalizado:

"pages": [
  "introduction",
  { "page": "content/mdx-basics", "title": "MDX Basics" }
]

{
  "navigation": {
    "tabs": [
      {
        "tab": "Docs",
        "icon": "book-open",
        "groups": [
          {
            "group": "Getting Started",
            "pages": ["introduction", "quickstart"]
          }
        ]
      }
    ]
  }
}

Barra de navegação e rodapé

navbar

Tipo: object

{
  "navbar": {
    "links": [
      {
        "label": "Blog",
        "labels": { "fr": "Blog", "es": "Blog" },
        "href": "/blog"
      },
      {
        "label": "Pricing",
        "labels": { "fr": "Tarifs", "es": "Precios" },
        "href": "/pricing"
      }
    ],
    "primary": {
      "type": "button",
      "label": "Dashboard",
      "labels": { "fr": "Tableau de bord", "es": "Panel" },
      "href": "https://app.example.com"
    }
  }
}

footer

Tipo: object

Configure o rodapé da página com links de redes sociais e colunas de links personalizados.

{
  "footer": {
    "socials": {
      "github": "https://github.com/yourorg",
      "x": "https://x.com/yourhandle",
      "discord": "https://discord.gg/yourserver"
    },
    "links": [
      {
        "header": "Resources",
        "items": [
          { "label": "Blog", "href": "https://example.com/blog" },
          { "label": "Changelog", "href": "/changelog" }
        ]
      }
    ]
  }
}

Plataformas sociais compatíveis: github, x, twitter, linkedin, discord, slack, youtube, instagram, facebook, reddit, telegram, bluesky, threads, medium, hacker-news, website

Estilo

styling.latex

Tipo: boolean

Ative a renderização de fórmulas LaTeX com KaTeX. Quando ativada, você pode usar $...$ para fórmulas inline e $$...$$ para equações em bloco.

{
  "styling": {
    "latex": true
  }
}

Consulte Matemática e LaTeX para obter detalhes de uso.

styling.js

Tipo: string | string[]

Arquivo(s) JavaScript personalizado(s) a incluir em todas as páginas. Os caminhos são relativos ao diretório de documentação e devem começar com /.

{
  "styling": {
    "js": "/script.js"
  }
}

Passe um array para vários arquivos:

{
  "styling": {
    "js": ["/chat.js", "/analytics.js"]
  }
}

Sem esse campo, o Jamdesk detecta automaticamente arquivos .js na raiz do projeto. Consulte JavaScript personalizado para obter detalhes.

Pesquisa

search

Tipo: object (opcional)

Personalize a barra de pesquisa da documentação. A pesquisa funciona imediatamente; você só precisa desse campo para alterar o texto de placeholder ou exibir páginas populares no estado vazio.

{
  "search": {
    "prompt": "Ask me anything…",
    "popularPages": [
      { "title": "Quick Start", "slug": "quickstart", "icon": "rocket" },
      { "title": "Authentication", "slug": "guides/authentication", "icon": "key" }
    ]
  }
}

Páginas populares

Cada entrada em popularPages aceita:

O campo icon também aceita o objeto completo { "name", "style", "library" }. Consulte Formato de objeto do ícone. Quando popularPages é omitido, o Jamdesk exibe Quick Start e Introduction por padrão.

Chat

chat

Tipo: object (opcional)

Configure o assistente de chat de IA integrado. O chat é ativado por padrão em todos os sites; você só precisa desse campo para personalizar as perguntas iniciais ou desativá-lo.

{
  "chat": {
    "starterQuestions": [
      "How do I get started?",
      "What API endpoints are available?"
    ]
  }
}

Consulte Chat de IA para saber como o chat funciona e o que os visitantes veem.

Menu de ações de IA

contextual

Tipo: object (opcional)

Configure o menu suspenso de ações de IA exibido em todas as páginas. Ele é ativado por padrão com todas as opções; você só precisa desse campo para personalizar quais opções aparecem ou desativá-lo.

Chaves de opções integradas: copy, view, chatgpt, claude, perplexity, gemini, mcp, cursor, vscode

{
  "contextual": {
    "options": ["copy", "claude", "mcp", "cursor"]
  }
}

Adicione opções personalizadas junto às integradas:

{
  "contextual": {
    "options": [
      "copy",
      "claude",
      {
        "title": "Ask on Discord",
        "description": "Get help from the community",
        "icon": "discord",
        "href": "https://discord.gg/your-server"
      }
    ]
  }
}

Consulte Menu de ações de IA para ver a lista completa de opções e o formato das opções personalizadas.

Verificação ortográfica

spellcheck

Tipo: object (opcional)

Configure o comando de CLI jamdesk spellcheck. Você só precisa desse campo para adicionar palavras específicas do projeto à lista de exclusão.

{
  "spellcheck": {
    "ignore": ["Acme", "kubectl", "Terraform"]
  }
}

A CLI inclui mais de 180 termos técnicos integrados (API, GraphQL, Kubernetes, React etc.) e ignora automaticamente o nome do projeto informado no campo name. Adicione somente palavras específicas do seu projeto.

Consulte Visão geral da CLI: verificação ortográfica para obter detalhes de uso e saber mais sobre o modo interativo de correção.

Imagens

images.convertToWebp

Tipo: boolean (opcional, padrão false)

Ative a conversão automática de assets WebP para PNG e JPG durante os builds. Os arquivos convertidos geralmente ficam 60–80% menores que os originais, sem perda de qualidade visível. As referências no seu MDX, CSS personalizado, JavaScript personalizado e docs.json são reescritas automaticamente, portanto você não precisa alterar nenhum caminho.

Favicons, og:image e twitter:image permanecem no formato original. Nem todo crawler de redes sociais ou cliente de e-mail renderiza WebP de forma confiável, e um cartão de pré-visualização quebrado é pior que um JPG um pouco maior.

{
  "images": {
    "convertToWebp": true
  }
}

Consulte Conversão automática de imagens para saber o que é convertido, como o cache funciona e como acompanhar o progresso do build.

Controle de acesso

auth.password

Tipo: object (opcional)

Ative a proteção do seu site por senha compartilhada. A configuração é somente declarativa. Você ainda precisa definir a senha real no dashboard depois da execução do próximo build.

Defina auth.password.enabled: true para bloquear todo o site ou liste caminhos em auth.password.private[] para proteger somente determinadas páginas. Ambos acionam o mesmo prompt de senha do dashboard no próximo build.

{
  "auth": {
    "password": {
      "enabled": true,
      "hint": "Ask your account manager",
      "public": ["/marketing/**", "/changelog"]
    }
  }
}

Consulte Proteção por senha para ver o passo a passo completo, incluindo o fluxo do dashboard e como public: true / private: true no frontmatter interagem com esses arrays.

Exemplo completo

{
  "$schema": "https://jamdesk.com/docs.json",
  "name": "Acme Documentation",
  "description": "Learn how to use Acme",
  "theme": "jam",
  "colors": {
    "primary": "#635BFF"
  },
  "favicon": "/images/favicon.svg",
  "logo": {
    "light": "/images/logo-light.webp",
    "dark": "/images/logo-dark.webp"
  },
  "api": {
    "openapi": ["/openapi/api.yaml"],
    "playground": {
      "display": "interactive"
    },
    "examples": {
      "languages": ["curl", "python", "javascript"],
      "prefill": true
    }
  },
  "styling": {
    "latex": true,
    "js": "/script.js"
  },
  "chat": {
    "starterQuestions": ["How do I get started?", "What endpoints are available?"]
  },
  "contextual": {
    "options": ["copy", "claude", "chatgpt", "mcp", "cursor"]
  },
  "spellcheck": {
    "ignore": ["Acme"]
  },
  "anchors": [
    { "name": "Blog", "href": "https://blog.acme.com", "icon": "newspaper" }
  ],
  "navbar": {
    "links": [
      { "label": "Support", "href": "/support" }
    ],
    "primary": {
      "type": "button",
      "label": "Dashboard",
      "href": "https://app.acme.com"
    }
  },
  "navigation": {
    "tabs": [
      {
        "tab": "Docs",
        "icon": "book-open",
        "groups": [
          {
            "group": "Get Started",
            "pages": ["introduction", "quickstart"]
          }
        ]
      },
      {
        "tab": "API Reference",
        "icon": "code",
        "groups": [
          {
            "group": "Endpoints",
            "pages": ["api/users", "api/posts"]
          }
        ]
      }
    ]
  }
}

O que vem a seguir?