LiveCodes

A Code Playground That Just Works!
An open-source client-side playground for React, Vue, Svelte, TypeScript, Python, Go, Ruby, PHP, Java, C# & 90+ languages 🚀

[LiveCodes @livecodes_io]

LiveCodes is here! 🎊

LiveCodes, a feature-rich, open-source, client-side, code playground that supports 80+ languages and frameworks. With LiveCodes, learning, experimenting, documenting, teaching, and sharing code is easier and more enjoyable than ever.
https://t.co/xmw1cro4R2

[Hatem Hosny @hatem_hosny_]

دي الحلقة على قناته
https://t.co/OQgayskD0d

[Hatem Hosny @hatem_hosny_]

أحمد الإمام عامل تأثير كبير في المجتمع العربي، ما شاء الله، و هو فعلا بيساعد الناس و يشجعهم
الحلقة اللي طلعت فيها معاه كانت من أهم أسباب انتشار @livecodes_io
لو عامل حاجة كويسة، تواصل معاه و هو ما بيتأخرش

[Hatem Hosny @hatem_hosny_]

diagrams-js
Cloud system architecture diagrams as code in TypeScript
- Runs in browsers, node, deno & bun
- 17 Cloud Providers, 2k+ node types
- Custom nodes from URL or 200k+ iconify icons
- import/export to json
- Plugins (e.g. docker compose & kubernetes yaml)
- diagrams can be version-controlled
- Visual diffs
- CLI
- Code playground with examples
- Visual editor
- Tree-shakeable
- Types with autocomplete
- Skills for AI agents

https://t.co/jOwwvFpghY

[Hatem Hosny @hatem_hosny_]

@ibuildthecloud Yes, you can. But to avoid characters that are not URL-safe, base64 encoding is usually used.
@livecodes_io makes that easy. The toolbar below the code editor has a button for "Copy as URL".

data:text/html;charset=UTF-8;base64,PGh0bWw+PGJvZHk+V293PC9ib2R5PjwvaHRtbD4=

[Hatem Hosny @hatem_hosny_]

@joyofcodedev You may want to check @livecodes_io

[Hatem Hosny @hatem_hosny_]

Trinket is shutting down.
Move to @livecodes_io now
✅ Supports 90+ languages/frameworks
✅ Free with unlimited usage
✅ No account required
✅ Runs in the browser
✅ You own your data
✅ Can be easily self-hosted on any static file server
✅ Open-source (MIT license)

[Hatem Hosny @hatem_hosny_]

@eitmg ... and of course a @livecodes_io -powered playground 😉
https://t.co/94tv58bNRZ

[Hatem Hosny @hatem_hosny_]

Try the @livecodes_io Markdown starter template
https://t.co/CdfNgdYUsP

[Hatem Hosny @hatem_hosny_]

Markdown support in @livecodes_io now added syntax highlighting for code blocks and Mermaid diagrams.

[Hatem Hosny @hatem_hosny_]

@livecodes_io SDK storybook
https://t.co/GhoEQnKQbW

[Hatem Hosny @hatem_hosny_]

@livecodes_io now has a Storybook instance for each framework SDK, with demos, example usage and detailed docs for embed options and configuration object.

[Hatem Hosny @hatem_hosny_]

Creating Shareable URLs for @livecodes_io embedded playgrounds
https://t.co/5kTd0qMpqW

[Hatem Hosny @hatem_hosny_]

It is a common need to provide a "Share" functionality for playgrounds.
@livecodes_io SDK now provides `compress` and `decompress` utility functions for URL-friendly base64-encoded playground config objects.
See guide for "Creating Shareable URLs" below.

[Hatem Hosny @hatem_hosny_]

It is now easier than ever (for you and your agent) to contribute to @livecodes_io
Detailed contribution guides have been added with comprehensive descriptions and diagrams for overall architecture and the design of each system
https://t.co/Ge0RzuV1Tq
Contribution is welcome 💚

[Hatem Hosny @hatem_hosny_]

Among its many features, Xlog by @emad__elsaid , can turn any markdown code block to an interactive code playground using @livecodes_io 🤩

[Hatem Hosny @hatem_hosny_]

npx skills add live-codes/livecodes

"Create a page with a code playground that can run python and shows the console output. Use React and TypeScript."

[LiveCodes @livecodes_io]

😍

[Hatem Hosny @hatem_hosny_]

Among its many features, Xlog by @emad__elsaid , can turn any markdown code block to an interactive code playground using @livecodes_io 🤩

[Hatem Hosny @hatem_hosny_]

Web components support in @livecodes_io SDK is a big deal 🤩
It works with/without frameworks and with/without build steps.
Code can be added in `<template>`, `<style>` and `<script>` blocks.
Best DX with syntax highlighting and autocomplete. No need for escaping in strings.

[Hatem Hosny @hatem_hosny_]

Whatever your tech stack is, you can use @livecodes_io SDK to create code playgrounds for 90+ languages/frameworks.
Code samples in docs now are available for React, Vue, Sevlte, Solid, Preact and web components.

[Hatem Hosny @hatem_hosny_]

This is big 🔥