Online playground

[hatemhosny]

Thank you for the great project!

Most frameworks provide online playgrounds to quickly try and explore the framework before committing to using it. It is also a nice way to share demos and code snippets.

I suggest using LiveCodes as the playground for Alpine.js.

Demo: https://livecodes.io/?x=id/v7xu53ah4b5&view=result

Demo (UI components + Tailwind CSS): https://livecodes.io/?x=id/iugsvukwzbg

LiveCodes is an open-source client-side code playground with wide language/framework support, including JS, TS, React, Vue, Svelte, Solid, Python, C++ and many more.

Everything runs on the client-side with no need for a backend.

npm modules can be imported and used as usual. No need for npm installs, or build steps.

Monaco editor is used on desktop with autocomplete, emmet support, vim mode and more. On mobile, the touch-friendly CodeMirror6 editor is used instead. The editor selection is configurable.

There are many features including code formatting, free AI assistant, integrated console, compiled code viewer, test runner and many more.

Projects can be shared, exported (e.g. to GitHub gists), deployed (to GitHub Pages) or embedded in web pages.

There is a powerful SDK that allows creating and communicating with embedded playgrounds. This includes loading code, watching for code changes, getting edited code, getting share URL, etc (see SDK methods).

It is very configurable with multiple display modes, default views, themes and colors.

LiveCodes has excellent mobile support with responsive layout and touch-friendly code editor on mobile. It also has great cross-browser compatibility.

It is totally free with unlimited usage and no account required.
LiveCodes is open-source released under MIT license and it can even be easily self-hosted if you need to.

Examples for projects using LiveCodes:

• Ripple TS official playground: https://www.ripplejs.com/playground
• vue3-carousel docs: https://vue3-carousel.ismail9k.com/examples.html
• Vento official playground: https://vento.js.org/
• Racing bars: https://racing-bars.hatemhosny.dev/playground

Please see docs for details: https://livecodes.io/docs

Disclosure: I'm the author. Please let me know if you are interested. I would be happy to help adding playgrounds where you see fitting.
Obviously, if you are not interested please feel free to close this.

[ekwoka]

I made https://awesomealpine.com/play for this purpose

Supports easy adding of core plugins, selecting alpine version, using typescript, and tailwind.