Architecture overview 1: Components, containers, and plugins

Overview

Mirador’s plugin system supports two types of plugins: add plugins and wrap plugins. The system is powerful, but using it requires some understanding of Mirador’s architecture — especially the difference between containers and components.

This page is a conceptual overview of the Mirador plugin system. For detailed guides on creating plugins, please see the related pages linked below.

• Add Plugins
• Wrap Plugins
• Writing your own plugin
• Plugin integration example repository

In Mirador:

• Components are stateless, presentational UI elements. These are .jsx files located in /src/components.
• Containers connect components to the Redux store, apply plugin wrappers or other Higher-Order Components (HOCs), and export the final enhanced version. These are .js files located in /src/containers.

Each UI element typically has a paired structure:

Component File	Container File
/src/components/CanvasInfo.jsx	/src/containers/CanvasInfo.js

In the plugin system:

• Add plugins are used with components.
• Wrap plugins are used with containers.

Comparison Table

Plugin Type	Target Location	Registered In	Used In	Injects At Runtime
add	Component .jsx	PluginContext.add	<PluginHook>, usePlugins	Inside the component tree
wrap	Container .js	PluginContext.wrap	withPlugins()	Around the entire component