Home

Awesome

ReMDX

Create beautiful minimalist presentations with React & MDX.

Example Presentations

Setup

npm init remdx

And:

npm run dev

Custom Setup

See the Example Deck to get started with adding ReMDX to your project:

npm add @nkzw/remdx @nkzw/vite-plugin-remdx

vite.config.js:

import remdx from '@nkzw/vite-plugin-remdx';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [remdx(), react()],
});

index.html:

<div id="app"></div>
<script type="module">
  import '@nkzw/remdx/style.css';
  import { render } from '@nkzw/remdx';

  render(document.getElementById('app'), import('./slides.re.mdx'));
</script>

Then create your slides.re.mdx and start the dev server via npx run vite dev.

Usage

Context & Decisions

Prior Art

ReMDX was inspired by:

The core of ReMDX is a lean fork of Spectacle. create-remdx is based on Slidev. I'd like to thank the authors of the above tools for their awesome work.

Why ReMDX?

All three of the above solutions fall short in some way. Some are a bit outdated, and some have too much cruft or are slow. Slidev is modern but only works with Vue instead of React. I wanted to build a fast MDX-based slide deck tool on top of Vite that uses React and only supports a minimal set of features.

ReMDX does not have feature XYZ!

That's not a question. Fork it, build it, and submit a PR.

Opinions