Customizing Documentation Appearance

First impressions matter. When a developer visits your API documentation, they are judging the quality of your API by the quality of your docs. A generic, unbranded page suggests a generic product. A branded, polished page suggests a professional, reliable service.

Apidog allows you to customize the look and feel of your docs site to match your company's identity without writing code.

Branding Essentials

Navigate to Share Docs > Publish > Edit > Appearance.

1. Logo and Favicon

Replace the default Apidog logo with your own.

Logo: Used in the top navigation bar.

Favicon: The small icon in the browser tab.

2. Primary Color

Choose your brand's primary color. This will affect buttons, links, and active states in the documentation.

Try setting it to a deep blue (e.g., #0052CC) or a vibrant green depending on your brand guide.

3. Dark Mode

Developers love Dark Mode. Apidog supports it out of the box. You can:

Force Light Mode.

Force Dark Mode.

Auto (Recommended): Follows the user's system preference.

Good documentation is easy to navigate. You don't want users getting lost in a sea of endpoints.

You are not limited to just API reference pages. You can add useful links to the top navigation bar:

Link: External links (e.g., "Support", "GitHub Repo", "Status Page").

Folder: Group multiple related links.

Dropdowns: For complex hierarchies.

Catalog Style

Choose how the sidebar behaves.

2-Column Layout: Classic documentation style. Sidebar on the left, content on the right.

3-Column Layout: Adds a right-side "On this page" table of contents for deep navigation within a single page.

See details Custom layouts

Creating a Landing Page

The default homepage is often just the first endpoint. You can create a dedicated Landing Page to welcome users.

Create a Markdown file in your project (e.g., "Welcome.md").

Write a clear introduction:

"Welcome to the Pet Store API."

"Here is how to authenticate..."

"Check out our Getting Started guide."

In the published docs settings, set this file as the Home Page.

This acts as the "Front Door" to your API product.

Key Takeaways

Branding Matters: Customize logos, favicons, and primary colors to make your docs look like a seamless part of your product.

Navigation: Use top navigation bars to link to external resources like support pages or GitHub repos.

Landing Page: Create a dedicated welcome page to guide users, rather than dropping them directly into an endpoint reference.

Custom Layouts: Choose between 2-column or 3-column layouts to optimize reading experience.

In the next section, we'll see exactly how those "Try it out" buttons work and how they turn your static docs into an interactive console.

Continue with → Interactive Features for Consumers

Customizing Documentation Appearance

Branding Essentials

1. Logo and Favicon

2. Primary Color

3. Dark Mode

Layout and Navigation

Top Navigation

Catalog Style

Creating a Landing Page

Key Takeaways

Customizing Documentation Appearance

Branding Essentials#

1. Logo and Favicon#

2. Primary Color#

3. Dark Mode#

Layout and Navigation#

Top Navigation#

Catalog Style#

Creating a Landing Page#

Key Takeaways#

Branding Essentials

1. Logo and Favicon

2. Primary Color

3. Dark Mode

Layout and Navigation

Top Navigation

Catalog Style

Creating a Landing Page

Key Takeaways