[docs] Make source code snippet editable #26476
Description
- 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.