Playground on site

[alexander-akait]

It would be incredibly cool if there was playground on site ⭐

[silvenon]

Hey, let's expand on this a bit! Which subset of MDX features would this playground have? Would we have two files, e.g. a MDX file and a JS file that imports it? What benefit would a playground provide? Something that seems unclear about MDX at first and takes a while to understand, but a playground could clear up (i. e. how you came up with this idea)? Are there some playground examples of popular libraries that you think we could draw some inspiration from?

[silvenon]

Maybe we could just have a REPL, like Babel, so you know what a MDX file compiles to?

[davidtheclark]

Here's an example from a very similar library: https://mapbox.github.io/jsxtreme-markdown/

[silvenon]

This works fine for jsxtreme-markdown, but our output consist of a bunch of MDXTags, which might be hard and confusing to read to beginners. If we put regular HTML tags instead of MDXTags, that might be misleading because it hides the fact that people can actually customize components via components prop.

Example MDX input:

This is a paragraph.

<div>This is a div.</div>

Output:

export default ({components, ...props}) => (
  <MDXTag name="wrapper" components={components}>
    <MDXTag name="p" components={components}>{`This is a paragraph.`}</MDXTag>
	<div>{`This is a div.`}</div>
  </MDXTag>
)

The paragraph component is customizable, but the div isn't. Which aspect of this output should we show in the REPL and why?

I think it makes most sense to just embed a CodeSandbox example. Thoughts?

[johno]

First pass is addressed in #562, thanks for opening this issue!