Code Playgrounds

[hatemhosny]

Great work. Thank you!

I suggest adding playgrounds to allow trying out code, similar to TheAlgorithms website, which uses LiveCodes (see example).

Please allow me to introduce LiveCodes, a feature-rich, open-source, client-side, code playground that supports 80+ languages and frameworks, including JS, TS, React, Vue, Svelte, Solid, Python, Go, Ruby, PHP and others (see starter templates). The announcement post gives a general overview.

Projects can be shared, exported and deployed (to GitHub Pages). Code can be imported from many sources including GitHub.

LiveCodes is very configurable. Many of the features can be configured by query parameters

For example, to load the bubble sort algorithm from this URL:

https://github.com/sudheerj/datastructures-algorithms/blob/master/src/javascript/algorithms/sorting/bubbleSortLinkedlist.js

Add it to the query parameter x like that, (also have the console open):

https://livecodes.io/?console=open&x=https://github.com/sudheerj/datastructures-algorithms/blob/master/src/javascript/algorithms/sorting/bubbleSortLinkedlist.js

open in LiveCodes

Screenshot:

You may want, for example, to add links to the algorithms in the repo README like that:

---

Bubble Sort: implementation - playground

---

LiveCodes also allows running automated tests (using Jest). This feature is used by TheAlgorithms website to validate the algorithms implementation.

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

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.

If you feel this can be useful, I can help getting started with providing playgrounds for the code in this repo or for other projects.

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

[sudheerj]

@hatemhosny Thank you for your words. I like LiveCodes playground for this repo. Can you assist with integrating playground?

[hatemhosny]

@sudheerj I'm glad you like LiveCodes.

LiveCodes can be used to demonstrate your code more than one way. These are examples that I quickly came up with:

• Embed a playground in a webpage that loads your code and run it.
  example: https://hatemhosny.github.io/datastructures-algorithms
  (edit in LiveCodes)

• Add links to playground e.g. in repo README

Example:

---

JavaScript

array/containerWithMostWater: implementation - playground

array/containsDuplicate: implementation - playground

array/maxCircularSubArray: implementation - playground

array/maxProductSubArray: implementation - playground

array/maxSubArray: implementation - playground

array/minRotatedSortedArray: implementation - playground

array/productExceptSelf: implementation - playground

array/rotate: implementation - playground

array/searchRotatedSortedArray: implementation - playground

array/threeSum: implementation - playground

doublyLinkedlist/SwapNodePairs: implementation - playground

doublyLinkedlist/palindromeCheck: implementation - playground

doublyLinkedlist/swapFirstAndLast: implementation - playground

hashtable/duplicates: implementation - playground

hashtable/findTwoSumIndices: implementation - playground

hashtable/firstNonRepeatingCharacter: implementation - playground

hashtable/groupAnagrams: implementation - playground

hashtable/verifyCommonElements: implementation - playground

linkedlist/binaryToDecimal: implementation - playground

linkedlist/detectLoop: implementation - playground

linkedlist/findKthNodeFromEnd: implementation - playground

linkedlist/findMiddleNode: implementation - playground

linkedlist/partitionList: implementation - playground

linkedlist/removeDuplicates: implementation - playground

linkedlist/reverseSubstring: implementation - playground

queue/enqueueDequeueWithStacks: implementation - playground

sorting/bubbleSortLinkedlist: implementation - playground

sorting/mergeTwoSortedLists: implementation - playground

sorting/selectionSortLinkedlist: implementation - playground

stack/balancedBrackets: implementation - playground

stack/sortStack: implementation - playground

strings/greatestCommonDivisor: implementation - playground

strings/longestRepeatingCharReplacement: implementation - playground

strings/longestSubstringWithoutRepeatingChar: implementation - playground

strings/mergeStringsAlternately: implementation - playground

strings/minWindowSubstring: implementation - playground

strings/validAnagram: implementation - playground

doublyLinkedlist/class/doublyLinkedlist: implementation - playground

doublyLinkedlist/class/node: implementation - playground

graphs/unweighted_undirected: implementation - playground

hashtable/hashtable: implementation - playground

linkedlist/Node: implementation - playground

linkedlist/class/linkedList: implementation - playground

linkedlist/class/node: implementation - playground

queue/queue_array: implementation - playground

queue/queue_with_linkedlist: implementation - playground

queue/queue_with_stacks: implementation - playground

stack/stack_with_array: implementation - playground

stack/stack_with_linkedlist: implementation - playground

trees/binary_search_tree: implementation - playground

bubbleSort/bubbleSort: implementation - playground

heapSort/heapSort: implementation - playground

insertionSort/insertionSort: implementation - playground

mergeSort/mergeSort: implementation - playground

quickSort/quickSort: implementation - playground

radixSort/radixSort: implementation - playground

selectionSort/selectionSort: implementation - playground

Go

01-bubbleSort/BubbleSort: implementation - playground

02-selectionSort/SelectionSort: implementation - playground

03-insertionSort/InsertionSort: implementation - playground

04-mergeSort/MergeSort: implementation - playground

06-quickSort/QuickSort: implementation - playground

07-heapSort/HeapSort: implementation - playground

08-radixSort/RadixSort: implementation - playground

---

Please let me know what you think.

[sudheerj]

@hatemhosny Thank you for the details. Do you support Java language as well? Also, how do we show if an algorithm exists in multiple files?

[hatemhosny]

Hello @sudheerj

Do you support Java language as well?

Currently, Java is not "yet" supported, because I'm not able to compile/run Java in the browser (which is a requirement for any language to be supported by LiveCodes, being a client-side only app). See this issue for details: live-codes/livecodes#516 (comment)

Also, how do we show if an algorithm exists in multiple files?

Code running in LiveCodes needs to be loaded in the editors. Depending on the language, this can be done differently. However, in JavaScript/TypeScript, modules can be imported from various sources (e.g. npm, deno, jsr, GitHub, custom modules). See docs for details:
https://livecodes.io/docs/features/module-resolution.

May be I can help more if you have specific examples.

[sudheerj]

Okay. Got it. I mean if some of the files like node.js exists in a separate file. For example, https://github.com/sudheerj/datastructures-algorithms/tree/master/src/javascript/datastructures/linkedlist

[hatemhosny]

You can just import from the GitHub URL, like this:

import Node from 'https://github.com/sudheerj/datastructures-algorithms/blob/master/src/javascript/datastructures/linkedlist/Node.js';

const node = new Node('hello');
console.log(node.toString());

open in LiveCodes

If you do not want to show the full URL in code and instead use an alias (e.g. './Node'), you can use custom import maps, to map this alias to a CDN-provided URL to your file like this:

Use this as custom settings (App menu -> Custom Settings)

{
  "imports": {
    "./Node": "https://cdn.jsdelivr.net/gh/sudheerj/datastructures-algorithms@master/src/javascript/datastructures/linkedlist/Node.js"
  }
}

Then this code should work:

import Node from './Node';

const node = new Node('hello');
console.log(node.toString());

open in LiveCodes

If you need to embed this playground in a web page, there is an advanced SDK (available in JS/TS, react, vue and svelte), that allows you to specify all the configurations you need and even communicate with the running playground.

I hope this answers your question. Please let me know if you have any other questions or comments.