Scribd
Upload
2 views

docus_trainer

Docusaurus v3.7.0 introduces an architecture overview detailing how plugins and themes interact to build applications. Plugins collect content and emit JSON data, while themes provide layout components that utilize this data. The document emphasizes the separation of plugin and theme code, which communicate through specific protocols rather than direct imports.

Uploaded by

Yuri HM
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

docus_trainer

Docusaurus v3.7.0 introduces an architecture overview detailing how plugins and themes interact to build applications. Plugins collect content and emit JSON data, while themes provide layout components that utilize this data. The document emphasizes the separation of plugin and theme code, which communicate through specific protocols rather than direct imports.

Uploaded by

Yuri HM
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Skip to main content

🎉️ Docusaurus v3.7 is out! 🥳️

DocusaurusDocsAPIBlogShowcaseCommunity
3.7.0

Canary 🚧
3.7.0
3.6.3
3.5.2
3.4.0
3.3.2
3.2.1
3.1.1
3.0.1
2.x

Archived versions
2.3.1
2.2.0
2.1.0
2.0.1
1.x.x

All versions

English

English
Français
Português (Brasil)
한국어
中文（中国）

Help Us Translate

Search

Docusaurus

Introduction
Getting Started
Installation
Configuration
Playground
TypeScript Support
Guides
Advanced Guides
Architecture
Plugins
Routing
Static site generation
Client architecture
Upgrading

Advanced Guides
Architecture
Version: 3.7.0

Architecture
Architecture overview

This diagram shows how Docusaurus works to build your app. Plugins each collect their content and emit JSON
data; themes provide layout components which receive the JSON data as route modules. The bundler bundles all
the components and emits a server bundle and a client bundle.

Although you (either plugin authors or site creators) are writing JavaScript all the time, bear in mind that the JS
is actually run in different environments:

All plugin lifecycle methods are run in Node. Therefore, until we support ES Modules in our codebase,
plugin source code must be provided as ES modules that can be imported, or CommonJS that can be
require'd.
The theme code is built with Webpack. They can be provided as ESM—following React conventions.

Plugin code and theme code never directly import each other: they only communicate through protocols (in our
case, through JSON temp files and calls to addRoute). A useful mental model is to imagine that the plugins are
not written in JavaScript, but in another language like Rust. The only way to interact with plugins for the user is
through docusaurus.config.js, which itself is run in Node (hence you can use require and pass callbacks as
plugin options).

During bundling, the config file itself is serialized and bundled, allowing the theme to access config options like
themeConfig or baseUrl through useDocusaurusContext(). However, the siteConfig object only contains
serializable values (values that are preserved after JSON.stringify()). Functions, regexes, etc. would be lost
on the client side. The themeConfig is designed to be entirely serializable.

Edit this page


Last updated on Jan 3, 2025 by Sébastien Lorber
Previous
Advanced Tutorials
Next
Plugins
Learn

Introduction
Installation
Migration from v1 to v2

Community

Stack Overflow
Feature Requests
Discord
Help

More

Blog
Changelog
GitHub
X
Legal

Privacy
Terms
Cookie Policy
Meta Open Source Logo Meta Open Source Logo
Copyright © 2025 Meta Platforms, Inc. Built with Docusaurus.

You might also like