[docs] Make source code snippet editable

[hetanthakkar]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

It would be a great feature to implement a playground where you can tweak the code for the components(more specifically the props) and see the desired output on the website. I have worked on a similar kind of project in the past and I would be more than happy to work on this feature. I have researched the implementation detail for this feature and I am ready to finish this functionality (if permitted) by the end. I know this is not a simple feature but I am idle for few months and I can contribute significant time to this feature. @arpitBhalla @nancy2681 can also help me in this project. I do feel that this would be a great feature as fluent UI is not just used by Microsoft apps but also in other projects

Examples 🌈

Example: https://elastic.github.io/eui/#/

Motivation

The objective is to makes it easier for the developers to learn the API, not only by reading the props and their description but by using it. If you doubt it, try building your next project with Chakra. Pay attention to when you use the live demo edit to learn the API, how you feel about it, and how quickly you can POC things out.

The alternatives are:

• Opening the demo in codesandbox. In my environment, it takes 8 seconds to open the environment so I can start to do something. This is almost enough time for me to lose my context, see https://www.nngroup.com/articles/response-times-3-important-limits/ "10 seconds is about the limit for keeping the user's attention focused". Users with lower-end hardware than me, we lose them.
• Copying the demo into a project and playing with it. It's slow, you have to set up your dev environment, make sure you have the right version installed, find a page where you can only render the demo without being slowed down by loading unnecessary JS for the rest of the page.

Benchmark

• https://baseweb.design/components/button/
• https://sancho-ui.com/components/button/
• https://react-bootstrap.github.io/components/buttons/
• https://chakra-ui.com/docs/form/button
• https://github.com/FormidableLabs/react-live
• https://github.com/jquense/jarle

[eps1lon]

Thanks for the feedback.

Work has already started in #24640 by @mbrookes

[hetanthakkar]

@eps1lon Thank you. You can close this issue then

[oliviertassinari]

Since it's unlikely that @mbrookes finishes the effort in #24640. I'm reopening to have a reference issue about the different directions that we are exploring. I have updated the issue with the initial benchmark we have done.

It seems that I can replace this note in the roadmap project with this issue:

@hetanthakkar1 You are linking Elastic UI as a reference, but I can't find anything specific about this issue there. Could you describe a bit more how it's relevant? Thanks

[hetanthakkar]

@oliviertassinari Can you please visit this link and enable the playground switch https://elastic.github.io/eui/#/navigation/button

[oliviertassinari]

@hetanthakkar1 Ok thanks, it's a lot clearer. We do plan to solve the exact pain point that you have described:

you can tweak the code for the components(more specifically the props) and see the desired output on the website

So basically, being able to quickly try things out.

But we don't intend to solve it with a "playground" as ElasticUI has done. I would argue that it's way too restrictive. ElasticUI only support it on a subject of the components, and you are very limited, no composition possible for instance.

[oliviertassinari]

@arpitBhalla Feel free to continue the effort started in #24640, cc @mbrookes.

[mbrookes]

@arpitBhalla Happy to see this continued. Let me know if you need any help picking it up, but the PR description and review are a good starting point as to the current state of the code; as is the netlify preview link, where you can try it out.

[mnajdova]

@oliviertassinari should we close this issue as resolved now?

[oliviertassinari]

Yes, we can close. #34454 was the most significant step forward. Since then, we have been doing fixes to improve the DX, e.g. #35215