Components.studio

MDX

Source file extensions: .mdx

MDX is an authorable format that lets you seamlessly write JSX in Markdown documents.

MDX 2 is now used by default.

MDX is recommended with frameworks supporting JSX as first-class citizen like React, Preact or Stencil.

Example

doc.mdx

import MyComponent from './MyComponent';

# Hello, _world_!

Below is an example of JSX embedded in Markdown. <br />
**Try and change the background color!**

<MyComponent></MyComponent>

Import npm packages

You can import modules from npm by using their bare name:

import { Box, Heading, Text } from 'rebass'

# Here is a JSX block

It is using imported components!
<Box>
<Heading>Here's a JSX block</Heading>
<Text>It's pretty neat</Text>
</Box>

You can import a module from the component, use the relative path with ./:

import MyComponent from './MyComponent';

# Using the component I just coded

<MyComponent></MyComponent>

Vue specific usage

You need to provide a specific runtime for being able to render MDX files.

In your package.json, declare this dependency:

{
  "devDependencies": {
    ...
    "vue-jsx-runtime": "*"
    ...
  }
}

Finally use your Vue component:

import MyComponent from './MyComponent.vue';

<MyComponent></MyComponent>

Stencil specific usage

You need to provide a specific runtime for being able to render MDX files.

In your package.json, declare this dependency:

{
  "devDependencies": {
    ...
    "stencil-jsx-runtime": "*"
    ...
  }
}

In Stencil you cannot use directly the module export but you can use the tag of your custom element.

Use the JSX syntax to pass properties/attribute/listeners to your component:

import './MyComponent';

const foo = {
value: "bar"
};

<my-component prop1={foo} style={{border:'1px solid red'}}></my-component>

References