Is it possible to replace the code displayed in the Canvas?

[mild field]

We're using @emotion/styled to create some components. For example, I have a component called Flex that is a styled('div').

If I write:

<Canvas>
  <Story name="Main">
    {(args) => (
      <Flex gap={3}>
        <Square />
        <Square />
        <Square />
      </Flex>
    )}
  </Story>
</Canvas>

I would expect the code that's displayed when you click Show code to be <Flex>...</Flex> but instead it's <Styled(div)>...</Styled(div)>. Is it possible for me to replace the code that's displayed?

[brazen needle]

Yes. There are a couple different ways to do this. The first is to use the docs.source.code parameter on the story:.

https://storybook.js.org/docs/react/writing-docs/doc-block-source#gatsby-focus-wrapper

In MDX, this would look like:

<Canvas>
  <Story name="Main" parameters={{ docs: { source: { code: 'some string' } } }}> ...

The other way would be to take advantage of an internal API that a lot of users have discovered:

<Canvas mdxSource="some string">
  ...

In 7.0 we're moving towards a model where stories are defined in CSF and embedded in MDX. It will be backwards compatible, so both of these solutions should still work. However, I'd recommend a slightly different solution in 7.0 (similar to the first solution, but in CSF)