Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[not an issue] An embeddable playground for Clio #257

Open
hatemhosny opened this issue Feb 6, 2024 · 0 comments
Open

[not an issue] An embeddable playground for Clio #257

hatemhosny opened this issue Feb 6, 2024 · 0 comments
Labels
enhancement New feature or request

Comments

@hatemhosny
Copy link

Please excuse the issue. I did not find the discussions section enabled in this repo.

Please allow me to introduce LiveCodes, a feature-rich, open-source, client-side, code playground that supports 80+ languages and frameworks. The announcement post gives a general overview.

Clio has a first-class support in LiveCodes.

Clio starter template is available for a quick start:
https://livecodes.io/?template=clio
(see all starter templates).

Clio starter template in LiveCodes

You can start an empty Clio project using this link: https://livecodes.io/?clio

Projects can be shared, exported and deployed (to GitHub Pages).

Playgrounds can be embedded in any webpage, using a powerful, yet easy-to-use, SDK.

This is an example for an embedded Clio playground:

<div id="container"></div>

<script type="module">
  import { createPlayground } from "https://unpkg.com/livecodes";

  createPlayground("#container", {
    config: {
      activeEditor: "script",
      markup: { 
        language: "html",
        content: "<h1></h1>",
      },
      script: {
        language: "clio",
        content: 'fn setTitle name:\n  title = document.querySelector "h1"\n  title.innerText = f"Hello, {name}!"\n\nexport fn main argv:\n  setTitle "Clio"\n',
      },
    },
  });
</script>

Preview

Screenshot:

embedded Clio playground

Please refer to the SDK documentations for details.

Comprehensive documentations are available with live demos, code samples and screenshots.

LiveCodes is free with unlimited usage, no ads and no account required. It can be easily self-hosted (if you want), and can be used for commercial projects (MIT license).

Disclosure: obviously, I'm the author of LiveCodes.

I thought you would be interested. Otherwise, please feel free to close this.
Thank you.

@hatemhosny hatemhosny added the enhancement New feature or request label Feb 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant