Online playground

[hatemhosny]

What is the problem this feature would solve?

Great project. Thank you.
Execuse the issue. I did not find the discussions section enabled for this repo.

I propose providing online playground that can be embedded in the website to run most of the code snippets, so that it becomes interactive documentation.

This would reduce barrier to entry, allow users to explore code snippets and share runnable playgrounds.

What is the feature you are proposing to solve the problem?

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.

Demo: https://livecodes.io/?x=id/r6pds9gbd7r

LiveCodes, by default, uses Monaco editor (the code editor that powers VS Code) on desktop and CodeMirror6 on mobile. Monaco editor offers a great support for TypeScript, with intellisense and auto-complete, while CodeMirror6 offers a great mobile support.

Type definitions for Effect is loaded and used in the editor. The TypeScript code is compiled and runs in the output.

LiveCodes is a client-side only app, with no backend. All the compilation occurs in the browser. So after initial load, the playground becomes very fast with no server rounds.

Projects can be shared, exported (e.g. GitHub gist) 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 playground:

import { createPlayground, getPlaygroundUrl, type Config } from "livecodes";

const config: Partial<Config> = {
  activeEditor: "script",
  script: {
    language: "typescript",
    content: `import { Effect, Console } from "effect"
const program = Console.log("Hello, World!")
Effect.runSync(program)
`,
  },
  mode: "simple",
  editor: "monaco",
  layout: "vertical",
  tools: { status: "full" },
};

createPlayground("#playground", { config });

The SDK is also available for react, vue and svelte.

The SDK also allows creating links to playgrounds with predefined code.

This is a demo (a playground for Effect playgrounds 😊):
https://livecodes.io/?x=id/sc99ydmrg8j

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).

LiveCodes is used by TheAlgorithms website to run & validate the implementation of algorithms in different languages. Example: https://the-algorithms.com/playground?algorithm=binary-search&language=javascript

If you are interested, I'd be happy to help adding embedded playgrounds to your website.
Please let me know if you have any comments, questions or suggestions.

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

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

What alternatives have you considered?

No response

[IMax153]

@hatemhosny - Thank you so much for bringing your project to our attention! We've talked a lot about embedding a playground of sorts into the website. One of the reasons we avoided using the Monaco Editor is because you cannot overwrite the default TypeScript version (a feature that is key for us since we don't want to be restricted to a particular TypeScript version).

See microsoft/monaco-editor#4305 for some context.

Does LiveCodes allow for manipulating the TypeScript version used by the editor?

[hatemhosny]

Thank you @IMax153 for the quick response.

No, LiveCodes does not allow changing TypeScript version used by the editor.
Currently, LiveCodes uses the latest Monaco editor v0.48.0 which uses TypeScript v5.0.2

However, custom modules can be defined. Also custom types can be used for any module. This can be useful for some cases like preparing docs for packages that are not yet published.

Example: This demo is using React 19 (beta) with proper types (before stable release)
https://livecodes.io/?x=id/aqpientfcyc

Would you kindly provide a sample code and the expected behavior so that I can see if I can cover your use case?

[IMax153]

Hey @hatemhosny - thanks for confirming. It's not so much a specific use case we have in mind, but the library in general.

Currently effect requires TS 5.4 or newer.

We are trying to avoid being tied to a specific TS version because sometimes we ship features in the library that take advantage of more modern TS features.

Cc'ing @mikearnaldi here as well as this discussion is relevant to what we've been chatting about recently.

[hatemhosny]

Please note that LiveCodes compiler is separate from the editor, since other editors are also supported in LiveCodes (e.g. CodeMirror).
Currently, LiveCodes is using TypeScript v5.4.5 for the compiler.
This means that new TypeScript features will be compiled successfully to JavaScript and run with no errors, however, the editor might mark them as syntax errors.

e.g. This is an old version of LiveCodes that used a monaco version that did not support the satisfies keyword.
https://v8.livecodes.io/?x=id/yssjtrhs6cx&compiled=open

Notice that the editor marked an error, while the code was compiled successfully

[mikearnaldi]

Unfortunately without support for latest ts we won't be able to use it, regardless of the fact that it compiles the editor shows errors so that's not an option. Unfortunately we use features in latest TS at the type level. Maybe in some time when Monaco will catch up

[hatemhosny]

Unfortunately without support for latest ts we won't be able to use it, regardless of the fact that it compiles the editor shows errors so that's not an option. Unfortunately we use features in latest TS at the type level. Maybe in some time when Monaco will catch up

I think this is reasonable.

Meanwhile, I will be working on some editor improvements for TypeScript support. This should include features similar to that provided by the editor of the official TypeScript playground (things like twoslash support and some improvement in automatic type aquisition). I will, as well, look into matching TypeScript version used by the editor with that of the compiler.

Thank you.

[hatemhosny]

hi @mikearnaldi & @IMax153

LiveCodes has been updated. Now both the editor and compiler use the same TypeScript version (which is currently v5.4.5).
This uses the same way that the official TypeScript playground editor uses to support the recent TypeScript versions.

Also now TypeScript twoslash comments are supported (also like TypeScript official playground).

demo: https://livecodes.io/?x=id/yir3dytc8vj

I thought you might be interested.
Thank you.