LiveCodes Ecosystem

[hatemhosny]

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
  • Medium.com
  • Dev.to
• Tutorials starter (e.g. TutorialKit)
• Presentations:
  • Slidev addon
  • reveal.js plugin
• markdown to LiveCodes
  • remark
  • markdown-it
  • marked
  • mdx-embed
  • react-markdown
  • SSG plugins (markdown to LiveCodes)
    • jekyll
    • hugo
    • mkdocs
    • 11ty
    • astro
    • docusaurus
    • gatsby
    • nextjs
    • storybook
    • vitepress

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.

[ahmdWard]

I’d like to work on the browser extension (Chrome) integration.

[hatemhosny]

I’d like to work on the browser extension (Chrome) integration.

@ahmdWard
Great! Please do.
Please let me know if you have any questions or need any guidance for LiveCodes integration.

[ahmdWard]

@hatemhosny
Thanks for letting me take this on.
It’s my first time building a browser extension, so I started with the Chrome docs and a few small practice projects to get the hang of the basics , After that I’ve started working on the Chrome extension integration and pushed my initial progress here:
repo

So far, the extension can:
Add a context menu entry (“Open in LiveCodes”).
Grab the selected text from any page.
Open a new LiveCodes playground in a new tab.
Do basic (naive) HTML / CSS / JS detection to pick the right panel.

Next, I plan to:
Add a content-script button above blocks for quicker access.
Explore an inline “embed in page” option for instant preview.

I'd like to hear some suggestion or insights to what features would be most useful to add.

This one i want to consider it to the future:
Sometimes when I’m solving problems on LeetCode and get stuck, I want to quickly debug the code without opening an IDE. I usually keep a LiveCodes tab next to my LeetCode tab for this, but there’s a catch LeetCode uses a class based structure for its solutions. To run it in LiveCodes, I first need to convert that class/method into a standalone program with some dummy variables that act as the method’s parameters.

Right now, I use an LLM to do that conversion quickly. But in the future it could be interesting to have a built-in option that automatically converts a LeetCode snippet into a runnable program in LiveCodes, so you can debug interactively right away.

[hatemhosny]

Thank you @ahmdWard
I have started a new issue for the browser extension here: #860
Let's continue the discussion there.

[m2y11138]

Let me try to integrate LiveCodes with a Reveal.js plugin.