LiveCodes Ecosystem #841
Description
LiveCodes allows integration with other apps, making it easy to use its many features in other app/websites, by embedding playgrounds and opening code in new playgrounds.
This is achieved by the SDK and the ability to set configurations using query params. In addition, LiveCodes can import code 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: Opens LiveCodes in a new window and imports the current webpage URL.
- Markdown-to-LiveCodes: Converts Markdown and MDX code blocks to interactive LiveCodes playgrounds. (GitHub repo)
- "Preview in LiveCodes" GitHub action: generates preview links to playgrounds for code changes in pull requests and posts them as pull request comments. (GitHub repo)
- Obsidian plugin: Integrates LiveCodes within Obsidian GitHub repo (by @gapmiss)
The following are ideas/suggestions for more integrations:
- browser extension: 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 plugin
- ClassroomIO
- WordPress plugins:
- oEmbed (e.g. codepen-oembed)
- Shortcode (e.g. codepen-embedded-pen-shortcode)
- Blocks (e.g. codepen-embed-block)
- Embed in blogs
- Tutorials starter (e.g. TutorialKit)
- Presentations:
- markdown to LiveCodes
- remark
- markdown-it
- marked
- mdx-embed
- react-markdown
- SSG plugins (markdown to LiveCodes)
Note that LiveCodes docs are available as (llms.txt and 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.