Docs code playground

[hatemhosny]

Thank you for such a nice project.

I suggest changing the code playground in the examples page of the docs website to use LiveCodes.

Demo: https://hatemhosny.github.io/vue3-carousel/examples.html

Screenshots:

I'm the author of LiveCodes, a feature-rich open-source code playground that supports 90+ languages/frameworks (see starter templates). It runs totally on the client with no backend. It is totally free for unlimited usage with no account required. It has good mobile support. Projects can be shared, exported, deployed (to GitHub Pages) or embedded in web pages. There is a powerful SDK that allows embedding and communicating with playgrounds.
Please see the docs for details.

You can see it used in the-algorithms, RacingBars and CheatSheets websites.

I have already implemented adding LiveCodes to your docs website in a fork. Please see the commit I added to use the new playground.

Advantages over the current playground

• Much lighter weight. The playgrounds load much faster with no need to download a whole nodejs environment in the browser and no need for npm installs or bundling.
• Good mobile support. So you can remove this notice

  If you're experiencing issues loading the live examples or you're browsing on a mobile device, visit the Fallback Examples Page for a better experience.

• No need to maintain the fallback examples page.
• A much simpler UI. There are other display modes if you prefer.
• Light and dark themes and theme color that matches your website design.
• The code of the examples is in your code base. So you can track changes using git.

There is also a "Preview in LiveCodes" GitHub action for PRs:
(demos: RacingBars - Jotai)

This adds a comment in PR with every push to show pre-configured demos for your library that use the newly pushed code. This does not need to publish the library to npm or any other registry.

If you are interested, I'd be happy to add a PR to your repo.
Obviously, if you are not interested, please feel free to close this issue.
Thank you.

[ismail9k]

Hey @hatemhosny,

I really like what you’ve done with LiveCodes—it looks like a fantastic playground, and I’d love to support it.

Your implementation in the fork looks great, and I’m definitely open to integrating it into the docs. I’d also be happy to contribute to your project whenever my time allows.

Feel free to submit a PR, and we can review it together. Thanks again for your efforts and for sharing such a great tool!

[hatemhosny]

Thank you, @ismail9k , for the kind words.
I'm glad you like LiveCodes.

I will start a PR with implementation. Then we can discuss if you also want to add the "Preview in LiveCodes" GH action.

I would be very grateful if you contribute to LiveCodes. My experience in Vue is no where near yours.
This is the implementation of Vue SFC support (which is based on the official Vue REPL + some additions that make use of LiveCodes features).
I plan to make signifcant improvements for SFC for vue and svelte. I'm sure your experience would be very helpful.

Thank you 🌹

[ismail9k]

Thanks! 😊 I’ll gladly accept the PR for integrating LiveCodes into the docs and will try to help improve Vue SFC support whenever I’m available. Let me know how I can assist! 🌟

[hatemhosny]

Thank you, @ismail9k
I hope your users will like the new experience.

Would you also be interested in "Preview in LiveCodes" GitHub action for PRs? Shall I open a PR for that?

I have already started working on improving Vue SFC (e.g. allowing to show 2 SFCs, so that one can import the other and show-case passing props, etc). Also I'm working on improved editor support and other things.
When I have something ready, allow me to mention you there to have your opinion. I'm sure your insights will be very helpful.