Add Playground Feature for Trying Out Examples

[philippfromme]

Our documentation of complex topics such as BPMN, DMN, FEEL, and element templates lacks examples that can be tried out. One example is https://docs.camunda.io/docs/components/modeler/desktop-modeler/element-templates/defining-templates/ which is not easy to consume (https://github.com/bpmn-io/internal-docs/issues/805) without examples and the ability to try them out. There should be a playground feature that allows users to try out examples that are part of the documentation.

These playgrounds would live outside of the documentation and be accessible without having to go to the documentation first. A great example of such a playground is the TypeScript playground: https://docs.camunda.io/docs/components/modeler/desktop-modeler/element-templates/defining-templates/ There is already a playground for element templates (https://bpmn-io.github.io/element-template-playground/) but it's not linked to the documentation and not discoverable. As a first step, this playground could be used to try out examples that are part of the element template documentation.

The necessary steps would be

• [ ] Add deep link functionality to the playground
• [ ] Proper URL for playground (e.g. https://playground.camunda.io/element-templates?template=...)
• [ ] Add examples to the element templates documentation that link to playground
• [ ] Blog about it

---

Documentation issue: https://github.com/bpmn-io/internal-docs/issues/805 Miro board: https://miro.com/app/board/uXjVN_hA2uc=/

[akeller]

@philippfromme I love this! Do you need any support from DevEx, or will this be handled by the Modeler team(s)?

[philippfromme]

I would be happy to drive this if we all agree it's worth investing in. The majority of the work would be done by us.