MDX

What is MDX?

MDX is a powerful extension of Markdown that allows you to use JSX components within your Apple Notes. This enables you to create rich, interactive content with custom components, styles, and scripts.

JSX support

JSX is supported in Quotion, allowing you to use HTML-like syntax within your notes.

Element styles

<div style={{ color: 'red', fontSize: '20px' }}>
  This text is red and larger.
</div>

Details/summary

Use the <details> and <summary> tags to create collapsible content sections.

<details>
  <summary>Details</summary>
  Hidden content here.
</details>

iframe

Embed external content, such as YouTube videos, using <iframe>.

<!-- Find the embed code when sharing the video on platforms like YouTube -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/Qw1OSKGVeIQ?si=WvXs-YTySSnbUVgI"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen
></iframe>

Style and script

The style and script tags customize individual post styles and scripts.

<style>
  .red {
    color: red;
  }
</style>
{/* Use it in className: <div className="red">This text is red.</div> */}

<script>
  console.log('This script runs when the post is loaded.');
</script>

Site-wide styles and scripts can be customized with personalization.

Plan Required

Using style tags requires a Lite+ plan. Using script tags requires a Pro+ plan.

MDX components

Quotion provides built-in MDX components to enhance your posts. Here is the list of available components:

MDX