livecodes-playground

KO | EN

gitlite — search

#javascript #react #ai #llm #go #rust #macos #java #awesome #cli #awesome-list #vue #pytorch #open-source

livecodes-playground

(★ 27)

Open-source client-side code editor plugin for Obsidian.md - powered by LiveCodes.io

livecodes-playground Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Livecodes playground

![screenshot of Livecode Playground editor](https://raw.githubusercontent.com/gapmiss/livecodes-playground/master/resources/LIVECODES-Obsidian-v1.5.8-2024-03-05-17.20.49.png)

Livecodes playground, an open-source client-side code editor plugin for [Obsidian.md](https://obsidian.md) - powered by [Livecodes.io](https://livecodes.io/docs/overview).

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

> [!IMPORTANT]
> The Livecodes codebase can be self-hosted but is not 100% off-line. Internet connection is required.

## Installation

[Install from community.obsidian.md](https://community.obsidian.md/plugins/livecodes-playground)

From Obsidian's settings or preferences:

1. Community Plugins > Browse
2. Search for "Livecodes PLayground"

Manually:

1. download the latest [release](https://github.com/gapmiss/livecodes-playground/releases/latest) archive
2. uncompress the downloaded archive
3. move the `livecodes-playground` folder to `/path/to/vault/.obsidian/plugins/` 
4.  Settings > Community plugins > reload **Installed plugins**
5.  enable plugin

or:

1.  download `main.js`, `manifest.json` & `styles.css` from the latest [release](https://github.com/gapmiss/livecodes-playground/releases/latest)
2.  create a new folder `/path/to/vault/.obsidian/plugins/livecodes-playground`
3.  move all 3 files to `/path/to/vault/.obsidian/plugins/livecodes-playground`
4.  Settings > Community plugins > reload **Installed plugins**
5.  enable plugin

## Usage

### Initial setup

1. create a folder inside your vault for storing playground configuration files (`*.JSON`)
	- default: `playgrounds`
2. create a folder inside your vault for storing playground markdown notes (`*.MD`)
	- default: `playgrounds/notes`

### New playground

New playgrounds can be created via:

- `New playground` - (*command*) opens a prompt for the playground name, markup language, style language, CSS processors, and script language.
	<details style="margin-block: 1em;"><summary>Screenshot</summary><p><img src="./resources/LIVECODES-Obsidian-v1.5.8-2024-03-05-12.41.54.png" alt="screenshot of new playground modal" /></p></details>

- `Quick playground` - (*command*) and (*ribbon menu*) open a prompt for the playground name. The default markup, style, & script languages can be configured in the settings.
	<details style="margin-block: 1em;"><summary>Screenshot</summary><p><img src="./resources/LIVECODES-Obsidian-v1.5.8-2024-03-05-12.43.59.png" alt="screenshot of quick playground modal" /></p></details>

- `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`

- `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
	<details style="margin-block: 1em;"><summary>Screenshots</summary><p><img src="./resources/LIVECODES-Obsidian-v1.5.8-2024-03-12-08.19.31.png" alt="screenshot of new playground from CodePen command" /></p><p><img src="./resources/LIVECODES-Obsidian-v1.5.8-2024-03-12-08.19.46.png" alt="screenshot of prompt for CodePen URL" /></p></details>

- `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`.
	<details style="margin-block: 1em;"><summary>Screenshot</summary><p><img src="./resources/LIVECODES-Obsidian-v1.5.8-2024-03-12-08.54.16.png" alt="screenshot of open codeblocks in livecodes command" /></p></details>

- `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`.
	<details style="margin-block: 1em;"><summary>Screenshot</summary><p><img src="./resources/LIVECODES-Obsidian-v1.5.8-2024-03-05-12.01.55.png" alt="screenshot of open codeblocks in livecodes context menu" /></p></details>

- `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`.
	<details style="margin-block: 1em;"><summary>Screenshot</summary><p><img src="./resources/LIVECODES-Obsidian-v1.5.8-2024-03-05-12.35.49.png" alt="screenshot of file context menu" /></p></details>

- `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`)
	<details style="margin-block: 1em;"><summary>Screenshot</summary><p><img src="./resources/LIVECODES-Obsidian-v1.5.8-2024-03-05-12.33.31.png" alt="screenshot of file context menu" /></p></details>

- 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&gistUrl=RAW_JSON_URL` The `gistUrl` needs to be URI encoded (see: [Obsidian Help](https://help.obsidian.md/Extending+Obsidian/Obsidian+URI))

e.g. `obsidian://playground?vault=Playground&gistUrl=https%3A%2F%2Fgist.githubusercontent.com%2Fgapmiss%2Ff558657bcde37c677724004c36ed8dcd%2Fraw%2Ff8a7173bbd17d0886534c2f2017385a5fb3cff48%2FJavascript_starter.json`

### Open playground

Playgrounds can be opened via:

- `Open playground` - (*command*) and (*ribbon menu*) opens a playground fuzzy search prompt.
	<details style="margin-block: 1em;"><summary>Screenshot</summary><p><img src="./resources/LIVECODES-Obsidian-v1.5.8-2024-03-05-17.02.09.png" alt="screenshot of livecodes playground fuzzy search prompt" /></p></details>

- `Open playground` - (*context menu*) via right-click (`ctrl`+`click`) for playground config files (`*.JSON`).
	<details style="margin-block: 1em;"><summary>Screenshot</summary><p><img src="./resources/LIVECODES-Obsidian-v1.5.8-2024-03-05-17.10.19.png" alt="screenshot of file context menu" /></p></details>

- 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&playgroundPath=VAULT_PATH_TO_JSON` The `playgroundPath` needs to be URI encoded (see: [Obsidian Help](https://help.obsidian.md/Extending+Obsidian/Obsidian+URI))

e.g. `obsidian://playground?vault=VAULTNAME&playgroundPath=path/to/playground.json`

> [!IMPORTANT]
> The above context menu options are only available when all file extensions are detected by Obsidian. Open `Settings` &gt; `File and links` and enable `Detect all file extensions` ![screenshot of settings](https://raw.githubusercontent.com/gapmiss/livecodes-playground/master/resources/LIVECODES-Obsidian-v1.5.8-2024-03-05-14.34.51.png)

<!--

-->

## Issues and bug reports

Please submit issues, bug reports, feature requests, etc. to [gapmiss/livecodes-playground/issues](https://github.com/gapmiss/livecodes-playground/issues)

## Development

1. `cd /path/to/vault/.obsidian/plugins`
2. `git clone https://github.com/gapmiss/livecodes-playground.git`
3. `cd livecodes-playground`
4. `npm install`
5. `npm run dev`

## Contributing

Contributions are welcome! Please open an issue for discussion before submitting a pull request with your changes.

## Livecodes

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

> MIT License
> 
> Copyright (c) 2021-PRESENT Hatem Hosny
> 
> Permission is hereby granted, free of charge, to any person obtaining a copy
> of this software and associated documentation files (the "Software"), to deal
> in the Software without restriction, including without limitation the rights
> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
> copies of the Software, and to permit persons to whom the Software is
> furnished to do so, subject to the following conditions:
> 
> The above copyright notice and this permission notice shall be included in all
> copies or substantial portions of the Software.
> 
> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
> SOFTWARE.

livecodes-playground

livecodes-playground Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

livecodes-playground

livecodes-playground Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README