What Is the OpenMAIC Renderer SDK Used For?

The OpenMAIC Renderer SDK (@openmaic/renderer) transforms internal slide and scene representations into visual output, powering real-time editing previews and export pipelines for video, PDF, and snapshot generation.

The OpenMAIC Renderer SDK serves as the central visualization engine for the THU-MAIC/OpenMAIC platform. It bridges the gap between the application's data models and the actual pixels rendered on screen, ensuring that what users see during editing matches the final exported content exactly.

Real-Time Preview and Canvas Rendering

The SDK provides the rendering backbone for the slide editor's canvas interface. When users edit presentations, the SDK draws text, images, videos, charts, LaTeX formulas, code blocks, and interactive elements directly onto HTML canvas elements.

In components/slide-renderer/Editor/RendererScreenCanvas.tsx, the component directly invokes SDK functions to paint slide content. This integration ensures that the editor reflects the precise layout, styling, and positioning defined in the slide data model. The test file tests/slide-renderer/screen-canvas-renderer.test.ts validates this behavior, confirming that the application correctly switches to the SDK-based renderer when the renderer flag is enabled.

Export Pipeline Integration

Beyond the editing interface, the OpenMAIC Renderer SDK drives all content export workflows. The same rendering engine that powers the editor also generates assets for video export, PDF generation, and static snapshot creation.

The SDK produces PNG frames, thumbnail images, and video-ready assets that downstream exporters consume. In tests/video-export/timeline-deps.test.ts, the test suite demonstrates how the SDK integrates into the video-export pipeline's timeline-dependency graph, mocking the renderer to verify frame sequencing and asset compilation.

Asset Resolution Functions

Before rendering, the SDK resolves logical media identifiers into displayable resources. The resolveImageSrc and resolveVideoMedia functions map element IDs stored in PPT structures to actual URLs or binary blobs.

// Resolve image and video URLs before rendering
import { resolveImageSrc } from '@openmaic/renderer/snapshot';

async function prepareSlideAssets(slideData: any) {
  const resolved = await resolveImageSrc(slideData);
  return resolved;
}

This resolution step ensures that exported content includes the correct visual assets regardless of storage location or access patterns.

SDK Architecture and Element Types

The rendering logic resides in packages/@openmaic/renderer/src/elements/*, which contains implementations for each supported element type. This modular structure separates concerns for images, charts, text, LaTeX formulas, and interactive components.

Each element type follows a canonical renderer vocabulary—a standardized set of properties and style definitions. This consistency enables the SDK to handle diverse content types while maintaining uniform rendering behavior across different contexts.

Sandboxed Execution

For security-sensitive scenarios such as rendering third-party embedded iframes, the SDK provides a sandboxed environment. This sandbox sanitizes HTML and CSS inputs before they reach the canvas, preventing malicious code execution while preserving visual fidelity.

Implementation Examples

Developers interact with the SDK through its core rendering functions. The following examples demonstrate canvas rendering and PNG export generation:

// Import core rendering functions
import { renderSlide } from '@openmaic/renderer';
import { slideToPng } from '@openmaic/renderer/snapshot';

// Render a slide to a canvas element
async function renderToCanvas(slideData: any, canvas: HTMLCanvasElement) {
  const resolved = await resolveImageSrc(slideData);
  await renderSlide(resolved, canvas);
}

// Generate PNG for video export workflows
async function exportSlideAsPng(slideData: any) {
  const pngBlob = await slideToPng(slideData);
  return pngBlob;
}

These patterns appear throughout the OpenMAIC codebase, particularly in export services and editor components that require pixel-perfect visual output.

Summary

• The OpenMAIC Renderer SDK (@openmaic/renderer) serves as the unified visualization layer for the OpenMAIC platform, handling both editing previews and final exports.
• Asset resolution functions like resolveImageSrc translate logical identifiers into renderable media URLs and blobs.
• Export pipelines leverage the same rendering engine as the editor, ensuring visual consistency across video, PDF, and snapshot outputs.
• Element-specific logic resides in packages/@openmaic/renderer/src/elements/*, implementing a canonical vocabulary for cross-renderer consistency.
• Sandboxed execution protects against XSS when rendering third-party content in embedded contexts.

Frequently Asked Questions

What is the difference between the OpenMAIC renderer SDK and the legacy canvas renderer?

The OpenMAIC renderer SDK provides a standardized, element-based architecture with consistent styling vocabulary, while legacy canvas implementations used ad-hoc rendering logic. According to tests/slide-renderer/screen-canvas-renderer.test.ts, the application can toggle between renderers using a feature flag, but the SDK is the preferred path for new development due to its unified export and preview capabilities.

How does the SDK handle media resolution for slides?

The SDK uses resolver functions such as resolveImageSrc and resolveVideoMedia to map internal media IDs to actual URLs or binary blobs. This abstraction allows the renderer to work with logical references in slide data while fetching concrete assets at render time, supporting both local files and remote storage systems.

Can the OpenMAIC renderer SDK be used outside the OpenMAIC platform?

While the SDK (@openmaic/renderer) is designed as a package dependency within the OpenMAIC ecosystem, its modular structure in packages/@openmaic/renderer/src/ allows theoretical reuse. However, it is optimized for the platform's specific slide data models and asset resolution patterns, making standalone usage require significant adaptation.

What security features does the renderer SDK provide?

The SDK implements sandboxed execution environments for rendering untrusted content such as third-party embedded iframes. This sandbox sanitizes HTML and CSS inputs before canvas rendering, preventing script injection while maintaining visual accuracy for user-generated or external content.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}