Proposal for StackBlitz and CodePen Demos for Lion Components

[rajkeshwar]

Hi Team,

I have an idea to dynamically generate StackBlitz and CodePen demos for Lion components. This will provide an interactive way to understand how these components can be integrated into a Lit project.

To demonstrate this concept, I have created a Pull Request (#2503). Please take a look. I have also uploaded a video and an image showcasing button examples.

Currently, this implementation is only for buttons. If the approach is well received, I would be happy to extend it to other components and contribute to the documentation.

Some of the files involved ideally belong to Modern Web’s Rocket project. However, for the purpose of this proof of concept, I have included them within the Lion repository.

Looking forward to your feedback!

Best,
Rajkeshwar Prasad

[takrishna]

Providing an embedded solution within the Lion package would better support enterprise use cases, where security and compliance constraints often prevent internal libraries from being exposed to external, hosted editors.

[rajkeshwar]

@takrishna I completely agree. While Lion components are framework-agnostic by nature, the current documentation lacks specific implementation examples for Angular, React, and Vue. Providing these would significantly lower the barrier to entry and encourage wider community adoption. Additionally, clear documentation on customizing default design tokens would be a huge win for developers.

To address this, I’ve been developing a browser-based playground as a hobby project. Unlike StackBlitz, which can be slow due to VM overhead, this runs entirely in the browser for a faster experience. I’d love to contribute this to the project if the team is interested. We could embed it directly into the Lion site or host it separately, using a POST method to send example code to the playground. This would allow users to experiment with code in real-time and see exactly how it fits their specific use cases.

https://uwc-playground.vercel.app