Support for mdx instead of markdown
- Dominant language
- Jupyter Notebook
- Stars
- 13.3k
- Forks
- 5.8k
- Avg merge
- 6d 11h
- Merged PRs (30d)
- 7
Description
Hi I need to render some react components which are already supported in mdx, it would be wonderful if I could pass data from python numpy to my react component in mdx in jypyter to render graphs
### Problem
**Integration with mdx:** https://github.com/mdx-js/mdx
`[py]`
```py
import numpy as np
import globals
data = np.array.rand(2,3)
globals.data = data
```
`[mdx]`
```mdx
import {Chart} from './snowfall.js'
export const year = 2013
# Last year’s snowfall
In {year}, the snowfall was above average.
It was followed by a warm spring which caused
flood conditions in many of the nearby rivers.
```
### Proposed Solution
- Add frontend tooling like [vite](https://vitejs.dev/)
- Add [vite-mdx](https://www.npmjs.com/package/vite-plugin-mdx)
- Support for a data connecter through socket to pass data from python to mdx files as variables
- `globals` as common variable to pass data as json
- from python dictionary it can easily be converted to javascript object
- which is what is needed in most of the charting library in react
### Additional context
JSX and react frontend has lot of charting tools like d3 which are very useful, it would be really helpful to show data from python exports to those frontend renders like mdx
```[tasklist]
### Tasks
```
Contributor guide
Research direction
No project files or tests are named. Start by reviewing the Jupyter Notebook frontend architecture and the linked MDX and Vite integration proposals, then trace how Python data could reach a frontend component. Done would require an agreed implementation for MDX rendering and Python-to-JavaScript data transfer, with validation in the relevant notebook workflow.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- jupyter-notebook, numpy, python, react, vite
- Domain
- data, frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 15/100