# mdjsx

> CLI for rendering .mdx and .jsx files

Latest version **1.0.0-6** (published 2018-04-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install mdjsx
pnpm add mdjsx
yarn add mdjsx
bun add mdjsx
```

Provides the command `mdjsx`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-6 |
| Published | 2018-04-06 |
| First published | 2018-04-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 25 |
| Unpacked size | 15.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Brent Jackson |
| Maintainers | jxnblk |

## Links

- npm: https://www.npmjs.com/package/mdjsx
- npm.io page: https://npm.io/package/mdjsx

## Dependencies (25)

- [ora](https://npm.io/package/ora.md) ^2.0.0
- [meow](https://npm.io/package/meow.md) ^4.0.0
- [chalk](https://npm.io/package/chalk.md) ^2.3.2
- [react](https://npm.io/package/react.md) ^16.3.0
- [webpack](https://npm.io/package/webpack.md) ^4.4.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.3.0
- [babel-core](https://npm.io/package/babel-core.md) ^6.26.0
- [@mdx-js/mdx](https://npm.io/package/@mdx-js/mdx.md) ^0.7.1
- [@mdx-js/tag](https://npm.io/package/@mdx-js/tag.md) ^0.7.0
- [gray-matter](https://npm.io/package/gray-matter.md) ^4.0.1
- [read-pkg-up](https://npm.io/package/read-pkg-up.md) ^3.0.0
- [babel-loader](https://npm.io/package/babel-loader.md) ^7.1.4
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0
- [styled-system](https://npm.io/package/styled-system.md) ^2.2.1
- [webpack-serve](https://npm.io/package/webpack-serve.md) ^0.3.1
- [react-dev-utils](https://npm.io/package/react-dev-utils.md) ^5.0.0
- [update-notifier](https://npm.io/package/update-notifier.md) ^2.4.0
- [babel-preset-env](https://npm.io/package/babel-preset-env.md) ^1.6.1
- [stringify-object](https://npm.io/package/stringify-object.md) ^3.2.2
- [styled-components](https://npm.io/package/styled-components.md) ^3.2.5
- [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.24.1
- [babel-preset-stage-0](https://npm.io/package/babel-preset-stage-0.md) ^6.24.1
- [webpack-node-externals](https://npm.io/package/webpack-node-externals.md) ^1.7.2
- [mini-html-webpack-plugin](https://npm.io/package/mini-html-webpack-plugin.md) ^0.2.3
- [babel-plugin-transform-runtime](https://npm.io/package/babel-plugin-transform-runtime.md) ^6.23.0

## Recent versions

- 1.0.0-6 (latest) — 2018-04-06
- 1.0.0-5 — 2018-04-05
- 1.0.0-4 — 2018-04-05
- 1.0.0-3 — 2018-04-05
- 1.0.0-2 — 2018-04-05
- 1.0.0-1 — 2018-04-05
- 1.0.0-0 — 2018-04-05

## README

# mdjsx

CLI for rendering .mdx & .jsx files

```sh
npm i -D mdjsx
```

Add run scripts to your `package.json`

```json
"scripts": {
  "start": "mdjsx hello.mdx",
  "build": "mdjsx hello.mdx -d dist"
}
```

## Usage

**Development server**

```sh
mdjsx hello.mdx
```

**Static build**

```sh
mdjsx hello.mdx --out-dir dist
```

**HTML only build**

```sh
mdjsx hello.mdx --out-dir dist --static
```

### Options

- `-p --port`: port number for development server
- `-o --open`: automatically open development server in default browser
- `-c --config`: path to [config file](#configuration)
- `-s --static`: renders HTML without client-side bundle.js
- `-d --out-dir`: builds page to the given directory

### MDX Format

[MDX][mdx] files combine markdown syntax with JSX.
Each .mdx file can use [front-matter][fm] to define default props and metadata used for static page generation.

**Example .mdx file**
```mdx
---
title: Hello MDX
---

# Hello Markdown

<div>
  <h2>{props.title}</h2>
</div>
```

### JSX Format

JSX files are rendered as pure React components, which allows for rapid prototyping without the need to setup a full React application.
JSX files also use [front-matter][fm] to define default props and metadata.

**Example .jsx file**

```jsx
---
title: Hello JSX
---
<div>
  <h2>{props.title}</h2>
</div>
```

## Configuration

A configuration file can be provided to add components and theme to scope.

```js
// example config.js file
import * as Rebass from 'rebass'

const components = Rebass

const theme = {
  colors: {
    blue: '#07c',
    green: '#0f8'
  }
}

export default {
  components,
  theme
}
```

Use the `--config` flag to point to the configuration file.

`mdjsx hello.mdx --config config.js`

When a configuration file provides components in scope, they can be used in .mdx or .jsx files.

**Example .jsx file**
```jsx
---
title: Hello JSX
---
<Box px={3} py={4} bg='blue' color='white'>
  <Heading>
    {props.title}
  </Heading>
</Box>
```

### Provider

A wrapping higher-order component can be added to the config to provide data, layout, and other props to the rendered file.

```js
// example config.js
import React from 'react'
import * as Rebass from 'rebass'

const components = Rebass

const provider = App => props => (
  <Rebass.Box px={3} py={4}>
    <App {...props} />
  </Rebass.Box>
)

export default {
  components,
  provider
}
```

---

MIT License

[mdx]: https://github.com/mdx-js/specification
[fm]: https://jekyllrb.com/docs/frontmatter/

---
_Source: https://npm.io/package/mdjsx · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._