{"id":13907253,"url":"https://github.com/JetBrains/kotlin-playground","last_synced_at":"2025-07-18T05:30:51.452Z","repository":{"id":22497147,"uuid":"95214873","full_name":"JetBrains/kotlin-playground","owner":"JetBrains","description":"Self-contained component to embed in websites for running Kotlin code","archived":false,"fork":false,"pushed_at":"2025-05-20T17:00:21.000Z","size":2935,"stargazers_count":467,"open_issues_count":54,"forks_count":88,"subscribers_count":34,"default_branch":"master","last_synced_at":"2025-07-13T16:41:46.691Z","etag":null,"topics":["kotlin","kotlin-playground","playground"],"latest_commit_sha":null,"homepage":"https://jetbrains.github.io/kotlin-playground/examples/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JetBrains.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-06-23T11:40:47.000Z","updated_at":"2025-06-29T07:28:05.000Z","dependencies_parsed_at":"2023-11-27T14:47:14.330Z","dependency_job_id":"6dc05e84-ddb1-4ed0-bb17-f8f7bbfe4755","html_url":"https://github.com/JetBrains/kotlin-playground","commit_stats":{"total_commits":587,"total_committers":25,"mean_commits":23.48,"dds":0.5485519591141397,"last_synced_commit":"96f0d75d96f92ce5e2ce3853155325946353ef1f"},"previous_names":["jetbrains/kotlin-runcode"],"tags_count":66,"template":false,"template_full_name":null,"purl":"pkg:github/JetBrains/kotlin-playground","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JetBrains%2Fkotlin-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JetBrains%2Fkotlin-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JetBrains%2Fkotlin-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JetBrains%2Fkotlin-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JetBrains","download_url":"https://codeload.github.com/JetBrains/kotlin-playground/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JetBrains%2Fkotlin-playground/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265705284,"owners_count":23814414,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["kotlin","kotlin-playground","playground"],"created_at":"2024-08-06T23:01:51.221Z","updated_at":"2025-07-18T05:30:51.100Z","avatar_url":"https://github.com/JetBrains.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","HarmonyOS"],"sub_categories":["Windows Manager"],"readme":"[![official JetBrains project](http://jb.gg/badges/official-plastic.svg)](https://confluence.jetbrains.com/display/ALL/JetBrains+on+GitHub)\n[![NPM version](https://img.shields.io/npm/v/kotlin-playground.svg)](https://www.npmjs.com/package/kotlin-playground)\n\n# Kotlin Playground\n\nComponent that creates Kotlin-aware editors capable of running code from HTML block elements.\n\n[Examples](https://jetbrains.github.io/kotlin-playground/examples/)\n\n## Installation\n\n### Use our CDN\n\nInsert a `\u003cscript\u003e` element into your page and specify what elements should be converted in its `data-selector` attribute.\n\n```html\n\u003cscript src=\"https://unpkg.com/kotlin-playground@1\" data-selector=\"code\"\u003e\u003c/script\u003e\n```\n\nOr, if you need to separate process of loading/conversion, omit the `data-selector` attribute and use a second `\u003cscript\u003e` element like this:\n\n```html\n\u003cscript src=\"https://unpkg.com/kotlin-playground@1\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\ndocument.addEventListener('DOMContentLoaded', function() {\n  KotlinPlayground('.code-blocks-selector');\n});\n\u003c/script\u003e\n```\n\nYou can also overwrite the server where the code will be sent to be compiled and analyzed (for example if you host a server instance that includes your own Kotlin libraries). For that you can set the `data-server` attribute.\n\nAnd you can also set a default Kotlin version for code snippets to run on. Bear in mind that the [version set per editor](#customizing-editors) will take precedence though:\n\n```html\n\u003cscript src=\"https://unpkg.com/kotlin-playground@1\"\n        data-selector=\"code\"\n        data-server=\"https://my-kotlin-playground-server\"\n        data-version=\"1.3.41\"\u003e\n\u003c/script\u003e\n```\n\nFork \u0026 clone [the old server repository](https://github.com/JetBrains/kotlin-web-demo) or [the new server](https://github.com/AlexanderPrendota/kotlin-compiler-server).\n\n### Host your own instance\n\nInstall Kotlin-playground as dependency via NPM.\n\n```bash\nnpm install kotlin-playground -S\n```\n\nAnd then just use it in your code.\n\n```js\n// ES5\nvar playground = require('kotlin-playground');\n\ndocument.addEventListener('DOMContentLoaded', function() {\n  playground('code'); // attach to all \u003ccode\u003e elements\n});\n\n\n// ES6\nimport playground from 'kotlin-playground';\n\ndocument.addEventListener('DOMContentLoaded', () =\u003e {\n  playground('code'); // attach to all \u003ccode\u003e elements\n});\n```\n\n### Use from plugins\n\n1) [Kotlin Playground WordPress plugin](https://github.com/Kotlin/kotlin-playground-wp-plugin) — [WordPress](https://wordpress.com/) plugin which allows to embed interactive Kotlin playground to any post.\n2) [Kotlin Playground Coursera plugin](https://github.com/AlexanderPrendota/kotlin-playground-coursera-plugin) — Allows embedding interactive Kotlin playground for [coursera](https://www.coursera.org/) lessons.\n3) [Kotlin Playground Orchid plugin](https://orchid.netlify.com/plugins/OrchidSyntaxHighlighter#kotlin-playground) — Allows embedding interactive Kotlin playground in [Orchid](https://orchid.netlify.com/) documentation sites.\n\n### Options\n\nKotlin Playground supports several events, and also Kotlin version or server URL overwriting passing an additional `options` parameter on initialisation.\n\nFor example:\n```js\nfunction onChange(code) {\n  console.log(\"Editor code was changed:\\n\" + code);\n}\n\nfunction onTestPassed() {\n   console.log(\"Tests passed!\");\n}\n\nconst options = {\n  server: 'https://my-kotlin-playground-server',\n  version: '1.3.50',\n  onChange: onChange,\n  onTestPassed: onTestPassed,\n  callback: callback(targetNode, mountNode)\n};\n\nplayground('.selector', options)\n\n```\n\n**Events description:**\n\n- `onChange(code)` — Fires every time the content of the editor is changed. Debounce time: 0.5s.\n _code_ — current playground code.\n\n- `onTestPassed` — Is called after all tests passed. Use for target platform `junit`.\n\n- `onTestFailed` — Is called after all tests failed. Use for target platform `junit`.\n\n- `onCloseConsole` — Is called after the console's closed.\n\n- `onOpenConsole` — Is called after the console's opened.\n\n- `getJsCode(code)` — Is called after compilation Kotlin to JS. Use for target platform `js`.\n   _code_ — converted JS code from Kotlin.\n\n- `callback(targetNode, mountNode)` — Is called after playground's united.\n _targetNode_ — node with plain text before component initialization.\n _mountNode_  — new node with runnable editor.\n\n- `getInstance(instance)` - Getting playground state API.\n\n  ```js\n  instance.state      // playground attributes, dependencies and etc.\n  instance.nodes      // playground NodeElement.\n  instance.codemirror // editor specification.\n  instance.execute()  // function for executing code snippet.\n  instance.getCode()  // function for getting code from snippet.\n  ```\n\n## Customizing editors\n\n\nUse the following attributes on elements that are converted to editors to adjust their behavior.\n\n- `data-version`: Target Kotlin [compiler version](https://api.kotlinlang.org/versions):\n\n   ```html\n    \u003ccode data-version=\"1.0.7\"\u003e\n    /*\n    Your code here\n    */\n    \u003c/code\u003e\n    ```\n- `args`: Command line arguments.\n\n  ```html\n  \u003ccode args=\"1 2 3\"\u003e\n  /*\n  Your code here\n  */\n  \u003c/code\u003e\n  ```\n\n- `data-target-platform`: target platform: `junit`, `canvas`, `js` or `java` (default).\n\n  ```html\n   \u003ccode data-target-platform=\"js\"\u003e\n    /*\n    Your code here\n    */\n   \u003c/code\u003e\n   ```\n- `data-highlight-only`: Read-only mode, with only highlighting. `data-highlight-only=\"nocursor\"` - no focus on editor.\n\n  ```html\n  \u003ccode data-highlight-only\u003e\n    /*\n    Your code here\n    */\n  \u003c/code\u003e\n  ```\n\n  Or, you can make only a part of code read-only by placing it between `//sampleStart` and `//sampleEnd` markers.\n  If you don't need this just use attribute `none-markers`.\n  For adding hidden files: put files between `\u003ctextarea\u003e` tag with class `hidden-dependency`.\n\n  ```html\n  \u003ccode\u003e\n  import cat.Cat\n\n  fun main(args: Array\u003cString\u003e) {\n  //sampleStart\n      val cat = Cat(\"Kitty\")\n      println(cat.name)  \n  //sampleEnd                 \n  }\n    \u003ctextarea class=\"hidden-dependency\"\u003e\n      package cat\n      class Cat(val name: String)\n    \u003c/textarea\u003e\n  \u003c/code\u003e\n  ```\n  Also if you want to hide code snippet just set the attribute `folded-button` to `false` value.\n\n- `data-js-libs`: By default component loads jQuery and makes it available to the code running in the editor. If you need any additional JS libraries, specify them as comma-separated list in this attribute.\n\n  ```html\n  \u003ccode data-js-libs=\"https://my-awesome-js-lib/lib.min.js\"\u003e\n    /*\n    Your code here\n    */\n   \u003c/code\u003e\n  ```\n\n- `auto-indent=\"true|false\"`: Whether to use the context-sensitive indentation. Defaults to `false`.\n\n- `theme=\"idea|darcula|default\"`: Editor IntelliJ IDEA themes.\n\n- `mode=\"kotlin|js|java|groovy|xml|c|shell|swift|obj-c\"`: Different languages styles. Runnable snippets only with `kotlin`. Default to `kotlin`.\n\n- `data-min-compiler-version=\"1.0.7\"`: Minimum target Kotlin [compiler version](https://api.kotlinlang.org/versions)\n\n- `data-autocomplete=\"true|false\"`: Get completion on every key press. If `false` =\u003e Press ctrl-space to activate autocompletion. Defaults to `false`.\n\n- `highlight-on-fly=\"true|false\"`: Errors and warnings check for each change in the editor. Defaults to `false`.\n\n- `indent=\"4\"`: How many spaces a block should be indented. Defaults to `4`.\n\n- `lines=\"true|false\"`: Whether to show line numbers to the left of the editor. Defaults to `false`.\n\n- `from=\"5\" to=\"10\"`: Create a part of code. Example `from` line 5 `to` line 10.\n\n- `data-output-height=\"200\"`: Set the iframe height in `px` in output. Use for target platform `canvas`.\n\n- `match-brackets=\"true|false\"`: Determines whether brackets are matched whenever the cursor is moved next to a bracket. Defaults to `false`\n\n- `data-crosslink=\"enabled|disabled\"`: Show link for open in playground. Defaults to `undefined` – only supported in playground.\n\n- `data-shorter-height=\"100\"`: show expander if height more than value of attribute\n\n- `data-scrollbar-style`: Chooses a [scrollbar implementation](https://codemirror.net/doc/manual.html#config). Defaults to `overlay`.\n\n## Supported keyboard shortcuts\n\n  - Ctrl+Space\t\t   — code completion\n  - Ctrl+F9/Cmd+R\t       — execute snippet\n  - Ctrl+/\t\t       — comment code\n  - Ctrl+Alt+L/Cmd+Alt+L   — format code\n  - Shift+Tab\t\t   — decrease indent\n  - Ctrl+Alt+H/Cmd+Alt+H             — highlight code\n  - Ctrl+Alt+Enter/Cmd+Alt+Enter    — show import suggestions\n\n\n## Develop and contribute\n\n1. Fork \u0026 clone [our repository](https://github.com/JetBrains/kotlin-playground).\n2. Install required dependencies `yarn install`.\n3. `yarn start` to start local development server at http://localhost:9000.\n4. `yarn test` to run tests.\n   `TEST_HEADLESS_MODE=true` to run tests in headless mode.\n5. `yarn run build` to create production bundles.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJetBrains%2Fkotlin-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJetBrains%2Fkotlin-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJetBrains%2Fkotlin-playground/lists"}