Implementation:Webdriverio Webdriverio Docusaurus Config

Knowledge Sources	Webdriverio_Webdriverio
Domains	Documentation, Website
Last Updated	2026-02-12 00:00 GMT

Overview

Docusaurus v3 configuration for the WebdriverIO documentation website at webdriver.io, defining site metadata, internationalization, theme, navigation, search, and plugins.

Description

This module exports the default Config object consumed by Docusaurus to build the WebdriverIO documentation site. It configures 15 locale translations (including English, Arabic, German, Spanish, French, Hindi, Italian, Korean, Polish, Portuguese, Russian, Swedish, Tamil, Ukrainian, Vietnamese, and Chinese), Algolia-powered search, Prism syntax highlighting with GitHub light and Dracula dark themes, and a comprehensive navbar with links to Docs, API, Blog, Contribute, Community, and Sponsor sections plus external links to GitHub, X (Twitter), YouTube, and Discord. The footer includes OpenJS Foundation branding and legal links. Plugins include client-redirects (for v7-to-v8 URL migration), content-docs (for the Community section), ideal-image (for optimized images), and pwa (for Progressive Web App support with offline mode). The configuration also integrates Google Analytics, Morgan-style request logging in development, custom CSS fonts (IBM Plex Sans and IBM Plex Mono), and Mermaid diagram rendering.

Usage

This configuration file is the entry point for building and developing the WebdriverIO documentation website. It is consumed by docusaurus build and docusaurus start commands. Modify this file to add new navbar items, locales, plugins, or redirects for the documentation site.

Code Reference

Source Location

• Repository: Webdriverio_Webdriverio
• File: website/docusaurus.config.ts

Signature

const config: Config = {
    title: 'WebdriverIO',
    tagline: 'Next-gen browser and mobile automation test framework for Node.js',
    url: 'https://webdriver.io',
    baseUrl: '/',
    onBrokenLinks: 'throw',
    organizationName: 'webdriverio',
    projectName: 'webdriverio',
    i18n: { defaultLocale: 'en', locales: [...] },
    themeConfig: { ... } satisfies ThemeConfig,
    presets: [['classic', { docs, blog, theme, pages, googleAnalytics }]],
    plugins: [
        ['client-redirects', { ... }],
        ['content-docs', { id: 'community', ... }],
        'ideal-image',
        ['pwa', { ... }]
    ],
    themes: [...],
    stylesheets: [...],
    scripts: [...]
}

export default config

Import

// This file is consumed by Docusaurus directly, not imported by application code
// Located at: website/docusaurus.config.ts

I/O Contract

Inputs

Name	Type	Required	Description
(none)	N/A	N/A	The config is a static export; it does not accept runtime inputs

Outputs

Name	Type	Description
config	Config	Docusaurus configuration object consumed by the build system

Configuration Sections

Internationalization (i18n)

Supports 15 locales with English as the default:

Code	Language
en	English (default)
ar	Arabic
de	German
es	Spanish
fr	French
hi	Hindi
it	Italian
ko	Korean
pl	Polish
pt	Portuguese
ru	Russian
sv	Swedish
ta	Tamil
uk	Ukrainian
vi	Vietnamese
zh	Chinese

Navbar

Left-aligned items: Docs (gettingstarted), API (api), Blog, Contribute, Community (support), Sponsor. Right-aligned items: version dropdown (from pastVersions), locale dropdown, and icon links to GitHub, X, YouTube, and Discord.

Algolia Search

Configured with app ID 3G5CUKDJDE, index webdriver, enabling full-text search across all documentation pages.

Plugins

Plugin	Purpose
client-redirects	Handles v7-to-v8 URL migrations (e.g., /docs/browserobject to /docs/api/browser)
content-docs (community)	Serves the community directory as a separate docs section at /community/
ideal-image	Optimizes images with responsive sizing and lazy loading
pwa	Enables Progressive Web App with offline support, custom service worker, and app manifest

Theme

Uses prism-react-renderer with GitHub (light) and Dracula (dark) themes. Color mode respects user system preference. Footer uses the dark style with OpenJS Foundation branding and sponsor logos.

Usage Examples

// Building the documentation site
// From the website/ directory:
// npx docusaurus build
// npx docusaurus start

// Adding a new redirect
// In docusaurus.config.ts, add to the client-redirects plugin:
redirects: [
    // existing redirects...
    {
        from: '/docs/old-page',
        to: '/docs/new-page'
    }
]

// Adding a new locale
// In docusaurus.config.ts, add to i18n.locales:
i18n: {
    defaultLocale: 'en',
    locales: [
        'en', 'ar', 'de', /* ... existing locales ... */ 'ja'
    ]
}

Related Pages

• Principle:Webdriverio_Webdriverio_Documentation_Infrastructure