Marp Plugin

The @mrsf/marp-mrsf package installs MRSF rendering into a Marpit-compatible renderer through use(). It preserves the same browser interaction model as the other MRSF rendering plugins while adding data-mrsf-page metadata to rendered page containers.

This is the first public test release of the Marp integration. It is intended for early adopters who want to validate the package shape, runtime behavior, and the vendor-only page hint flow before a more stable release.

Install

npm install @mrsf/marp-mrsf

If your host does not already depend on Marpit or Marp Core, install one of them alongside the plugin:

npm install @marp-team/marpit @mrsf/marp-mrsf

npm install @marp-team/marp-core @mrsf/marp-mrsf

Environment Notes

The same import works in Node.js and browser bundlers.

• Use comments or loader in browser hosts.
• Use documentPath or sidecarPath only in Node.js hosts.

Usage

import { Marpit } from "@marp-team/marpit";
import { mrsfPlugin } from "@mrsf/marp-mrsf";
import "@mrsf/marp-mrsf/style.css";

const marpit = new Marpit();
marpit.use(mrsfPlugin, {
  comments: sidecarData,
  interactive: true,
});

const { html } = marpit.render(markdownSource);

Marp Core Usage

import { Marp } from "@marp-team/marp-core";
import { mrsfPlugin } from "@mrsf/marp-mrsf";
import "@mrsf/marp-mrsf/style.css";

const marp = new Marp({ inlineSVG: true });
marp.use(mrsfPlugin, {
  comments: sidecarData,
  interactive: true,
  lineHighlight: true,
});

const { html, css } = marp.render(markdownSource);

Runtime

Use the shared controller in the browser after the rendered HTML is mounted:

import { MrsfController } from "@mrsf/marp-mrsf/controller";

const container = document.querySelector(".marpit");
if (container) {
  new MrsfController(container, { interactive: true });
}

Vendor Page Hints

Marp decks sometimes need comments that apply to an entire rendered page instead of a specific line anchor. For that case, the plugin understands vendor-only x_page hints:

comments:
  - id: slide-2-summary
    author: Product Review
    timestamp: "2026-03-25T12:10:00Z"
    text: Make this slide shorter and more presenter-friendly.
    resolved: false
    x_page: 2

At render time, x_page is mapped onto the corresponding Marpit slide container. The value is preserved in the serialized payload so interactive hosts can keep page-level navigation and reply flows consistent.

Demo

A runnable browser demo is available in examples/marp-demo.