Settings
App URL
Load the playground from a custom URL (e.g. self-hosted app, permanent URL). Trailing slash / is required.
Default: https://v26.livecodes.io/
Playground folder
Select a vault folder to save & persist playground configuration files (JSON).
Default: playgrounds
Auto watch
Automatically watch for playground changes, then update the corresponding configuration file (JSON).
Default: enabled
Notes folder
Select a vault folder to save playground notes (Markdown).
Default: playgrounds/notes
Sharing
Short share URL
Notice
This requires sending the playground configuration (including source code) to a server that saves the code and provides a short Id which can be used to retrieve the playground. It cannot then be deleted.
The app hosted on https://livecodes.io uses an API endpoint specifically provided to generate short URLs for LiveCodes share service. We will make every effort to keep that online and available for free use, so long as it is not abused.
Short URLs generated by LiveCodes share service are private by default and are not listed or indexed.
See Livecodes documentation page on sharing for further up-to-date details.
Default: disabled
Github API token
Add a Github API token to enable creating gists from a playground. Create a token at Github settings (only gist permission required)
Github gist privacy
Gists can be public or secret. public gists show up in Github Discover, where people can browse new gists as they’re created. They’re also searchable, so you can use them if you’d like other people to find and see your work.
Secret gists don’t show up in Github Discover and are not searchable unless you are logged in and are the author of the secret gist. Secret gists aren’t private. If you send the URL of a secret gist to a friend, they’ll be able to see it. However, if someone you don’t know discovers the URL, they’ll also be able to see your gist.
After creating a gist, you cannot convert it from public to secret. However, a secret gist can be made public by editing the gist and updating the visibility to public.
See Github gist documentation page on creating gists for further up-to-date details.
Default: disabled
Enable AI
LiveCodes supports AI-powered code completion, completely for free with no account or API token required, powered by Codeium, the ultrafast Copilot alternative.
The large generative machine learning model is capable of understanding the context of your code and comments in order to generate suggestions on what you might want to type next.
It has a wide range of language support.
Currently, only Monaco editor is supported. Wider editor support is planned.
Notice
Please note that when using Codeium AI assistant, your code is sent to their servers for code completion. However, your code is not used for training their model. Check Codeium FAQ and privacy policy for more details.
Default: disabled
Editor
Code editor
The following code editors are supported:
monaco: This is the code editor that powers VS Code. It is feature-rich and supports autocomplete with IntelliSense (including types for custom libraries).
codemirror: Has many editing features, including autocomplete, with good mobile support.
codejar: A lightweight code editor with very basic editing features. PrismJs is used for syntax highlighting. Please note that some editor settings are not supported in CodeJar.
Default: monaco
See Livecodes docs for further details.
Editor theme
Set the editor theme for each editor and on light/dark modes. Default: enabled
Playground height
By default, the playground container height is set to 600 px.
Dark theme
Sets the code editor to light/dark mode. Default: dark
Editor font
Sets the code editor font family.
Editor font-size
By default, the font-size is 12.
Word wrap
Enables word-wrap for long lines. Default: disabled
Line numbers
Show line numbers in the code editor. Default: enabled
Use tabs
If enabled, lines are indented with tabs instead of spaces. Also used in code formatting. Default: disabled
Tab size
The number of spaces per indentation-level. Also used in code formatting. Default: 2
Auto close brackets
Use auto-complete to close brackets and quotes.
Auto update
If enabled, the result page is automatically updated on code change, after time delay.
Delay
Time delay (in milliseconds) following code change, after which the result page is updated (if Autoupdate is enabled).
Semi-colons
Enables code formatter to use semi-colons.
Single quotes
Enables code formatter to use single quotes instead of double quotes.
Trailing commas
Enables code formatter to use trailing commas.
Quick playground
Set the default language preferences for the Quick playground command.
Markdown templates
Templates for creating notes in your vault and saving Github gists.
Available (Nunjucks) variables:
| variable | replaced w/ |
|---|---|
{{appUrl}} | https://v26.livecodes.io/ |
{{date}} | YYYY-MM-DD |
{{time}} | HH:mm |
{{timeFull}} | HH:mm:ss |
{{title}} | title from playground settings |
{{descProperty}} | description from playground settings (formatted as a YAML multi-line string property) |
{{descString}} | description from playground settings (formatted as a markdown string) |
{{tagsList}} | tags from playground settings (formatted as a YAML list property) |
{{tagsString}} | tags from playground settings (formatted as a markdown string) |
{{obsidianUrl}} | An Obsidian URI to directly open the playground in Livecodes |
{{head}} | head from playground settings |
{{htmlAttrs}} | html Attributes from playground settings |
{{stylesheetsList}} | markdown list of stylesheet(s) from external resources settings |
{{scriptsList}} | markdown list of script(s) from external resources settings |
{{cssPreset}} | CSS Preset from external resources settings |
{{markupLanguage}} | markup language from playground editor |
{{markupCode}} | markup code from playground editor |
{{styleLanguage}} | style language from playground editor |
{{styleCode}} | style code from playground editor |
{{scriptLanguage}} | script language from playground editor |
{{scriptCode}} | script code from playground editor |
{{htmlResults}} | HTML results from playground editor |