Automatically turning stackblitz links into embeddings in React Markdown

If you’re using react-markdown to render markdown pages as part of your website or blog, you can automatically turn stackblitz links into embeddings. This is helpful when you

Step 1: Create a Custom component to render the embedding

To render the stackblitz embedding, you just need a simple component which renders an iframe. A minimal example could look like this:

1const StackblitzEmbed = ({ url }) => {
2  return <iframe src={url} style={{ width: '100%', height: '650px' }}></iframe>
3}

Now we just need to pass the correct url to the iframe to render the stackblitz editor.

Step 2: Configure ReactMarkdown to use your custom

Add the components property to your ReactMarkdown component. Inside that property, you can override the default components for a specific HTML Tag. In our case, we’re going to override the a Tag: If the link passed to the a Tag contains stackblitz.com/edit, we’re rendering our custom component. For all other links, we’re returning the default HTML a Tag:

1<ReactMarkdown
2  components={{
3    a: ({ node, className, children, ...props }) => {
4      if (props?.href?.includes('stackblitz.com/edit')) {
5        return <StackblitzEmbed url={props.href} />
6      }
7
8      return (
9        <a
10          href={props.href}
11          target="_blank"
12          rel="noopener noreferrer"
13        >
14          {children}
15        </a>
16      )
17    }
18	}}
19>
20    {post.markdown}
21</ReactMarkdown>

Step 3: Copy the link from stackblitz

Now you just need to grab the correct link from stackblitz. Open any project you like, then click on “Share” and “Embed”. Copy the “Embed URL” from the top:

Step 4: The Result

The final result looks like this:

In the Blog this will appear as a stackblitz embed, but in Notion I can insert the stackblitz URL as a simple link: