Option to show editor below output

[michaeltford]

@JeremyRH would it possible to have the editor below the output? Ideally with a toggle button (exactly like the show code/hide code option in storybook docs). What I am trying to accomplish is to create pages that have description => example => code. The 'best' scenario would be to replace the default code viewer with your Monaco plugin.

[JeremyRH]

I've been thinking about doing that in the next major version. Replace the default code viewer with Monaco (with live edit capabilities).

Right now, you can use the Playground component in MDX format. But it might not look exactly like you want and might be a lot of work to create the whole page.

[JeremyRH]

This is now possible using the Playground component in MDX format in version 4:

import { Playground } from 'storybook-addon-code-editor';

const Container = (props) => (
  // Customize this.
  <div>
    {props.preview}
    <div style={{ height: '300px', overflow: 'auto', resize: 'vertical' }}>
      {props.editor}
    </div>
  </div>
);
<Playground
  Container={Container}
  code="export default () => <h1>Hello</h1>"
/>

It will still require work to get an mdx page to look like the default storybook docs page but at least it's possible now.