DOCSEARCHbyAlgolia
Submit Docs

Presentify

website·Indexed 30 days ago

https://ernestteluk.github.io/presentify/

A tool for creating presentation decks using MDX in React. It features a CLI for project initialization with Vite templates, support for custom React components, and integration with Mermaid for diagrams. Key components include PresentifyProvider for global theme options and slide configuration via MDX frontmatter or delimiters.

Tokens
2.8K
Snippets
20
Records
23
Agent score
71%

What's inside Presentify

  1. Overview of Presentify features and architecture

    Presentify is a pure React-based presentation tool that uses MDX to store and arrange slides in a single plain text file. Key architectural features include:

    • MDX Integration: Allows content creation in plain text while supporting the embedding of any React component directly within slides.
    • Styling & Themes: Built with Emotion for easy appearance customization and Prism for flexible light/dark code highlighting.
    • Developer Experience: Powered by Vite, enabling fast development cycles via React Fast Refresh and a streamlined production build process.
    • Project Integration: Because it is built with pure React, it can be integrated into existing React projects more easily than non-React MDX presentation frameworks.

  2. Configure Presentify for Webpack

    When adding Presentify to a Webpack project, install the @mdx-js/loader and configure the module rules to handle .mdx files using @emotion/react as the JSX import source.
    npm install @mdx-js/loader
    module.exports = {
  module: {
    rules: [
      {
        test: /\.mdx?$/,
        use: [
          {
            loader: '@mdx-js/loader',
            options: {
              jsxImportSource: '@emotion/react',
              providerImportSource: '@mdx-js/react',
              remarkPlugins: [remarkMdxCodeMeta],
            },
          },
        ],
      },
    ],
  },
};

  3. Configure Presentify for Vite

    When adding Presentify to a Vite project, install the React and MDX Rollup plugins and configure vite.config.js (or .ts) to use @emotion/react as the JSX import source and include the remark-mdx-code-meta plugin.
    npm install @vitejs/plugin-react @mdx-js/rollup
    import mdx from '@mdx-js/rollup';
import react from '@vitejs/plugin-react';
import remarkMdxCodeMeta from 'remark-mdx-code-meta';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    react({ jsxImportSource: '@emotion/react' }),
    mdx({
      jsxImportSource: '@emotion/react',
      providerImportSource: '@mdx-js/react',
      remarkPlugins: [remarkMdxCodeMeta],
    }),
  ],
});

  4. Override default MDX components in Presentify

    To override the default components provided by presentify and mdx (such as h1), create a components object that spreads the default components import from presentify and defines the specific elements you wish to replace with your own custom React components.
    import React from 'react';
import ReactDOM from 'react-dom/client';
import { components } from 'presentify';

import Presentify from './Presentify.mdx';
import FancyH1 from './FancyH1';

const myComponents = {
  ...components,
  h1: () => <FancyH1 />,
};

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    {/* Pass the custom components object to the MDX component */}
    <Presentify components={myComponents} />
  </React.StrictMode>,
);

  5. Override global options for individual slides

    To override global theme options for a specific slide, use a frontmatter-style block immediately before the slide content. To avoid conflict with the slide separator (---), use +++ as the delimiter instead of ---.
    <PresentifyProvider options={{theme: 'dark'}}>
+++
backgroundImg: 'https://picsum.photos/536/354'
+++
# This slide has a custom background

---
# This slide uses the global dark theme
</PresentifyProvider>

  7. Create presentation slides using MDX

    Presentify uses .mdx files to define slides. Wrap your content in the PresentifyProvider component. Use Markdown headers for slide titles and the --- separator to define new slides. You can embed live JSX components directly within the MDX content.
    import { PresentifyProvider } from 'presentify';

<PresentifyProvider>
# Introducing Hooks

### What are they? And why do we need them?

---

# UseState

```jsx
function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      counter: {count}
      <button onClick={() => setCount(initialCount)}>reset</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  );
}

    </PresentifyProvider>

  8. Create and configure slides in Presentify MDX

    In a .mdx file, you can create a new slide by inserting a horizontal rule using either <hr /> or ---. To apply specific options to a slide, use frontmatter syntax with +++ delimiters instead of the standard ---. Slide-level options override any global configurations provided to the PresentifyProvider.
    +++
layout: normal
backgroundColor: blue
+++

# This is a slide
Content goes here

---

# This is the next slide

  10. Presentify Global and Slide Configuration Reference

    Presentify supports both global options (via PresentifyProvider) and per-slide overrides. The following options are available for both scopes:
    OptionTypeDefaultDescription
    themedark / lightlightCode syntax highlighter theme (dark = vsDark, light = github). Global only
    useFiraCodebooleanfalseUse FiraCode font with ligatures in Code syntax highlighter. Global only
    classNamestringnoneSet className to slide parent div
    backgroundColorstringwhiteSet background color to slide
    backgroundImgstringnoneSet background image to slide
    layoutnormal / centercenterSet layout of slide

  11. Configure individual slide options

    The following options can be set within the +++ frontmatter block of a slide to customize its appearance and behavior:
    className: "custom-class"      # string: set className to slide parent div
backgroundColor: "#f0f0f0"    # string: set background color (default: white)
backgroundImg: "/path/img.jpg" # string: set background image
layout: "normal"              # "normal" | "center" (default: center): set layout of slide

  12. Use custom React components inside Presentify MDX files

    For components that are not part of standard MDX syntax (like HTML tags), you can import and use them as regular React components directly within your .mdx file. Wrap the content in a PresentifyProvider to apply global options like themes or font settings.
    import { PresentifyProvider } from 'presentify';
import MyFancyComponent from './MyFancyComponent';

<PresentifyProvider options={{useFiraCode: true, theme: 'dark'}}>

# MyFancyComponent

<MyFancyComponent />

</PresentifyProvider>