> For the complete documentation index, see [llms.txt](https://docs.theopenpresenter.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.theopenpresenter.com/introduction/system-architecture.md).

# System Architecture

TheOpenPresenter is a web-based application built with a modular, multi-component architecture. The system comprises a robust backend server and specialized frontend applications, each serving distinct purposes. We also wrap the system as apps/desktop software.

## Core Components

### Backend Server

* Built with Node.js
* Implemented in TypeScript
* Almost everything will go through the server

{% hint style="info" %}
We will eventually package the server so that it can be run locally by users. This will enable local use without any internet connection.
{% endhint %}

### Frontend Applications

1. **Management Interface**
   * Built with React & Vite
   * Primary functions:
     * User account management
     * Project management
     * Landing page presentation
     * System navigation
2. **Remote Control Interface**
   * Built with React & Vite
   * Serves as a wrapper for plugin-based control functionality
   * Provides presentation control capabilities
   * Designed for use on mobile devices or tablets in additional to standard desktop use
3. **Renderer Interface**
   * Built with React & Vite
   * Handles content display and rendering
   * Acts as a wrapper for plugin-based rendering functionality
   * Designed for display screens/projectors
4. **Landing page**
   * Build with Astro
   * Handles everything in the landing page

Simply put, the **Remote** is used to control the presentations. And **Renderer** is used to show the presentation. Meanwhile, the Next.js management interface is used to navigate/open/create the correct Remote & Renderer. All of them communicates with the server to get the data it needs.

{% @mermaid/diagram content="graph TD
subgraph Admin Device
MI\[Management Interface<br/>Laptop/Desktop]
end

```
subgraph Control Device
    RC[Remote Control<br/>Phone/Tablet]
end

subgraph Display Screen
    RD[Renderer<br/>TV/Projector]
end

subgraph Backend Infrastructure
    NS[Node.js Server]
    DB[(Database)]
end

MI -->|"Opens"| RD
MI -->|"Opens"| RC
MI <-->|"Project/User Data"| NS

RC -->|"Sends control commands"| NS

RD <-->|"State updates"| NS

NS <-->|Data persistence| DB

style MI fill:#f9f,stroke:#333
style RC fill:#bbf,stroke:#333
style RD fill:#bfb,stroke:#333
style NS fill:#fb9,stroke:#333

classDef device fill:#f9f,stroke:#333,stroke-width:2px
classDef display fill:#bfb,stroke:#333,stroke-width:2px
classDef server fill:#fb9,stroke:#333,stroke-width:2px" %}
```

### Plugin System

TheOpenPresenter is powered by a plugin architecture.. All presentation features (e.g., video playback, slide shows) are implemented as plugins. This means that adding a functionality like playing videos is just a plugin away. Our core system provides various API that can be used to integrated the plugin to our system.

Here's the topology of a plugin:

* **Server-Side**
  * Written in Typescript
  * Runs on the backend
  * Integrates with core system APIs
* **Client-Side**:
  * Can include both remote control and renderer aspects
  * Supports any browser-compatible frontend technology
  * Integrates seamlessly with main interfaces


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.theopenpresenter.com/introduction/system-architecture.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.