MathType integrations architecture

MathType integrations are built on a modular architecture that separates the editor integration (frontend) from the processing and rendering logic (services). Understanding this architecture helps you choose the right deployment model and configuration for your needs.

The three-layer architecture

MathType integrations follow a three-layer architecture:

1. Integration frontend (client-side).
2. Integration services (server-side or cloud).
3. MathType editor services (core processing layer).

These components work together to enable formula editing, rendering, accessibility generation, and storage within web-based editors. This architecture is designed to:

• Decouple UI integration from processing logic.
• Support both cloud and on-premises deployments.
• Allow flexible configuration depending on infrastructure needs.

Integration frontend

The part that runs in the browser and connects MathType to the editor (TinyMCE, CKEditor, Froala, and others).

Integration services

Middleware that processes requests between the frontend and MathType editor services.

MathType editor services

Core MathType services responsible for formula processing and rendering tasks, such as:

• Formula rendering.
• Accessibility generation.
• Math processing.
• Editor functionality.

These services are hosted by default in the MathType cloud, but can also be self-hosted with the appropriate license.

How the components interact

Stage 1: Integration frontend (client-side)

The frontend integration is a JavaScript component embedded into the editor. It is responsible for:

• Adding MathType and ChemType buttons to the toolbar.
• Opening the MathType editor interface.
• Sending requests to integration services.
• Inserting and editing formulas within the editor content.

By default, the frontend connects to MathType cloud services.

Stage 2: Integration services (middleware layer)

Integration services act as a bridge between the frontend and MathType editor services. They:

• Receive requests from the frontend.
• Call MathType editor services.
• Transform and return responses to the frontend.

These services are available in Java and PHP and can be hosted either in the cloud or on your own infrastructure.

Stage 3: MathType editor services (core processing)

This is the core layer that handles:

• Rendering formulas.
• Generating accessible representations.
• Processing mathematical input.

These services are hosted by default in the MathType cloud, but can also be deployed on-premises with the appropriate license.

Stage 4: End-to-end flow

A typical formula lifecycle works as follows:

1. User clicks the MathType button in the editor.
2. The frontend opens the MathType editor.
3. Integration services communicate with MathType editor services.
4. The user creates or edits a formula.
5. The formula is processed and rendered.
6. The result is returned to the frontend.
7. The formula is inserted into the editor content.

Deployment models

MathType integrations support several deployment models depending on your infrastructure and security requirements. The most common deployment models are:

• Default cloud deployment.
• Self-hosted Integration Services.
• Fully self-hosted deployment.

Each model offers a different balance between operational simplicity, customization, and infrastructure control. For a detailed comparison of deployment options, see MathType integrations deployment models.

Frontend vs Integration Services responsibilities

In all deployment models, the frontend is responsible for editor interaction, while services handle formula processing, rendering, storage, and other backend responsibilities. The following table summarizes where different configuration options are applied:

Key differences

Frontend handles

• Toolbar configuration.
• Editor UI behavior.
• Basic GUI properties.

Integration services handle

• Formula rendering format.
• Content storage format.
• Image caching and storage location.
• Proxy and cross-domain configuration.
• Performance optimization.

Common Misunderstandings

MathType is just a frontend plugin

The frontend is only one part of the system. Rendering, storage, and processing depend on backend services.

All configurations can be done in the editor

Many important settings, such as rendering, storage, caching, and performance, are configurable only through integration services.

Related Concepts

• MathType integrations deployment models.
• Deploy Integration Services with PHP.
• Deploy Integration Services with Java.
• Configure Integration Services.
• Integration Services parameters.