Add styling and control line breaks for custom components.

Thank you, I got it working! The video helped me finally wrap my brain around how you can feed custom components in Plasmic Studio. That’s awesome!

I managed to add styling support also. The process is somewhat explained here:,Allow%20p[…]ng%20via%20className%20prop,-If%20your%20code

Based on the video above, my final code for Markdown.tsx ended up as follows:

import {ReactMarkdown} from "react-markdown/lib/react-markdown";

export default function Markdown (props: {markdown?: string, className?: string}) {

`const defaultMarkdown = `# Hello *world*!`;`

`return (`
    `<div className={props.className}>`
        `children={props.markdown || defaultMarkdown}`


This adds support for styling the Markdown components in Studio via the Design tab

Now i just need to figure out if there’s a way to control those huge line/paragraph breaks