Customization Guide

📖3 min read
📅Last updated: Jan 2, 2026

Learn how to customize EmberDocs to match your brand.

What Can You Customize?

  • Logo - Replace the default gradient logo mark
  • Product Name - Change the name displayed in the header
  • Company Name - Add company name to page titles
  • Navigation Links - Customize header menu items
  • Footer - Add copyright text and links

All customization is done through .env.local. If it doesn't exist, copy .env.example to .env.local:

bash
cp .env.example .env.local

Logo Configuration

  1. Place your logo file in the public folder (e.g., public/logos/my-logo.png)
  2. In .env.local, add:
    bash
    EMBERDOCS_LOGO_PATH=/logos/my-logo.png
  3. Restart your dev server

Supported formats: PNG, SVG, JPG
Display size: 28x28 pixels (larger images are scaled)
Best format: SVG for crisp display at any size

File naming tips:

  • Use lowercase, no spaces: my-logo.png ✅
  • Avoid special characters: logo@2x.png ❌

Branding

Product Name

Change the name shown in the header:

bash
EMBERDOCS_PRODUCT_NAME=My Awesome Product

Company Name

Add company name to page titles:

bash
EMBERDOCS_COMPANY_NAME=My Company, Inc.

Result: Page titles will show "My Awesome Product - My Company, Inc. Documentation"

Customize header navigation menu with your own links:

bash
EMBERDOCS_HEADER_LINKS={"Docs": "/docs", "Features": "/#features", "GitHub": "https://github.com/yourorg"}

Format rules:

  • JSON object: {"Label": "URL"}
  • External links must start with http:// or https://
  • Internal links start with /
  • Separate multiple links with commas

Examples:

bash
# Three links
EMBERDOCS_HEADER_LINKS={"Home": "/", "Docs": "/docs", "Contact": "/contact"}

# With external links
EMBERDOCS_HEADER_LINKS={"Docs": "/docs", "Blog": "/blog", "GitHub": "https://github.com/yourorg", "Twitter": "https://twitter.com/yourorg"}

Default: If not set, EmberDocs uses: "Docs", "Features", and "GitHub"

Footer Text

Add copyright or other text:

bash
EMBERDOCS_FOOTER_TEXT=My Company © 2025

Add links in the footer:

bash
EMBERDOCS_FOOTER_LINKS={"Privacy": "/privacy", "Terms": "/terms", "Contact": "/contact"}

Same JSON format as header links.

Examples:

bash
# Just text
EMBERDOCS_FOOTER_TEXT=Built with EmberDocs

# Text and links
EMBERDOCS_FOOTER_TEXT=My Company © 2025
EMBERDOCS_FOOTER_LINKS={"Privacy": "/privacy", "Terms": "/terms"}

Note: If both EMBERDOCS_FOOTER_TEXT and EMBERDOCS_FOOTER_LINKS are empty, no footer is displayed.

Complete Example

bash
# Logo
EMBERDOCS_LOGO_PATH=/logos/my-company-logo.svg

# Branding
EMBERDOCS_PRODUCT_NAME=SuperDocs
EMBERDOCS_COMPANY_NAME=Super Company, Inc.
EMBERDOCS_PRIMARY_URL=https://supercompany.com

# Navigation
EMBERDOCS_HEADER_LINKS={"Docs": "/docs", "Features": "/#features", "Blog": "/blog", "GitHub": "https://github.com/supercompany"}

# Footer
EMBERDOCS_FOOTER_TEXT=Super Company © 2025
EMBERDOCS_FOOTER_LINKS={"Privacy": "/privacy", "Terms": "/terms", "Contact": "/contact"}

Important: Restart Your Server

After editing .env.local, you must restart your dev server for changes to take effect:

  1. Stop the server (press Ctrl+C)
  2. Start it again: npm run dev
  3. Refresh your browser

Environment variables are only loaded when the server starts.

Troubleshooting

Logo doesn't show up

  • Check the file path starts with / (relative to public folder)
  • Verify the file exists in the public folder
  • Restart the dev server
  • Use lowercase file names without spaces
  • Verify JSON format (quotes, commas, braces)
  • Restart the dev server
  • Check browser console for warnings

Nothing changed after editing .env.local

You must restart your dev server! Environment variables are only loaded at startup.

EmberDocs is made with ❤️ by Kristina Quinones © 2025

Visit Website