LiveCodes Ecosystem

LiveCodes allows integration with other apps, making it easy to use its many [features](https://livecodes.io/docs/features/) in other app/websites, by [embedding playgrounds](https://livecodes.io/docs/features/embeds) and opening code in new playgrounds.

This is achieved by the [SDK](https://livecodes.io/docs/sdk/) and the ability to set [configurations](https://livecodes.io/docs/configuration/configuration-object/) using [query params](https://livecodes.io/docs/configuration/query-params/). In addition, LiveCodes can [import code](https://livecodes.io/docs/features/import/) from many sources.

These features allow doing things like this:
e.g. https://livecodes.io/?screen=code-to-image&html=%3Ch1%3EHello,%20World!%3C%2Fh1%3E

Examples for integrations include:
- [Bookmarklet](https://livecodes.io/docs/bookmarklet/): Opens LiveCodes in a new window and [imports](https://livecodes.io/docs/features/import/) the current webpage URL.
- [Markdown-to-LiveCodes](https://livecodes.io/docs/markdown-to-livecodes/): Converts Markdown and MDX code blocks to interactive LiveCodes playgrounds. ([GitHub repo](https://github.com/live-codes/markdown-to-livecodes))
- ["Preview in LiveCodes"](https://livecodes.io/docs/gh-action/) GitHub action: generates preview links to playgrounds for code changes in pull requests and posts them as pull request comments. ([GitHub repo](https://github.com/live-codes/preview-in-livecodes))
- [Obsidian plugin](https://www.obsidianstats.com/plugins/livecodes-playground): Integrates LiveCodes within Obsidian [GitHub repo](https://github.com/gapmiss/livecodes-playground) (by @gapmiss)

## The following are ideas/suggestions for more integrations:

- [ ] browser extension: #860
- [ ] open code blocks in LiveCodes
- [ ] convert code blocks to embedded playgrounds
- [ ] context menu: edit in LiveCodes
- [ ] mobile app:
- [ ] wrapper for LiveCodes web app
- [ ] share to LiveCodes
- [ ] courseware/LMS:
- [ ] [Moodle](https://moodle.org/) plugin
- [ ] [ClassroomIO](https://www.classroomio.com/)
- [ ] WordPress plugins:
- [ ] oEmbed (e.g. [codepen-oembed](https://wordpress.org/plugins/codepen-oembed/))
- [ ] Shortcode (e.g. [codepen-embedded-pen-shortcode](https://wordpress.org/plugins/codepen-embedded-pen-shortcode/))
- [ ] Blocks (e.g. [codepen-embed-block](https://wordpress.org/plugins/codepen-embed-block/))
- [ ] Embed in blogs
- [ ] [Medium.com](http://medium.com/)
- [ ] [Dev.to](http://dev.to/)
- [ ] Tutorials starter (e.g. [TutorialKit](https://tutorialkit.dev/))
- [ ] Presentations:
- [ ] Slidev [addon](https://sli.dev/guide/write-addon)
- [ ] [reveal.js](https://revealjs.com/) [plugin](https://revealjs.com/plugins/)
- [ ] markdown to LiveCodes
- [x] [remark](https://livecodes.io/docs/markdown-to-livecodes/#remark-livecodes)
- [x] [markdown-it](https://livecodes.io/docs/markdown-to-livecodes/#markdown-it-livecodes)
- [x] [marked](https://livecodes.io/docs/markdown-to-livecodes/#marked-livecodes)
- [ ] mdx-embed
- [x] [react-markdown](https://livecodes.io/docs/markdown-to-livecodes/#react-markdown)
- [ ] SSG plugins (markdown to LiveCodes)
- [ ] jekyll
- [ ] hugo
- [ ] mkdocs
- [x] [11ty](https://livecodes.io/docs/markdown-to-livecodes/#eleventy)
- [x] [astro](https://livecodes.io/docs/markdown-to-livecodes/#astro)
- [x] [docusaurus](https://livecodes.io/docs/markdown-to-livecodes/#docusaurus)
- [x] [gatsby](https://livecodes.io/docs/markdown-to-livecodes/#gatsby)
- [x] [nextjs](https://livecodes.io/docs/markdown-to-livecodes/#nextjs)
- [x] [storybook](https://livecodes.io/docs/markdown-to-livecodes/#storybook)
- [x] [vitepress](https://livecodes.io/docs/markdown-to-livecodes/#vitepress)

Note that LiveCodes docs are available as ([llms.txt](https://livecodes.io/docs/llms.txt) and [llms-full.txt](https://livecodes.io/docs/llms-full.txt)) files for usage with LLMs.

Please feel free to suggest new ideas.
If you start a project related to LiveCodes please comment below so that it can be added to the list.
And obviously, if you need any help or guidance, please don't hesitate to ask.