Maybe helpful/relevant to this issue:

For Cientos, for on-screen demos with snippets, we've been including demos then showing the demo's own code using VitePress' built-in include syntax.

Live docs page

https://cientos.tresjs.org/guide/staging/sky.html

Code for docs page

# Sky

<DocsDemo>
  <SkyDemo />
</DocsDemo>

`<Sky />` is a wrapper for the [Three.js `Sky` add-on](https://threejs.org/examples/?q=sky#webgl_shaders_sky).

## Usage

<<< @/.vitepress/theme/components/SkyDemo.vue{3,9}

## Props

<CientosPropsTable component-path="src/core/staging/Sky.vue" />

Link to GH

When writing docs, having snippets that are runnable and running on the page has kept me from introducing bugs in the demo code a few times.

It also has a positive effect, imho, of forcing me to make a minimum runnable example, which is then directly runnable by users; they don't have to figure out, e.g., "Where do I paste this?"

I'll include only code snippets, we've 3 languages and 2 more comming, we need to update only the example once avoiding to update every code snippet in every localised page.

About running examples, we should do it also once.

@userquin

Sounds good. Good luck!