import {Note} from './_component/note.server.js'
import {Editor} from './_component/editor.client.js'
export const navSortSelf = 5
export const info = {
  author: [
    {name: 'John Otander', github: 'johno', twitter: '4lpine'},
    {name: 'Titus Wormer', github: 'wooorm', twitter: 'wooorm'}
  ],
  published: new Date('2021-09-13'),
  modified: new Date('2021-11-01')
}

<Note type="important">
  **Note**: V2 is around the corner.
  This website is for that.
  It hasn’t been released yet.
  But you can try out the RC.
  You can be of great help by reading through these docs and letting us know
  what’s confusing or wrong or other suggestions you have.
  See [§ Support][support] for where to ask questions and
  [§ Contribute][contribute] for how to help.
</Note>

# Playground

Here you can play with the MDX format.
Write some MDX to find out what it turns into. {/* more */}
You can see the rendered result, the generated code, and the intermediary
ASTs.
This can be helpful for debugging or exploring.
To read about how the MDX format works, we recommend that you start with
[§ What is MDX][what].

<Editor children={`Hello, world!
Below is an example of markdown in JSX.

<div style={{padding: '1rem', backgroundColor: 'violet'}}>
  Try and change the background color to \`tomato\`.
</div>
`}/>

[what]: /docs/what-is-mdx/

[support]: /community/support/

[contribute]: /community/contribute/
