{"id":18789027,"url":"https://github.com/gapmiss/livecodes-playground","last_synced_at":"2025-04-13T13:32:23.198Z","repository":{"id":221056248,"uuid":"753332835","full_name":"gapmiss/livecodes-playground","owner":"gapmiss","description":"Open-source client-side code editor plugin for Obsidian.md - powered by LiveCodes.io","archived":false,"fork":false,"pushed_at":"2024-05-11T22:12:27.000Z","size":968,"stargazers_count":15,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T05:01:51.683Z","etag":null,"topics":["code-editor","learn-to-code","livecodes","obisidian-plugin","obsidian-md","playground"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gapmiss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["gapmiss"],"ko_fi":"gapmiss","custom":"https://buymeacoffee.com/gapmiss"}},"created_at":"2024-02-05T22:56:21.000Z","updated_at":"2024-12-29T00:39:36.000Z","dependencies_parsed_at":"2024-02-21T20:29:30.619Z","dependency_job_id":"2a24b53b-c2af-487c-b6f6-0c323ebc8b50","html_url":"https://github.com/gapmiss/livecodes-playground","commit_stats":null,"previous_names":["gapmiss/livecodes-playground"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gapmiss%2Flivecodes-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gapmiss%2Flivecodes-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gapmiss%2Flivecodes-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gapmiss%2Flivecodes-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gapmiss","download_url":"https://codeload.github.com/gapmiss/livecodes-playground/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248721268,"owners_count":21151074,"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":["code-editor","learn-to-code","livecodes","obisidian-plugin","obsidian-md","playground"],"created_at":"2024-11-07T21:06:28.760Z","updated_at":"2025-04-13T13:32:20.310Z","avatar_url":"https://github.com/gapmiss.png","language":"TypeScript","readme":"# Livecodes playground\n\n![screenshot of Livecode Playground editor](./resources/LIVECODES-Obsidian-v1.5.8-2024-03-05-17.20.49.png)\n\n\u003c!-- \u003cdiv\u003e\n\t\u003cimg src=\"https://livecodes.io/docs/img/livecodes-logo.svg\" style=\"width:200px; margin: 0 auto;\"\u003e\n\u003c/div\u003e --\u003e\n\nLivecodes playground, an open-source client-side code editor plugin for [Obsidian.md](https://obsidian.md) - powered by [Livecodes.io](https://livecodes.io/docs/overview).\n\nRead about [why Livecodes](https://livecodes.io/docs/why), it's [features](https://livecodes.io/docs/features/) and [how to self-host](https://livecodes.io/docs/features/self-hosting)\n\n\u003e [!IMPORTANT]\n\u003e The Livecodes codebase can be self-hosted but is not 100% off-line. Internet connection is required.\n\n## Installation\n\n### Community plugins\n\n1. [Obsidian.md/plugins](https://obsidian.md/plugins?id=livecodes-playground) or\n2. Open *Settings* \u003e *Community Plugins* \u003e *Browse*\n3. Search for \"livecodes\"\n\n### via BRAT (Beta Reviewer's Auto-update Tool)\n\n1. Ensure [BRAT](https://github.com/TfTHacker/obsidian42-brat) is installed\n2. Trigger the command `Obsidian42 - BRAT: Add a beta plugin for testing`\n3. Enter this repository, `gapmiss/livecodes-playground`\n4. Enable _Livecodes_ plugin in community plugin list\n\n### Manually\n\n1. download the latest [release archive](https://github.com/gapmiss/livecodes-playground/releases/)\n2. uncompress the downloaded archive\n3. move the `livecodes-playground` folder to `/path/to/vault/.obsidian/plugins/`\n4. Settings \u003e Community plugins \u003e reload **Installed plugins**\n5. enable plugin\n\nor:\n\n1. download `main.js`, `manifest.json` \u0026 `styles.css`\n2. create a new folder `/path/to/vault/.obsidian/plugins/livecodes-playground`\n3. move all 3 files to `/path/to/vault/.obsidian/plugins/livecodes-playground`\n4. Settings \u003e Community plugins \u003e reload **Installed plugins**\n5. enable plugin\n\n## Usage\n\n### Initial setup\n\n1. create a folder inside your vault for storing playground configuration files (`*.JSON`)\n\t- default: `playgrounds`\n2. create a folder inside your vault for storing playground markdown notes (`*.MD`)\n\t- default: `playgrounds/notes`\n\n### New playground\n\nNew playgrounds can be created via:\n\n- `New playground` - (*command*) opens a prompt for the playground name, markup language, style language, CSS processors, and script language.\n\t\u003cdetails style=\"margin-block: 1em;\"\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\u003cp\u003e\u003cimg src=\"./resources/LIVECODES-Obsidian-v1.5.8-2024-03-05-12.41.54.png\" alt=\"screenshot of new playground modal\" /\u003e\u003c/p\u003e\u003c/details\u003e\n\n- `Quick playground` - (*command*) and (*ribbon menu*) open a prompt for the playground name. The default markup, style, \u0026 script languages can be configured in the settings.\n\t\u003cdetails style=\"margin-block: 1em;\"\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\u003cp\u003e\u003cimg src=\"./resources/LIVECODES-Obsidian-v1.5.8-2024-03-05-12.43.59.png\" alt=\"screenshot of quick playground modal\" /\u003e\u003c/p\u003e\u003c/details\u003e\n\n- `Open starter playground` (*command*) opens a suggestion prompt with a list of simple starter playgrounds. These starter include `_hyperscript`, `Alpine.js`, `Angular`, `Arrow.JS`, `Astro`, `Bootstrap 5`, `Bulma (CSS)`, `C++`, `HTMX`, `Javascript`, `jQuery`, `Lemonade.JS`, `Lit`, `Lua`, `Lua (wasm)`, `Markdown`, `MDX`, `modulo.js`, `Open-props (CSS)`, `Perl`, `PHP`, `PHP (wasm)`, `Preact`, `Python`, `Python (wasm)`, `React`, `React Native`, `Reef.js`, `Riot.js`, `Ruby`, `SCSS`, `Solid.js`, `Stellar`, `Stencil.js`, `Svelte`, `Tailwind CSS`, `Typescript`, `VanJS`, `Vue 2`, `Vue 3 SFC`\n\n- `New playground from CodePen` (*command*) opens a prompt for a CodePen URL and attempts to import the pen and create a new playground. Please note: this command is experimental and is dependent on CodePen's source code for presenting pens. If CodePen's changes their HTML code, the command could stop working\n\t\u003cdetails style=\"margin-block: 1em;\"\u003e\u003csummary\u003eScreenshots\u003c/summary\u003e\u003cp\u003e\u003cimg src=\"./resources/LIVECODES-Obsidian-v1.5.8-2024-03-12-08.19.31.png\" alt=\"screenshot of new playground from CodePen command\" /\u003e\u003c/p\u003e\u003cp\u003e\u003cimg src=\"./resources/LIVECODES-Obsidian-v1.5.8-2024-03-12-08.19.46.png\" alt=\"screenshot of prompt for CodePen URL\" /\u003e\u003c/p\u003e\u003c/details\u003e\n\n- `Open codeblocks in Livecodes` (*command*) Live-preview and Source mode. The command parses the markdown note for codeblocks and will attempt to create a new playground with 1-3 codeblocks (markup, style, script) based on the codeblock's language. Supported languages include `html`, `mdx`, `css`, `scss`, `javascript`, `js`, `jsx`, `typescript`, `ts`, `tsx`, `astro`, `svelte`.\n\t\u003cdetails style=\"margin-block: 1em;\"\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\u003cp\u003e\u003cimg src=\"./resources/LIVECODES-Obsidian-v1.5.8-2024-03-12-08.54.16.png\" alt=\"screenshot of open codeblocks in livecodes command\" /\u003e\u003c/p\u003e\u003c/details\u003e\n\n- `Open in Livecodes` - (*codeblock context menu*) via right-click (`ctrl`+`click`) in supported fenced code blocks. Reading mode ONLY. Supported languages include `html`, `mdx`, `css`, `scss`, `javascript`, `js`, `jsx`, `typescript`, `ts`, `tsx`, `astro`, `svelte`.\n\t\u003cdetails style=\"margin-block: 1em;\"\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\u003cp\u003e\u003cimg src=\"./resources/LIVECODES-Obsidian-v1.5.8-2024-03-05-12.01.55.png\" alt=\"screenshot of open codeblocks in livecodes context menu\" /\u003e\u003c/p\u003e\u003c/details\u003e\n\n- `Open in Livecodes` - (*file context menu*) via right-click (`ctrl`+`click`) for supported file extensions. Supported extensions include `html`, `mdx`, `css`, `scss`, `js`, `jsx`, `ts`, `tsx`, `astro`, `svelte`.\n\t\u003cdetails style=\"margin-block: 1em;\"\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\u003cp\u003e\u003cimg src=\"./resources/LIVECODES-Obsidian-v1.5.8-2024-03-05-12.35.49.png\" alt=\"screenshot of file context menu\" /\u003e\u003c/p\u003e\u003c/details\u003e\n\n- `Open in Livecodes` - (*folder context menu*) via right-click (`ctrl`+`click`) for supported file extensions. Supported extensions include `html`, `mdx`, `css`, `scss`, `js`, `jsx`, `ts`, `tsx`, `astro`, `svelte`. To activate the menu, the folder must have 1-3 files with the supported extensions. e.g. (`index.html`, `style.css`, `main.js`)\n\t\u003cdetails style=\"margin-block: 1em;\"\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\u003cp\u003e\u003cimg src=\"./resources/LIVECODES-Obsidian-v1.5.8-2024-03-05-12.33.31.png\" alt=\"screenshot of file context menu\" /\u003e\u003c/p\u003e\u003c/details\u003e\n\n- Obsidian `URI` - Create a new playground via importing of a raw JSON configuration file, easily hosted as a Github gist. The Obsidian URI expects 2 parameters, `vault` and `gistUrl` formatted as `obsidian://playground?vault=VAULTNAME\u0026gistUrl=RAW_JSON_URL` The `gistUrl` needs to be URI encoded (see: [Obsidian Help](https://help.obsidian.md/Extending+Obsidian/Obsidian+URI))\n\n\te.g. `obsidian://playground?vault=Playground\u0026gistUrl=https%3A%2F%2Fgist.githubusercontent.com%2Fgapmiss%2Ff558657bcde37c677724004c36ed8dcd%2Fraw%2Ff8a7173bbd17d0886534c2f2017385a5fb3cff48%2FJavascript_starter.json`\n\n### Open playground\n\nPlaygrounds can be opened via:\n\n- `Open playground` - (*command*) and (*ribbon menu*) opens a playground fuzzy search prompt.\n\t\u003cdetails style=\"margin-block: 1em;\"\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\u003cp\u003e\u003cimg src=\"./resources/LIVECODES-Obsidian-v1.5.8-2024-03-05-17.02.09.png\" alt=\"screenshot of livecodes playground fuzzy search prompt\" /\u003e\u003c/p\u003e\u003c/details\u003e\n\n- `Open playground` - (*context menu*) via right-click (`ctrl`+`click`) for playground config files (`*.JSON`).\n\t\u003cdetails style=\"margin-block: 1em;\"\u003e\u003csummary\u003eScreenshot\u003c/summary\u003e\u003cp\u003e\u003cimg src=\"./resources/LIVECODES-Obsidian-v1.5.8-2024-03-05-17.10.19.png\" alt=\"screenshot of file context menu\" /\u003e\u003c/p\u003e\u003c/details\u003e\n\n- Obsidian `URI` - Create a new playground via importing of a raw JSON configuration file, easily hosted as a Github gist. The Obsidian URI expects 2 parameters, `vault` and `playgroundPath` formatted as `obsidian://playground?vault=VAULTNAME\u0026playgroundPath=VAULT_PATH_TO_JSON` The `playgroundPath` needs to be URI encoded (see: [Obsidian Help](https://help.obsidian.md/Extending+Obsidian/Obsidian+URI))\n\n\te.g. `obsidian://playground?vault=VAULTNAME\u0026playgroundPath=path/to/playground.json`\n\n\u003e [!IMPORTANT]\n\u003e The above context menu options are only available when all file extensions are detected by Obsidian. Open `Settings` \u0026gt; `File and links` and enable `Detect all file extensions` ![screenshot of settings](./resources/LIVECODES-Obsidian-v1.5.8-2024-03-05-14.34.51.png)\n\n\n\u003c!-- \n\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#7852ee\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-code\"\u003e\u003cpolyline points=\"16 18 22 12 16 6\"/\u003e\u003cpolyline points=\"8 6 2 12 8 18\"/\u003e\u003c/svg\u003e\n\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#7852ee\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-file-code-2\"\u003e\u003cpath d=\"M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4\"/\u003e\u003cpath d=\"M14 2v4a2 2 0 0 0 2 2h4\"/\u003e\u003cpath d=\"m5 12-3 3 3 3\"/\u003e\u003cpath d=\"m9 18 3-3-3-3\"/\u003e\u003c/svg\u003e\n\n --\u003e\n\n## Issues and bug reports\n\nPlease submit issues, bug reports, feature requests, etc. to [gapmiss/livecodes-playground/issues](https://github.com/gapmiss/livecodes-playground/issues)\n\n## Development\n\n1. `cd /path/to/vault/.obsidian/plugins`\n2. `git clone https://github.com/gapmiss/livecodes-playground.git`\n3. `cd livecodes-playground`\n4. `npm install`\n5. `npm run dev`\n\n## Contributing\n\nContributions are welcome! Please open an issue for discussion before submitting a pull request with your changes.\n\n## Livecodes\n\nThis plugin is powered by the [Livecodes SDK](https://livecodes.io/docs/sdk). The Livecodes SDK is licensed under the [MIT License](https://github.com/live-codes/livecodes/blob/develop/LICENSE).\n\n\u003e MIT License\n\u003e \n\u003e Copyright (c) 2021-PRESENT Hatem Hosny\n\u003e \n\u003e Permission is hereby granted, free of charge, to any person obtaining a copy\n\u003e of this software and associated documentation files (the \"Software\"), to deal\n\u003e in the Software without restriction, including without limitation the rights\n\u003e to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n\u003e copies of the Software, and to permit persons to whom the Software is\n\u003e furnished to do so, subject to the following conditions:\n\u003e \n\u003e The above copyright notice and this permission notice shall be included in all\n\u003e copies or substantial portions of the Software.\n\u003e \n\u003e THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n\u003e IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n\u003e FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n\u003e AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n\u003e LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n\u003e OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n\u003e SOFTWARE.\n","funding_links":["https://github.com/sponsors/gapmiss","https://ko-fi.com/gapmiss","https://buymeacoffee.com/gapmiss"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgapmiss%2Flivecodes-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgapmiss%2Flivecodes-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgapmiss%2Flivecodes-playground/lists"}