Remote ProPres

The context

ProPresenter is frequently operated in live environments such as churches, conferences, events, and production venues. During a presentation, operators need to respond quickly while coordinating with speakers, stage teams, audio engineers, and other production members.

Although the main ProPresenter workstation remains the center of the presentation workflow, not every action needs to be performed directly from that computer. A lightweight remote interface can give authorized team members access to essential controls from another desktop, tablet, or mobile device on the same local network.

The challenge

The challenge was to provide convenient remote access without making the live production workflow more complicated. The interface needed to expose useful ProPresenter controls while remaining understandable for team members with different levels of technical experience.

• Important controls were concentrated on the main ProPresenter computer
• Team members could not easily assist from other positions in the venue
• Moving between presentation, media, timer, and screen controls required additional navigation
• Operators needed a clear view of the current and next slide
• Remote controls needed to remain usable on both large and small screens
• The application had to communicate directly with ProPresenter over the local network

The approach

I built Remote ProPres as a focused Progressive Web App that connects to the official ProPresenter HTTP API. Instead of attempting to reproduce the complete desktop application, the project organizes frequently used remote actions into dedicated and accessible control areas.

The interface was designed around real presentation responsibilities. Presentation navigation, playlists, media, messages, timers, screens, and system information are separated into clear tabs, allowing each team member to quickly find the controls relevant to their role.

• Identify the ProPresenter actions most useful during live production
• Group related controls into task-focused interface sections
• Connect the application to the official ProPresenter HTTP API
• Display current and upcoming presentation information
• Add responsive layouts for desktop, tablet, and mobile devices
• Provide automatic refresh for live presentation information
• Package the application as an installable Progressive Web App

System architecture

Remote ProPres is built with Nuxt and Vue and runs entirely in the browser. After the user enters the protocol, local IP address, port, and optional authentication information, the application communicates directly with the ProPresenter HTTP API.

A centralized Vue composable manages the connection profile, API requests, application state, polling, error handling, and command history. Presentation components consume the shared state so that information remains synchronized across the interface.

interface ConnectionProfile {
  protocol: 'http' | 'https'
  host: string
  port: string
  username: string
  password: string
  rememberSecret: boolean
  autoRefresh: boolean
}

const connection = ref<ConnectionProfile>({
  protocol: 'http',
  host: 'localhost',
  port: '50001',
  username: '',
  password: '',
  rememberSecret: false,
  autoRefresh: true
})

What was delivered

The completed application provides a centralized remote workspace for the most important ProPresenter operations. It helps operators and supporting team members work together without requiring everyone to stand in front of the primary presentation computer.

The outcome

Remote ProPres makes essential presentation controls available beyond the main workstation. This creates a more flexible workflow in which presentation operators and supporting team members can coordinate tasks from different locations within the same venue.

Based on estimated workflow improvements, the application can reduce the time required to move between control areas by approximately 40%. The actual improvement depends on the event setup, network conditions, team structure, and the controls used during production.

• Faster access to frequently used presentation controls
• Less dependency on a single physical workstation
• Better collaboration between presentation and production teams
• Clearer visibility of current and upcoming slides
• Consistent controls across desktop, tablet, and mobile devices
• A flexible foundation for additional ProPresenter API features

Technology decisions

The technology stack was selected to create a lightweight, responsive, and maintainable application that could run on different devices without requiring a native installation. Direct communication with the official ProPresenter API keeps the architecture focused and avoids introducing unnecessary backend infrastructure.

• Nuxt for the application structure and build system
• Vue for reactive components and shared interface state
• TypeScript for safer API models and control logic
• Nuxt UI and Tailwind CSS for responsive interface components
• ProPresenter HTTP API for presentation and system controls
• Local storage for reusable connection preferences
• Service worker and web manifest for Progressive Web App support

Project considerations

Remote ProPres is designed primarily for devices connected to the same local network as the ProPresenter workstation. The browser must be able to reach the configured ProPresenter IP address and API port directly.

When the application is hosted on a public HTTPS domain while ProPresenter is only available through a local HTTP address, browser mixed-content restrictions may block the connection. A local deployment or secure local proxy is recommended for production environments.