Marp renderer component for React.
Before using Marp React
This component is suited to create presentation tools integrated with Marp by React. Marp would create the static slide contents consist of plain HTML and CSS, so you have to notice that it's not suited to control the content of your slide via React.
React community has more appropriate and awesome tools for such that purpose. Typically these tools should help if you want to create a beautiful slide deck via React:
- Spectacle can create and control your slide deck with React's some flexibilities.
- mdx-deck is the best alternative for creating slide deck based on MDX: Markdown + React components.
If you really think to need, you can even use Marp React within these frameworks.
# yarnyarn add @marp-team/marp-core @marp-team/marp-react# npmnpm install --save @marp-team/marp-core @marp-team/marp-react
This is a simple usage of
<Marp> renderer component. It renders slides via inline SVG to
import Marp from '@marp-team/marp-react'import React from 'react'import ReactDOM from 'react-dom'const markdown = `# Page 1---## Page 2`ReactDOM/* <div id="app">* <div class="marp-xxxxxxxx">* <svg data-marpit-svg viewBox="0 0 1280 960">* <foreignObject width="1280" height="960">* <section><h1>Page 1</h1></section>* </foreignObject>* </svg>* </div>* <div class="marp-xxxxxxxx">* <svg data-marpit-svg viewBox="0 0 1280 960">* <foreignObject width="1280" height="960">* <section><h2>Page 2</h2></section>* </foreignObject>* </svg>* </div>* </div>*/
Marp constructor options can change in
You can use a custom renderer by passing
render prop or
// Use `render` prop<Marp ="# Hello, Marp!" = />// or children<Marp ="# Hello, Marp!">customRenderer</Marp>
The example of custom renderer is here:
const customRenderer =<div ="marp">slides</div>
ℹ️ See also Render Props in the document of React.
<MarpWorker> component (Experimental)
For the best performance of the integrated web app,
<MarpWorker> allows using Web Worker for Markdown conversion. It has a lot of clear advantages over a regular
- It does not block UI thread while converting large Markdown.
- A blazing fast live preview by a simple but clever queueing system is available.
- No longer need to include a huge Marp Core into main JS.
- Web Worker will be loaded asynchronously, so the first paint will not block.
The renderer using worker may be default component of Marp React in future.
You can use it just by swapping from
<MarpWorker>. By default,
<MarpWorker> will use a pre-built worker via jsDelivr CDN.
import MarpWorker from '@marp-team/marp-react'import React from 'react'import ReactDOM from 'react-dom'ReactDOM
Use custom worker
The custom worker may specify via
<MarpWorker = ="# Hello, Marp Worker!" />
<MarpWorker>'s custom renderer might be called with
undefined slides argument, unlike
<Marp>. It means an initial rendering of the component while preparing worker.
You may show waiting user a loading message as follows:
<MarpWorker = ="# Hello, Marp Worker!">slides ?<div ="marp">slides</div>:<p>Loading Marp Worker...</p></MarpWorker>
- Implement React renderer component based on our prototype
- Support rendering in worker for replacing Marp Web live preview feature
- Allow using worker via CDN (
- Use worker hosted on CDN by default
- Allow using worker via CDN (
- Support additional theme(s)
- Support swapping engine (e.g. Marpit)
Managed by @marp-team.
- Yuki Hattori (@yhatt)