search

extism / playground

BSD 3-Clause "New" or "Revised" License
5 stars 1 forks source link

embedded playgrounds #23

Open hatemhosny opened 8 months ago

hatemhosny commented 8 months ago

Great project, thank you!

I would like to let you know about LiveCodes, a feature-rich, open-source, client-side code playground that supports 80+ languages/frameworks. The playground can be embedded in any page using a powerful SDK.

Disclosure: I am the author of LiveCodes.

Extism runs in LiveCodes without any configurations. This is a basic example: https://livecodes.io/?x=id/7vizyqnh58a You may also use it with any of the supported frameworks. This is an example for using your official react hook: https://livecodes.io/?x=id/kp54tz9jjam

The playground runs totally on the client-side in the user browser (including compiling the 80+ languages/frameworks). So no backend, server configurations or installs required. You may have noticed in the examples above that npm modules can be used directly without any npm installs. See module resolution

LiveCodes offers a great mobile support with responsive layout and the touch-friendly code editor used on mobile. There are dark and light modes. Playgrounds can be shared, exported to GitHub gists, and even deployed to GitHub Pages, in addition to lots of other features.

the-algorithms.com website uses LiveCodes as its official playground for running code and tests for many of the languages: https://the-algorithms.com/playground?algorithm=binary-search&language=javascript

If you think LiveCodes can be useful for your playground and/or examples in the official website or for direct links to run samples, I would be happy to help. If you want to change the UI of the playground, LiveCodes SDK has a headless mode which can give you full control over the UI, maintaining the ability to communicate with the playground using various SDK methods

I believe you use docusaurus for the website. LiveCodes documentation website also uses docusaurus, and it uses the LiveCodes React SDK to embed examples: see code

App: https://livecodes.io Docs: https://livecodes.io/docs GitHub: https://github.com/live-codes/livecodes

Please excuse me for the issue. I thought you might be interested to know about LiveCodes. Of course, feel free to close this issue whenever you feel suitable.

zshipko commented 8 months ago

Thanks for sharing - LiveCodes looks pretty nice, we'll keep it in mind as we build out the playground application!