Package Health Score

50 / 100

security
Security review needed
popularity
Small
maintenance
Inactive
community
Active

Explore Similar Packages

Security

Security review needed

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

Version				Vulnerabilities	License Risk
4.1.1	\|	03/2020	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
4.0.0	\|	02/2020		0 C 0 H 0 M 0 L	0 H 0 M 0 L
3.1.0	\|	02/2020		0 C 0 H 0 M 0 L	0 H 0 M 0 L
2.5.1	\|	07/2019		0 C 0 H 0 M 0 L	0 H 0 M 0 L
2.4.0	\|	06/2019		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Small

Weekly Downloads (119)

GitHub Stars: 11.35K
Forks: 603
Contributors: 60

Direct Usage Popularity

The npm package mdx-deck receives a total of 119 downloads a week. As such, we scored mdx-deck popularity level to be Small.

Based on project statistics from the GitHub repository for the npm package mdx-deck, we found that it has been starred 11,354 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Active

Readme.md: Yes
Contributing.md: Yes
Code of Conduct: No
Contributors: 60
Funding: No

With more than 10 contributors for the mdx-deck repository, this is possibly a sign for a growing and inviting community.

We found a way for you to contribute to the project! Looks like mdx-deck is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Inactive

Commit Frequency

No Recent Commits

Open Issues: 95
Open PR: 46
Last Release: 5 years ago
Last Commit: 3 years ago

Further analysis of the maintenance status of mdx-deck based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Inactive.

An important project maintenance signal to consider for mdx-deck is that it hasn't seen any new versions released to npm in the past 12 months, and could be considered as a discontinued project, or that which receives low attention from its maintainers.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: not defined

Age: 6 years
Dependencies: 12 Direct
Versions: 138
Install Size: 13.9 kB
Dist-tags: 3
# of Files: 7
Maintainers: 1
TS Typings: No

mdx-deck has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

MDX Deck

Award-winning React MDX-based presentation decks

📝 Write presentations in markdown
⚛️ Import and use React components
💅 Customizable themes and components
0️⃣ Zero-config CLI
💁‍♀️ Presenter mode
📓 Speaker notes

View demo

Getting Started

npm i -D mdx-deck

Create an MDX file and separate each slide with ---.


# Hello

---

## This is my deck

---

## The End

Add a run script to your package.json with the MDX Deck CLI pointing to the .mdx file to start the development server:

"scripts": {
  "start": "mdx-deck deck.mdx"
}

Start the development server:

npm start

Use the left and right arrow keys to navigate through the presentation.

Using MDX

MDX uses Markdown syntax and can render React components inline with JSX.

Imports

To import components, use ES import syntax separated with empty lines between any markdown or JSX syntax.

import { Box } from 'theme-ui'

Hello

Read more about MDX syntax in the MDX Docs.

Theming

MDX Deck uses Theme UI and Emotion for styling, making practically any part of the presentation themeable. It also includes several built-in themes to change the look and feel of the presentation.

See the list of available Themes
Read more about theming in the Theming docs.

Components

MDX Deck includes built-in components to help with creating presentations, a Notes component for adding speaker notes, a Head component for the document head, Header and Footer components for persistent header and footer content, and a Steps component for adding multiple intermediate steps in a single slide.

Third-Party Components

These optional libraries are intended for use with MDX Deck.

CodeSurfer: React component for scrolling, zooming and highlighting code.
mdx-code: Runnable code playgrounds for MDX Deck.
mdx-deck-live-code: Live React and JS coding in slides.

Note: please check with version compatibility when using these libraries.

Layouts

Each slide can include a custom layout around its content, which can be used as a template for visually differentiating slides.

// example Layout.js
import React from 'react'

export default ({ children }) =&gt; (
  <div style="{{">
    {children}
  </div>
)

import Layout from './Layout'

# No Layout

---



# Custom Layout

The layout component will wrap the MDX elements within that slide, which means you can add custom layout styles or style child elements with CSS-in-JS.

Presenter Mode

Press Option + P to toggle Presenter Mode, which will show a preview of the next slide, a timer, and speaker notes.

presenter mode screenshot

The presentation can be opened in two separate windows at the same time, and it will stay in sync with the other window.

Keyboard Shortcuts

Key	Description
Left Arrow, Page Up, Shift + Space	Go to previous slide (or step in Steps)
Right Arrow, Page Down, Space	Go to next slide (or step in Steps)
Option + P	Toggle Presenter Mode
Option + O	Toggle Overview Mode
Option + G	Toggle Grid Mode

CLI Options

-p --port     Dev server port
-h --host     Host the dev server listens to
--no-open     Prevent from opening in default browser

Videos & Articles

Examples

See how others have used MDX Deck for their presentations.

Usage Examples

The following examples will open in CodeSandbox.

MIT License

mdx-deck dependencies

@mdx-deck/gatsby-plugin @mdx-deck/themes chalk execa fs-extra gatsby gatsby-plugin-compile-es6-packages gatsby-source-filesystem initit meow react react-dom

FAQs

What is mdx-deck?

MDX-based presentation decks. Visit Snyk Advisor to see a full health score report for mdx-deck, including popularity, security, maintenance & community analysis.

Is mdx-deck popular?

The npm package mdx-deck receives a total of 119 weekly downloads. As such, mdx-deck popularity was classified as small. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is mdx-deck well maintained?

We found indications that mdx-deck is an Inactive project. See the full package health analysis to learn more about the package maintenance status.

Is mdx-deck safe to use?

While scanning the latest version of mdx-deck, we found that a security review is needed. A total of 0 vulnerabilities or license issues were detected. See the full security scan results.

Last updated on 21 November-2024, at 18:09 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP