DEV Community

Cover image for Introducing mdjs - interactive demos everywhere

Introducing mdjs - interactive demos everywhere

Thomas Allmer on April 15, 2020

All shared code should have written documentation to show what it can be used for and what the idea behind it is. Users should at least be able to ...
Read full post
Collapse
 
whoisryosuke profile image
Ryosuke •

Interesting concept. Digging the simplicity of the execution, thoughtfulness towards backwards (and code editor) compatibility, lots of cool stuff going on.

Been working with MDX a lot myself, big fan of the syntax and how easy it makes including components (or straight up JS). The limitation I see with this method vs MDX is the inability to beat Markdown inside components. With this method, you essentially “eject” to HTML, which can be tricky for those looking for simpler authoring experiences.

Collapse
 
dakmor profile image
Thomas Allmer Open Web Components • • Edited

The limitation I see with this method vs MDX is the inability to beat Markdown inside components.

I can't really follow 🙈what does "beat Markdown inside components" mean? care to elaborate 🤗
The only guess I have is that you mean it does not support jsx? if so yes that is currently true - although if needed we could introduce a jsx story which could support it 🤔

Collapse
 
whoisryosuke profile image
Ryosuke •

Oops. Meant “Write” 😅 phone autocorrected I guess.

For example, I do this in MDX projects all the time:

<PageLayout>

# Markdown being parsed inside JSX

Let’s me use components inline, as well as containers for content, while retaining the MD syntax for simpler authoring without writing excessive `<p>` tags 👌

</PageLayout>

Should work the same with Web Components if they have slots?

Thread Thread
 
dakmor profile image
Thomas Allmer Open Web Components •

markdown supported usage of HTML right from the start 👍

we use details/summary a lot like this

<details>
<summary>Example config</summary>

## Details for the config
Some text

</details>
Enter fullscreen mode Exit fullscreen mode

and as web components are "normal" html tags they will work just fine as well 👍
e.g. you could do

<my-details>
<my-summary>Example config</my-summary>

## Details for the config
Some text

</my-details>
Enter fullscreen mode Exit fullscreen mode

to bring in your design/ux/animations/...

Collapse
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦 Open Web Components •

Hey @ben wouldn't it be cool if dev.to ran these?

Collapse
 
ben profile image
Ben Halpern •

Yes it would!