DEV Community: Hatem Hosny

LiveCodes is featured with the big guys 🤩

Hatem Hosny — Mon, 07 Jul 2025 19:37:04 +0000

Madza

Jul 7 '25

9 Useful Coding Tools Every Developer Should Bookmark 📚🧑‍💻

#webdev #coding #api #productivity

184

Comments 43

5 min read

LiveCodes Gets a Fresh Look, and Goes Multilingual!

Hatem Hosny — Mon, 09 Dec 2024 23:14:34 +0000

LiveCodes recent release provides a major update to the UI. The new UI is more modern, cleaner, more accessible and allows customization with custom theme colors.

In addition, LiveCodes now supports multiple languages. It already supports 90+ programming languages. But we are adding spoken languages this time! With the new internationalization (i18n) support, the UI now can be displayed in 12 different languages.

The New UI

The UI is now cleaner, more consistent and more accessible.

In addition, the UI theme is now custommizable with custom colors. The theme color can be selected from the UI (Settings menu -> Color).

The color applies to dark and light themes.

The theme color can also be selected as the configuration option themeColor. This allows setting the color using the SDK (for embedded playgrounds) or query params.

Example: https://livecodes.io/?themeColor=lightblue

The UI is responsive and can be used in different screen sizes.

Multilingual Support (i18n)

The UI can now be displayed in 12 different languages: English (default), Arabic, Chinese, French, German, Hindi, Italian, Japanese, Portuguese, Russian, Spanish and Urdu.

The language is auto-detected based on the user's browser language. In addition, the language can be selected from the UI (i18n menu).

Moreover, the UI language can also be set using the configuration option appLanguage.

Example: https://livecodes.io/?appLanguage=fr

Credits

A huge shout-out to the wonderful contributors who helped make this release possible by working for months to provide high quality work. Very special thanks to:

Nuno Luciano (aka gigamaster) for the design and implementation of the new UI.
Max Alex (aka zyf722) for the i18n support.

Contributions are always welcome. Check out the contribution guide for more details.

What's next?

We have been busy the past few months working on the UI and setting up the infra-structure for more features to come. Now expect more features to be rolling out more frequently.

Stay tuned!

You can stay updated by following us on X/Twitter and GitHub.

Introducing RacingBars 📊

Hatem Hosny — Mon, 19 Aug 2024 14:02:01 +0000

Bar Chart Race Made Easy 🎉

RacingBars is an open-source, light-weight (~45kb gzipped), easy-to-use, and feature-rich javascript library for bar chart race, based on D3.js.

RacingBars is available for JavaScript, TypeScript, React, Vue and Svelte.

🎡 Try it now on the online playground.

📖 Documentations

Features

Easy to use.
Light-weight (~45kb gzipped).
Highly configurable, with sensible defaults.
Available for vanilla JavaScript,TypeScript, React, Vue and Svelte.
Responsive / configurable chart size.
Light and dark themes.
Good looking default colors, also configurable with color maps or palettes.
Customizable title, sub-title, caption and date counter. They all allow displaying calculated/dynamic values.
Flexible handling for various data shapes and formats.
Data manipulation for data transformation, cumulative sums and filling date gaps.
Icons.
Labels on the bars or outside.
Groups with filters.
Bar highlight and selection.
Autorun or start manually.
Allows looping.
Optional fixed scale.
Custom start/end dates.
Allows changing speed.
Controls for play/pause/skip-back/skip-forward (chart controls).
Overlays for play/repeat (chart controls).
Keyboard and mouse controls (chart controls).
Multiple charts can be inserted in the same page.
API to control the chart.
Emits custom DOM events.
Comprehensive documentation, with usage guides, examples gallery and an online playground.
Open-source (MIT License).

Getting Started

Usage options include:

Option 1: Using a bundler

Install from npm

npm install racing-bars

then you can import it:

import { race } from "racing-bars";

const options = {
  title: 'My Racing Bars',
  // ... other options
};

const data = 'https://racing-bars.hatemhosny.dev/data/population.json';

race(data, "#race", options);

Option 2: Load from CDN

ESM

<div id="race" style="height: 80vh"></div>
<script type="module">
  import { race } from "https://cdn.jsdelivr.net/npm/racing-bars";

  const options = {
    title: 'My Racing Bars',
    // ... other options
  };

  const data = 'https://racing-bars.hatemhosny.dev/data/population.json';

  race(data, "#race", options);
</script>

UMD

<div id="race" style="height: 80vh"></div>
<script src="https://https://cdn.jsdelivr.net/npm/racing-bars/racing-bars.umd.js"></script>
<script>
  const options = {
    title: 'My Racing Bars',
    // ... other options
  };


  const data = 'https://racing-bars.hatemhosny.dev/data/population.json';

  // the UMD version provides the global object `racingBars`
  racingBars.race(data, "#race", options);
</script>

Please refer to documentation website for usage, data preparation, chart options, API and more.

Examples Gallery

See gallery for usage examples.

Playground

Go to the online playground to try out the library.

License

MIT License © Hatem Hosny.

Let's Get Started 🚀

Get started now!

LiveCodes AI Code Assistant

Hatem Hosny — Fri, 16 Feb 2024 00:15:30 +0000

I'm excited to announce the general availability of LiveCodes AI Code Assistant. It is totally free, for unlimited usage, with no account or API token required and with no need to install any browser extensions. It can be easily enabled from the UI (as easy as flipping a switch!)

The AI code completion is powered by Codeium, the ultrafast Copilot alternative.

It has a wide range of language support, and it works everywhere (in the standalone app, embedded playgrounds and self-hosted apps).

Currently, only Monaco editor is supported. Wider editor support is planned.

Examples:

JavaScript:

Python:

How it works?

The large generative machine learning model is capable of understanding the context of your code and comments (across the 3 code editors) in order to generate suggestions on what you might want to type next.

How can I use it?

The AI code assistant can be enabled from:

UI

The editor settings screen (App menu → Editor Settings → Enable AI Code Assistant).

When set from the UI, this configuration is saved locally to user settings and is remembered across sessions.

Configuration

Alternatively, this can be enabled/disabled (only for the current session) using the enableAI property in the configuration object. This can be used to enable the AI code assistant in embedded playgrounds.

Example:

import { createPlayground } from 'livecodes';

createPlayground('#container', {
  config: {
    enableAI: true,
  },
});

Also this can be enabled using query params (e.g. https://livecodes.io/?enableAI).

Why isn't it enabled by default?

When using the AI assistant, your code is sent to Codeium servers for code completion. LiveCodes has a very strict philosophy which mandates that your code never leaves your device unless you choose to.

Please note that even though your code is sent to Codeium, it is not used for training their model. Check Codeium FAQ and privacy policy for more details.

Moreover, in many uses of LiveCodes it may not be desirable to have AI code completions (e.g. courses, quizzes, etc.).

Let's try it! 🚀

Go to the editor settings screen. Enable the AI code assistant and enjoy the magic! ✨

Please ⭐ star the project on GitHub if you like it, and follow LiveCodes on Twitter to be notified with latest updates!

How is LiveCodes Free?!

Hatem Hosny — Sat, 27 Jan 2024 23:49:36 +0000

LiveCodes is a feature-rich, open-source, client-side, code playground that supports 80+ languages and frameworks. Playgrounds can be embedded in web pages. A powerful, yet easy-to-use, SDK allows creating and communicating with playgrounds.

Nevertheless, LiveCodes is free, with no subscriptions, no limits to usage, no ads and no account required. It is MIT-licensed which allows its use, distribution and modification even for commercial projects.

So, how can LiveCodes be free? What is the catch?

In this article we will discuss LiveCodes business model and how it can be sustainable.

TL;DR

High quality, free product → wide adoption → use for profit → sponsors 🎉

Win/Win/Win!

LiveCodes is a Developer Tool Not a Hosting Company!

Most other code playgrounds with comparable features and language support are either paid, or have significant, progressively increasing, limitations on free plans. Limitations restrict number of users, private projects, compute time to run code, available RAM or CPU, editable playgrounds and more. This is understandable. Servers cost money, and high usage of running code on servers can be expensive.

LiveCodes solves this problem by running code on user devices not servers. So, instead of selling VMs and cloud computing, LiveCodes works on the client-side, and runs all the code (including compiling 80+ languages) in the browser. See how LiveCodes is different.

LiveCodes aims to be a developer tool that boosts productivity, enhances learning new technologies and allows the use of interactive tutorials in teaching, without having to care about spinning servers, maintaining databases, managing scaling or struggling with configuration files.

Sustainability and Scalability

Sustainability is important. Running costs should not exceed project budget.

With this in mind, here is the current technology stack and services used by LiveCodes and their running costs:

Code hosting and version control: GitHub - Free.
CI/CD: GitHub Actions - Free.
Web hosting and CDN: Cloudflare Pages - Free.
Permanent URLs: Cloudflare DNS + Cloudflare Pages - Free.
Dynamic services (like sharing short URLs): Cloudflare Workers - Generous Free Tier.
Module hosting: esm.sh / jsDelivr / unpkg - Free.
TypeScript types (for editor Intellisense): esm.sh - Free.
Deploy user projects: GitHub Pages - Free.
Host user assets: GitHub Pages - Free.
Sync user data: GitHub - Free.
Authentication with GitHub account: Firebase Authentication - Almost Free.
Compiling and running user code: User browsers - Free!

Total running costs: Almost Zero!

In addition, being a static app, the files are aggressively cached in the browser and on CDN.

With high usage, LiveCodes is served from the edge (on Cloudflare CDN) close to the users. The computation occurs on user browsers. This does not result in any significant increase in costs.

Everybody is happy!

Can LiveCodes be used for profit?

Absolutely!

LiveCodes is open-source and uses the commercial-friendly MIT-license which allows unrestricted use, distribution and modification even for commercial projects.

It can be easily self-hosted (if you wish) on any static file server. And, of course, you may use the hosted app (livecodes.io) or any of its permanent URLs.

LiveCodes offers a wide range of features. And, in fact, many of these were specifically added to allow building products on top of it (e.g. self-hosting, embedded playgrounds, SDK, headless mode, and running tests, just to name a few).

With wider adoption and happy users, more and more projects would start building on top of LiveCodes.

Examples for products that can be built on top of LiveCodes:

Courses/Tutorials websites: similar to FreeCodeCamp, W3Schools, etc.
Social coding platforms: similar to CodePen, Replit, etc.
Code challenge platforms: similar to Leetcode, CodeWars, etc.
Interactive documentations for libraries.
Interactive blogs.
Website builders and content management systems, etc.

Development and Maintenance Costs

Commercial projects built on top of LiveCodes, would value the continued development and maintenance of the project. The cost of in-house building or maintaining such a project is high. At a fraction of that cost, sponsoring LiveCodes would provide stability for the project, ensure that it continues to receive regular updates and allow having a higher priority in feature development. Sponsors can also have custom playground builds with their own logo and brand among other benefits.

In addition, such a sponsorship could enhance the sponsor's reputation, reflect goodwill and signal the commitment to technological innovation and support for the open-source community.
This is a strategic investment that pays off very well.

Win/Win/Win

In summary, this business model is beneficial for everybody:

The vast majority of users can continue to use LiveCodes for free and enjoy the large number of features.
Commercial projects that build on top of LiveCodes can make use of the well-maintained product. Some of these projects may choose to sponsor LiveCodes to support its continued development at a fraction of the cost that would be required for in-house building or maintaining such a project.
LiveCodes maintainers can satisfy the passion of building the project they love, see it being used by their community and get compensated for their effort.

Win/Win/Win!

How Can I Help?

I'm glad you asked! Thank you :)

Please continue using LiveCodes! Don't worry, it is staying free for the foreseeable future.
Report any issues and suggest new features here.
Star the project on GitHub. ⭐
You are very welcome to contribute to the project.
Follow @livecodes_io on Twitter.
Spread the word!
... and consider sponsoring LiveCodes! 💚

LiveCodes for Education 🎓

Hatem Hosny — Mon, 27 Nov 2023 12:46:57 +0000

LiveCodes - A Gateway to Interactive Learning

In the evolving landscape of education, teachers and students are continuously seeking effective learning tools. The need for such tools is even more pronounced in the sphere of programming. The complexity of setting up development environments and the steep learning curve of programming languages are often challenging. This is where LiveCodes steps in, offering a seamless solution that makes programming accessible, interactive, and engaging while remaining free (and open-source) with unlimited usage. The versatility of LiveCodes makes it an ideal tool for schools, colleges, and coding bootcamps, as well as course websites and online learning platforms.

This article was originally published at LiveCodes blog.

Outline

What is LiveCodes?
Language Support
Powerful Editor
Importing Code
Exporting/Sharing Projects
Integrated Console
Compiled Code Viewer
Tasks and Assignments
Rapid Feedback
AI Assistance
Interactive Tutorials
Mobile-Friendly
Embedded Playgrounds
Full Power with the SDK
Free and Open-Source
Conclusion
Get in Touch
Start Now 🚀

What is LiveCodes?

LiveCodes is a feature-rich, open-source, client-side, code playground that runs directly in your browser. It is an innovative platform that enables quick prototyping and experimenting with various technologies without the need for setup of individual development environments. It is an excellent tool for learning and teaching programming, offering a platform for quick prototyping and idea experimentation.

See more: Introducing LiveCodes 🎉, LiveCodes Docs

Language Support

LiveCodes supports a wide range of programming languages (currently more than 80), making it suitable for teaching and learning different programming concepts. Here are some of the language categories supported by LiveCodes:

Web Languages

LiveCodes supports web languages, including HTML, CSS, and JavaScript. It also extends support to web frameworks like React, Vue, Svelte, and Solid. In addition, the most popular CSS processors and frameworks are supported, including Sass, Less, Stylus, Tailwind CSS, CSS modules, PostCSS, and many more.

Demo: https://livecodes.io/?template=react

React Starter Template

Python

Python, one of the most popular languages for beginners and experienced coders alike, is also supported on LiveCodes. This allows for a broader range of applications and projects to be developed and tested on the platform. Data science and machine learning projects are also supported (using Pyodide).

Demo: https://livecodes.io/?template=python

Python Starter Template

See more: Python Docs, Python starter template, Python-Wasm Docs, Python-Wasm starter template

Block-Based and Low-Code Programming

For beginners, particularly kids, LiveCodes offers Blockly, a block-based programming interface. This feature makes learning programming concepts easier and more engaging, providing a strong foundation for future coding education. More over, LiveCodes also supports a rich text editor which produces valid HTML. The readable code produced by these tools (JavaScript from Blockly and HTML from the rich text editor) can be examined by the user for an engaging learning experience.

Demo: https://livecodes.io/?template=blockly

A screenshot for Blockly starter template on LiveCodes

Demo: https://livecodes.io/?richtext=...

Rich text editor on LiveCodes

See more: Blockly starter template, rich text editor example

More Languages

LiveCodes supports a comprehensive list of other languages, including C, C++, PHP, Ruby, Go, Lua, Scheme, Common Lisp, R, Julia, and many more. This makes LiveCodes a universal tool for learning and teaching programming. The large number of starter templates makes it easy to get started with any of the supported programming languages.

See more: LiveCodes Languages, Starter Templates

Powerful Editor

The default code editor is the powerful editor that powers VS Code, featuring intellisense, code-completion, go-to-definition, multi-cursor support and other powerful features. The editor is very customizable. It supports keyboard shortcuts, code formatting, Emmet abbreviations and even Vim and Emacs bindings.

LiveCodes editor intellisense

See more: Code Editor

Importing Code

LiveCodes makes code importing seamless. Code can be easily pulled from GitHub and many other sources without leaving the platform, providing an excellent opportunity for students to learn from existing codes and integrate them into their projects or assignments.

Import screen

See more: Import

Exporting/Sharing Projects

Collaboration is at the heart of LiveCodes. Projects can be exported locally or to GitHub gists. In addition, users can easily share projects with peers or teachers, making it a valuable tool for cooperative learning and project evaluation.

Export project

Share screen

See more: Export - Share

Integrated Console

LiveCodes provides an integrated console, enabling users to examine their code output in real time, a feature that significantly enhances the learning and debugging experience.

LiveCodes console

See more: Console

Compiled Code Viewer

The compiled code viewer in LiveCodes is an excellent tool for students learning new languages and frameworks. It provides a clear view of how languages like TypeScript/JSX compile to JavaScript, or how CSS processors operate.

LiveCodes compiled code viewer

See more: Compiled Code

Tasks and Assignments

LiveCodes offers a test runner that can be used to validate tasks and assignments, providing immediate feedback. This feature allows teachers to set tasks and students to validate their solutions, promoting an interactive learning environment.

LiveCodes tests

Python doctests

See more: Tests

Rapid Feedback

One of the standout features of LiveCodes is its instant feedback mechanism. Students can see the result of their code directly in the browser without running any compilation or build. This immediate response encourages experimentation and enhances understanding.

AI Assistance

The AI code assistant available (for free) in LiveCodes helps users write better code. This feature provides on-the-fly suggestions and corrections, making the journey of learning coding less daunting for beginners and more efficient for advanced users. The AI assistance can be turned off for tasks and assignments.

LiveCodes AI code assistant (JavaScript)

LiveCodes AI code assistant (Python)

See more: AI Code Assistant

Interactive Tutorials

The embedded playgrounds together with the powerful SDK allows you to create engaging interactive tutorials. Such tutorials can guide students through different programming concepts and projects, making LiveCodes a fun educational tool.

A screenshot of LiveCodes interactive tutorial

See more: Let's Make an Interactive Coding Tutorial

Mobile-Friendly

LiveCodes is not confined to desktops. The platform is mobile-friendly, allowing users to code on-the-go. The responsive layout allows working on devices with different screen sizes. On mobile, a lighter-weight touch-friendly code editor (CodeMirror 6) is used. This ensures that learning, practicing, or teaching coding can take place anytime, anywhere.

LiveCodes mobile interface

Embedded Playgrounds

LiveCodes playgrounds can be easily embedded in any web page, be it in a course website, a tutorial blog post or a learning management system (LMS). The embed screen makes it easy to customize various options and configurations, and provides a preview for the embedded playground. Alternatively, the powerful SDK can be used to provide full control over creating and communicating with the embedded playground.

LiveCodes embed screen

See more: Embedded Playgrounds

Full Power with the SDK

One of the distinguishing features of LiveCodes is its powerful SDK that provides an easy way for creating and communicating with embedded playgrounds. The SDK is available for various technologies including vanilla JavaScript, TypeScript, React, Vue, and Svelte. This opens up endless possibilities for using it as a building block for bigger platforms that can revolutionize education.

See more: LiveCodes SDK

Free and Open-Source

LiveCodes is totally free to use. There are no ads, no subscriptions, no account required, and no limits to its use. It can also be easily self-hosted and is licensed under the permissive MIT license which allows free commercial use.

See more: LiveCodes on GitHub

Conclusion

LiveCodes is an impactful and revolutionary tool that can transform the way programming is taught and learned in educational environments. Its rich features, wide language support, and ease of use make it a great choice for educators and learners.

Get in Touch

Are you a teacher who wants to use LiveCodes for teaching? Are you a developer who wants to build an online learning platform? Please get in touch. We would love to help.

If you have any questions or feature requests, please submit an issue in the GitHub repo.

Start Now 🚀

Let's Make Learning Frontend Great Again!

Hatem Hosny — Tue, 22 Aug 2023 11:16:05 +0000

Gone are the happy days when we used to start a frontend project by creating 3 files (for HTML, CSS and JavaScript), and start coding. Frontend development is becoming increasingly complex with a large number of frameworks (and meta frameworks) each with its own (non-standard) syntax, processors, build tools and configuration files. These are all great tools, and each solves a real set of problems. However, the ecosystem has become overwhelming for new comers who want to start a frontend development career.

This article was originally published at LiveCodes blog.

Outline

JavaScript Fatigue
In Search for a Solution
What is LiveCodes?
Demo
Language Support
Development Environment
AI Code Assistant
Sharing/Exporting/Deploying Projects
Embedded Playgrounds
Can I Use it to Make a Full Website?
Does it Work Offline?
Open-Source
Conclusion

JavaScript Fatigue

The rapidly expanding ecosystem of modern JavaScript can be intimidating for new frontend developers. The complexity added by each new tool is increasing, to the extent that people started taking multiple courses to learn the build tool, instead of learning the technology they use! This has been the situation over the past few years and it does not seem to be improving.

Why should a junior web developer, who wants to learn something new, need to run terminal commands and download the heaviest object in the universe, just to get started?!

node_modules, the heaviest object in the universe!

Then comes the configuration hell, with the need to configure zillion different things to work together. Just to start a hello-world project!

Such environment setup may be needed for a production scale project, but it should not be required for learning, exploring, prototyping, experimenting, reproducing issues, sharing or teaching.

Configuration hell in action

In Search for a Solution

To simplify local environment setup, many platforms have provided online IDE/playgrounds to abstract away the build process and allow users to write code and see its result. These are great tools and they do solve parts of the problem. However, there has always been something missing. Since a lot of processing (e.g. compiling, bundling, etc.) occurs on their servers, there are always limitations for use (e.g. number of projects, private projects, processing power/memory, down-time etc.).

To overcome these limitations users are either required to pay for a subscription, or ,in case of open-source solutions, users are required to self-host the tool and deal with the complexity themselves (and still pay for the hosting provider).

As a developer I can understand why I need to pay for servers that host my websites for users. But why do I need to pay for servers to write code? I can use my local device. I just needed to take away the complexity! 🤔

Other alternatives were able to run all the processing inside the browser on the user device, which is a great step forwards indeed. However, that required downloading a whole nodejs runtime and then, also downloading the heaviest object in the universe (see above) every time you load the playground. And you still need to go through the configuration hell (also see above). Just to start a hello-world project!

This is where LiveCodes comes to the scene.

Let's Make Frontend Great Again!

Disclosure: I'm the author of LiveCodes.

What is LiveCodes?

LiveCodes is a feature-rich, open-source, client-side, code playground that supports 80+ languages and frameworks. Check out the announcement for details.

When a user selects any of the supported languages/frameworks, the compiler of that language is downloaded and runs in the browser. After that, all code changes are compiled locally on the user device.

No server rounds are required for compilation or processing. No need to download a nodejs runtime. No npm installs. No build steps. No configuration hell. It just works!

LiveCodes is a client-side app, with no servers required. This allows it to be free with no limits to usage, no ads and no account required.

Another added benefit is privacy. All projects created in LiveCodes are private by default. The code written in LiveCodes does not leave the local device unless the user chooses to share, export or deploy it.

A large number of starter templates are available to make starting with a new framework a seamless experience. In addition, any project can be saved as a user template.

live-codes / livecodes

Code Playground That Just Works!

LiveCodes

Code Playground That Just Works!

A feature-rich, open-source, client-side code playground for React, Vue, Svelte, Solid, Typescript, Python, Go, Ruby, PHP and 80+ languages/frameworks.

Try it now on livecodes.io

Documentations

What makes LiveCodes different?

Code Playground That Just Works!

No servers to configure (or pay for!)
No databases to maintain (or pay for!)
No installs
No configuration files
No build steps
No subscription fees (free and open-source)
No account required *
No limits for usage (unlimited private projects)
80+ languages/frameworks/processors
Large set of features and integrations
Import code from a wide variety of sources
Use modules from npm, deno.land/x, jsr, GitHub, and others
Easily embed it in your web pages
It runs in the browser (client-side)

* GitHub account is required only for features that use GitHub Integration.

Quick Start

Standalone App

Go to livecodes.io

... and enjoy all the features!

Embedded Playground

Add this…

View on GitHub

Demo

Try the standalone app running React with JSX: https://livecodes.io/?template=react

Try the interactive demo for an embedded LiveCodes playground that runs React with JSX on LiveCodes blog.

Language Support

Currently, there are 80+ languages/frameworks supported in LiveCodes. These include:

Web languages (HTML, CSS & JavaScript)
Web frameworks/libraries (e.g. React JSX/TSX, Vue SFC, Svelte SFC, Solid, MDX, Astro).
Languages that transpile to JavaScript (e.g. TypeScript, CoffeeScript, LiveScript, ReScript).
Languages/frameworks that generate CSS (e.g. SCSS, Less, Stylus, Tailwind CSS, UnoCSS).
CSS processors (e.g. PostCSS, Autoprefixer, Lightning CSS, CSS Modules, cssnano).
Traditional programming languages (e.g. Python, Ruby, Go, PHP, C++, R, Lua, Scheme, Perl).
Data manipulation/logic languages (e.g. SQL, Prolog).
Authoring/templating languages (e.g Markdown, AsciiDoc, Pug, Handlebars, Haml).
Low-code/visual editors (e.g. blockly, rich text editor).
Modeling languages/diagram-as-code (e.g. Gnuplot, Graphviz, Mermaid, Vega, Plotly).
Languages that target WebAssembly (e.g. AssemblyScript, WebAssembly Text Format).
... and many more.

Generally, if you are a developer (or want to be one), there is a big chance you will find something interesting to do with LiveCodes.

One Interface for Many Tools

Many tools have provided playgrounds to help exploration and learning. However, each playground has different UI and features. A big advantage for LiveCodes is that it has a wide range of language/framework support. Through this single interface users can explore and learn many tools in one place. In addition, the large set of features becomes available while using any of these tools.

Development Environment

LiveCodes provides many of the commonly used developer tools. These include Monaco editor (that powers VS Code), Prettier, Emmet, Vim/Emacs modes, Babel, TypeScript, SCSS, Less, PostCSS, Jest and Testing Library, among others. All these tools run seamlessly in the browser without any installations or configurations. It feels like a very light-weight version of your own local development environment including the keyboard shortcuts, IntelliSense and code navigation features.

The integrated console allows quick inspection of logged values. And the compiled code viewer improves the learning experience.

NPM modules can be imported as usual. It just works™ without having to npm install anything. Not even on the server (because there is no server!).

AI Code Assistant

The AI code assistant provides code completion based on the current context and comments. This is powered by Codeium, the free ultrafast Copilot alternative. This can significantly boost the learning experience. See how to enable it.

Sharing/Exporting/Deploying Projects

Projects can be easily shared as URLs, QR codes or to social media platforms. In addition, any project can be exported as HTML, JSON or zip file containing source code files. Projects can also be exported to other services like GitHub gists, CodePen or JSFiddle.

User data can be synchronized across devices. Also it can be backed-up and restored on same or different device.

Projects can be deployed to public URLs that can be shared with others. This is hosted for free on GitHub Pages.

Embedded Playgrounds

Playgrounds can be embedded in any web page. This can be very useful for blogs, tutorials and documentation websites. The embed screen allows customization of embed options and previewing the resulting playground. Code can be easily prefilled into embedded playgrounds.

An easy-to-use, yet powerful, SDK, allows communication between the embedding page and the playground. This can be used to make interactive coding tutorials.

Can I Use it to Make a Full Website?

You probably can, but you probably should NOT!

LiveCodes projects are kept simple, by design, where each project represents a single web page/component. There is no concept of multi-file projects. This makes it more suitable for learning, prototyping, experimenting, sharing and teaching. Once you cross that limit and require something bigger, you can then move back to your local IDE.

In fact, many of the features of LiveCodes were initially prototyped in LiveCodes, then later integrated into the big project.

Does it Work Offline?

Not Yet!

Offline use is definitely on the roadmap. However, it is not ready yet.

Open-Source

LiveCodes is released under the permissive MIT License which allows anyone to use (including commercial use), modify, and distribute. It can also be self-hosted (for free) on any static file server.

Conclusion

LiveCodes makes getting started with frontend development easier, more accessible and more fun. Of course this alone does not solve the problem of increasing complexity in the frontend web development, however, it can be a great tool for learning, prototyping, experimenting, sharing and teaching. And it is free!

What will you learn (or teach) today?

Start now: https://livecodes.io?new
Check the docs: https://livecodes.io/docs
Star the repo: https://github.com/live-codes/livecodes

Let's Make an Interactive Coding Tutorial

Hatem Hosny — Sat, 05 Aug 2023 06:31:51 +0000

Let's assume we want to make an interactive coding tutorial on a blog or a tutorials website. The tutorial should have a playground that helps us guide the students to write code, see the results and complete an assignment task.

We are going to use LiveCodes and its powerful SDK to achieve this. So, here we go.

This article was originally published at LiveCodes blog.

What Are We Building?

We are going to build a playground for a simple interactive coding tutorial.

We will add some HTML, add styles using CSS and dynamically change its content using JavaScript. The student can interact with the playground, add code and see its result. At the end, the student is asked to complete a simple task (e.g. changing the value of a variable), then the task is verified and a feedback is given if the task was completed successfully.

Demo

Check a live demo on LiveCodes blog.

The full source code (in vanilla JavaScript and also in React TSX) can be found here.

What is LiveCodes?

LiveCodes is a feature-rich, open-source, client-side, code playground that supports 80+ languages and frameworks. Playgrounds can be embedded in any web pages. A powerful, yet easy-to-use, SDK allows creating and communicating with playgrounds.

LiveCodes is free with no limits to usage, no ads and no account required. It is MIT-licensed which allows its use, distribution and modification even for commercial projects.

live-codes / livecodes

Code Playground That Just Works!

LiveCodes

Code Playground That Just Works!

A feature-rich, open-source, client-side code playground for React, Vue, Svelte, Solid, Typescript, Python, Go, Ruby, PHP and 80+ languages/frameworks.

Try it now on livecodes.io

Documentations

What makes LiveCodes different?

Code Playground That Just Works!

No servers to configure (or pay for!)
No databases to maintain (or pay for!)
No installs
No configuration files
No build steps
No subscription fees (free and open-source)
No account required *
No limits for usage (unlimited private projects)
80+ languages/frameworks/processors
Large set of features and integrations
Import code from a wide variety of sources
Use modules from npm, deno.land/x, jsr, GitHub, and others
Easily embed it in your web pages
It runs in the browser (client-side)

* GitHub account is required only for features that use GitHub Integration.

Quick Start

Standalone App

Go to livecodes.io

... and enjoy all the features!

Embedded Playground

Add this…

View on GitHub

Enough talk, let's get started!

The Playground

The LiveCodes SDK makes it easy to create code playgrounds. The SDK can be loaded from CDN or can be installed from npm. To keep things simple, we will just use the CDN.

The SDK is available for vanilla JavaScript/TypeScript, React, Vue and Svelte. Again, for simplicity, we will use vanilla JavaScript.

A new playground can be created using the createPlayground function. It takes the container HTML element (or its selector) and optionally embed options.

<div id="container"></div>

<script type="module">
  import { createPlayground } from 'https://unpkg.com/livecodes';

  createPlayground('#container', { /* embed options */ });
</script>

Preview

This creates a playground that the user can interact with and see the result immediately, without having to install or build anything (not even for any of the supported languages).

It is generally a good practice to specify the SDK version and a permanent URL for the app to avoid later potential breaking changes with updates to the SDK or the app.

<div id="container"></div>

<script type="module">
  import { createPlayground } from 'https://unpkg.com/livecodes@0.4.0';

  const options = {
    // permanent URL avoids later breaking changes
    appUrl: 'https://v25.livecodes.io',
  };
  createPlayground('#container', options);
</script>

Preview

We now have an empty playground. Let's fill it with code.

Adding Content

When creating the playground, embed options can be used to add content (e.g. using the options config, params, import or template).

This loads the playground prefilled with the code you specified.

<div id="container"></div>

<script type="module">
  import { createPlayground } from 'https://unpkg.com/livecodes@0.4.0';

  const options = {
    appUrl: 'https://v25.livecodes.io',
    config: {
      markup: {
        language: 'html',
        content: 'Welcome to the tutorial!',
      },
    },
  };
  createPlayground('#container', options);
</script>

Preview

Adding Tutorial Steps

Now the student can see the playground, interact with it and see the result. So let's add some tutorial steps, where new code is added to the playground in different editors (HTML, CSS and JavaScript). This can gradually introduce new concepts to the student without losing context or having to move to a new playground.

The createPlayground function returns a promise that resolves to the playground instance. This instance has some useful methods that allows interaction with the already running playground (e.g. run, getConfig, setConfig, getCode, format, show, runTests, onChange, getShareUrl).

<div id="container"></div>
<button id="next">Next</button>

<script type="module">
  import { createPlayground } from "https://unpkg.com/livecodes@0.4.0";

  // add data for tutorial steps
  const steps = [
    {
      config: {
        markup: {
          language: "html",
          content: '<h1>Hello,\n  <span id="title">World</span>!\n</h1>',
        },
      },
    },
  ];

  const options = {
    appUrl: "https://v25.livecodes.io",
    config: {
      markup: {
        language: "html",
        content: "Welcome to the tutorial!",
      },
    },
  };

  createPlayground("#container", options).then((playground) => {
    const nextBtn = document.querySelector("#next");
    nextBtn.addEventListener("click", async () => {
      const currentStep = steps[0];
      // send the config object to the playground
      await playground.setConfig(currentStep.config);
    });
  });
</script>

Preview

Now we have defined an array (steps) that will hold the data of each step in the tutorial. The first step has a config object that is to be sent to the playground.

A button with the id "next" controls moving between steps. An event handler for its click event sends the current step config to the playground using the method setConfig.

More Steps

So, let's add some more steps. Clicking the button should move us to the next step.

<div id="container"></div>
<button id="next">Next</button>

<script type="module">
  import { createPlayground } from "https://unpkg.com/livecodes@0.4.0";

  const steps = [
    {
      config: {
        markup: {
          language: "html",
          content: '<h1>Hello,\n  <span id="title">World</span>!\n</h1>',
        },
      },
    },
    // add a new step
    {
      config: {
        markup: {
          language: "html",
          content: '<h1>Hello,\n  <span id="title">World</span>!\n</h1>',
        },
        style: {
          language: 'css',
          content: '#title {\n  color: blue;\n}',
        },
      },
    },    
  ];

  const options = {
    appUrl: "https://v25.livecodes.io",
    config: {
      markup: {
        language: "html",
        content: "Welcome to the tutorial!",
      },
    },
  };

  createPlayground("#container", options).then((playground) => {
    let step = 0;
    const nextBtn = document.querySelector("#next");
    nextBtn.addEventListener("click", async () => {
      const lastStep = steps.length - 1;
      const currentStep = steps[step];
      await playground.setConfig(currentStep.config);
      step = step < lastStep ? step + 1 : 0;
    });
  });
</script>

Preview

The variable step keeps track of the step index. The corresponding data is read from the steps array and sent to the playground.

However, there is now a lot of duplication in the code of each step. Also, if the student makes some changes to the HTML, the next step will overwrite them.

So, let's read the current config object from the playground (using the method getConfig) and then merge the changes for the new step. Now, we can remove the duplication in steps.

<div id="container"></div>
<button id="next">Next</button>

<script type="module">
  import { createPlayground } from "https://unpkg.com/livecodes@0.4.0";

  const steps = [
    {
      config: {
        markup: {
          language: "html",
          content: '<h1>Hello,\n  <span id="title">World</span>!\n</h1>',
        },
      },
    },
    {
      config: {
        // remove duplication
        style: {
          language: 'css',
          content: '#title {\n  color: blue;\n}',
        },
      },
    },    
  ];

  const options = {
    appUrl: "https://v25.livecodes.io",
    config: {
      markup: {
        language: "html",
        content: "Welcome to the tutorial!",
      },
    },
  };

  createPlayground("#container", options).then((playground) => {
    let step = 0;
    const nextBtn = document.querySelector("#next");
    nextBtn.addEventListener("click", async () => {
      const lastStep = steps.length - 1;
      const currentStep = steps[step];
      // get previous config
      const prevConfig = step === 0 ? options.config : await playground.getConfig();
      // merge previous with new config
      await playground.setConfig({ ...prevConfig, ...currentStep.config });
      step = step < lastStep ? step + 1 : 0;
    });
  });
</script>

Preview

Changing Layout

We still have a problem!

Although we were able to add CSS code, the style editor was not activated. We can correct this by using the show method.

We can even control the position of the cursor, so that your student is guided where to start typing.

<div id="container"></div>
<button id="next">Next</button>

<script type="module">
  import { createPlayground } from "https://unpkg.com/livecodes@0.4.0";

  const steps = [
    {
      // active editor and cursor position
      panel: 'markup',
      position: { line: 2, column: 20 },
      config: {
        markup: {
          language: "html",
          content: '<h1>Hello,\n  <span id="title">World</span>!\n</h1>',
        },
      },
    },
    {
      panel: 'style',
      position: { line: 2, column: 10 },
      config: {
        style: {
          language: 'css',
          content: '#title {\n  color: blue;\n}',
        },
      },
    },    
  ];

  const options = {
    appUrl: "https://v25.livecodes.io",
    config: {
      markup: {
        language: "html",
        content: "Welcome to the tutorial!",
      },
    },
  };

  createPlayground("#container", options).then((playground) => {
    let step = 0;
    const nextBtn = document.querySelector("#next");
    nextBtn.addEventListener("click", async () => {
      const lastStep = steps.length - 1;
      const currentStep = steps[step];
      const prevConfig = step === 0 ? options.config : await playground.getConfig();
      await playground.setConfig({ ...prevConfig, ...currentStep.config });
      // set layout
      await playground.show(currentStep.panel, currentStep.position);
      step = step < lastStep ? step + 1 : 0;
    });
  });
</script>

Preview

Now, let's add some steps for JavaScript code. We can even open the integrated console to show logs. Let's also change the text of the "next" button with each step.

<div id="container"></div>
<button id="next">Start Tutorial</button>

<script type="module">
  import { createPlayground } from "https://unpkg.com/livecodes@0.4.0";

  const steps = [
    {
      btnText: 'Next',
      panel: 'markup',
      position: { line: 2, column: 20 },
      config: {
        markup: {
          language: "html",
          content: '<h1>Hello,\n  <span id="title">World</span>!\n</h1>',
        },
      },
    },
    {
      btnText: 'Next',
      panel: 'style',
      position: { line: 2, column: 10 },
      config: {
        style: {
          language: 'css',
          content: '#title {\n  color: blue;\n}',
        },
      },
    },
    // add new steps
    {
      btnText: 'Next',
      panel: 'script',
      position: { line: 2, column: 19 },
      config: {
        script: {
          language: 'javascript',
          content:
            '// change this value to "LiveCodes"\nconst newTitle = "???";\ndocument.querySelector("#title").textContent = newTitle;\nconsole.log(newTitle);',
        },
      },
    },
    {
      btnText: 'Final Result',
      panel: 'console',
    },
    {
      btnText: 'Restart Tutorial',
      panel: 'result',
    },
  ];

  const options = {
    appUrl: "https://v25.livecodes.io",
    config: {
      markup: {
        language: "html",
        content: "Welcome to the tutorial!",
      },
    },
  };

  createPlayground("#container", options).then((playground) => {
    let step = 0;
    const nextBtn = document.querySelector("#next");
    nextBtn.addEventListener("click", async () => {
      const lastStep = steps.length - 1;
      const currentStep = steps[step];
      const prevConfig = step === 0 ? options.config : await playground.getConfig();
      await playground.setConfig({ ...prevConfig, ...currentStep.config });
      await playground.show(currentStep.panel, currentStep.position);
      // change the button text for new steps
      nextBtn.textContent = currentStep.btnText;
      step = step < lastStep ? step + 1 : 0;
    });
  });
</script>

Preview

Assignments

So, we are progressing very well!

Now we want our student to complete a task. We then need to validate if the task was completed successfully. This can be achieved by running automated tests.

LiveCodes supports running automated tests using Jest and Testing Library. You may test the page DOM or test the code exported from the script editor.

Let's write some tests for our tutorial.

import { screen } from "@testing-library/dom";
import "@testing-library/jest-dom";

test("Should display title", async () => {
  expect(screen.getByText("Hello", { exact: false })).toHaveTextContent(
    "Hello, LiveCodes!"
  );
});

test("Title should be blue", async () => {
  const style = window.getComputedStyle(document.querySelector("#title"));
  expect(style.color).toBe("rgb(0, 0, 255)");
});

We test that the student was indeed able to complete the task (by changing the value of the variable newTitle to become "LiveCodes"). Also we are testing the color of the title.

These tests can be added to tests property of the config object.

We can then run the tests using the SDK method runTests. This method returns a promise that resolves to the test results, which we can then show to our student.

Final Result

Check the final result after adding tests, styles and some final touches. See it in action on LiveCodes blog.

A screenshot for the final result of the tutorial demo

Full Code

The full code in vanilla JavaScript and also in React TSX can be found here.

Conclusion

That was an interesting project to build!

Using LiveCodes SDK, we have built a very basic tutorial where the student can learn how to add HTML elements, style them with CSS and change the text content with JavaScript. We were even able to check if the assignment was completed successfully.

During our work, we had an idea about the LiveCodes SDK and how to use it. Please refer to the SDK documentations for more details.

What's Next?

You can now make your tutorials a lot more interactive and fun with LiveCodes. These tutorials can use any of the supported languages and frameworks. Tutorials may also cover your own libraries (with full editor IntelliSense).

You may want to create full courses and even sell them. LiveCodes is MIT-licensed.

Your imagination is the limit!

Tell Us What You Think

Please let us know what you think. If you have a case that the SDK does not cover, tell us about it.

If you do use LiveCodes for your tutorials/courses, we would love to know about them (we may even link to them!). And if you find LiveCodes to be useful, please give us a star on GitHub and please consider becoming a sponsor.

What will you learn/build/teach today?

Introducing LiveCodes 🎉

Hatem Hosny — Fri, 04 Aug 2023 16:29:59 +0000

LiveCodes is here! 🎊

A Code Playground That Just Works!

I'm thrilled to announce the public release of LiveCodes, a feature-rich, open-source, client-side, code playground that supports 80+ languages and frameworks. With LiveCodes, learning, prototyping, experimenting, documenting, teaching, and sharing code is easier and more enjoyable than ever.

This article was originally published at LiveCodes blog.

Outline

Why another playground?
Show me a demo
What are the main features?
How do I get started?
Can I self-host it?
What about commercial use?
Can I use LiveCodes today?
Can I contribute?
Let's start coding!
Where can I learn more?

live-codes / livecodes

Code Playground That Just Works!

LiveCodes

Code Playground That Just Works!

A feature-rich, open-source, client-side code playground for React, Vue, Svelte, Solid, Typescript, Python, Go, Ruby, PHP and 90+ languages/frameworks.

Try it now on livecodes.io

Documentations

What makes LiveCodes different?

Code Playground That Just Works!

No servers to configure (or pay for!)
No databases to maintain (or pay for!)
No installs
No configuration files
No build steps
No subscription fees (free and open-source)
No account required *
No limits for usage (unlimited private projects)
90+ languages/frameworks/processors
Large set of features and integrations
Import code from a wide variety of sources
Use modules from npm, deno.land/x, jsr, GitHub, and others
Easily embed it in your web pages
It runs in the browser (client-side)

* GitHub account is required only for features that use GitHub Integration.

Quick Start

Standalone App

Go to livecodes.io

... and enjoy all the features!

Embedded Playground

Add this…

View on GitHub

Why another playground?

With already existing excellent playgrounds, LiveCodes tries to be different. The major differences include:

Language Support

Currently, there are 80+ languages/frameworks supported. These include:

Web languages (HTML, CSS & JavaScript).
Web frameworks/libraries (e.g. React JSX/TSX, Vue SFC, Svelte SFC, Solid, MDX, Astro).
Languages that transpile to JavaScript (e.g. TypeScript, CoffeeScript, LiveScript, ReScript).
Languages/frameworks that generate CSS (e.g. SCSS, Less, Stylus, Tailwind CSS, UnoCSS).
CSS processors (e.g. PostCSS, Autoprefixer, Lightning CSS, CSS Modules, cssnano).
Traditional programming languages (e.g. Python, Ruby, Go, PHP, C++, R, Lua, Scheme, Perl).
Data manipulation/logic languages (e.g. SQL, Prolog).
Authoring/templating languages (e.g Markdown, AsciiDoc, Pug, Handlebars, Haml).
Low-code/visual editors (e.g. blockly, rich text editor).
Modeling languages/diagram-as-code (e.g. Gnuplot, Graphviz, Mermaid, Vega, Plotly).
Languages that target WebAssembly (e.g. AssemblyScript, WebAssembly Text Format).
... and many more.

Generally, if you are a developer (or want to be one), there is a big chance you will find something interesting to do with LiveCodes.

A wide range of language support

Client-Side!

All processing and code transformations run in the browser on the client-side. After the initial load, the app gets significantly faster without having to wait for server rounds. Lazy-loading is heavily used. Only parts of the app required for the selected languages/features are downloaded.

The code you write in LiveCodes does not leave your computer. All projects are private unless you choose to share/export/deploy them.

Developer Tool

An important goal for LiveCodes is to allow library developers to use it for the documentation of their libraries and showcase their products. This can be achieved by embedding playgrounds in blogs, documentation and educational websites. In addition, private (unpublished) modules can be imported with editor auto-completion and intellisense.

LiveCodes does NOT aim to be a social coding platform. It will stay as a backendless developer tool. Other platforms are already doing a great job in this regard.

Build-Free Development Environment

LiveCodes provides many of the tools you may already be using. These include Monaco editor (that powers VS Code), Prettier, Emmet, Babel, TypeScript, SCSS, Less, PostCSS, Jest and Testing Library, among others. NPM modules can be imported as usual. All these tools run seamlessly in the browser without any explicit build step. It feels like a very light-weight version of your own local development environment with the keyboard shortcuts, IntelliSense and code navigation features.

It just works™ without having to npm install anything. Not even on the server (because there is no server!).

Fun Fact

Significant portions of LiveCodes features were experimented/prototyped inside LiveCodes!

Web Platform

The output of code written in LiveCodes is a web page. Whatever language/syntax you use, the result can ultimately be viewed as a web page which you can interact with, test, share or deploy. Check the starter templates for examples.

Powerful SDK

The LiveCodes playground can be embedded in any web page. A powerful SDK allows the embedding page to interact with the playground (e.g. run, get/set source code, format, get result page or compiled code, get share URL, listen to changes, run tests, get test results, change layout, etc.). This enables other apps to be built on top of LiveCodes.

Check how you can build an interactive coding tutorial with LiveCodes SDK!

Your imagination is the limit!

Free and Open-Source

LiveCodes is free, with no limits for use, no ads and no account required.
Do you want to self-host it for commercial use? No problem! It is MIT-licensed 🎉

Show me a demo

Try the embedded interactive playground in LiveCodes blog.

Or, go to livecodes.io to try the full standalone playground.

What are the main features?

A large set of features!

Powerful Editor

The default code editor is the powerful editor that powers VS Code, featuring code-completion, go-to-definition, multi-cursor support and other powerful features you got used to. The editor is very customizable. It supports keyboard shortcuts, code formatting, Emmet abbreviations and even Vim and Emacs bindings.

A powerful editor with IntelliSense

Mobile-friendly

The responsive layout allows working on devices with different screen sizes. On mobile, a lighter-weight touch-friendly code editor (CodeMirror 6) is used, so that you can experiment your ideas on the go.

External Code/Libraries

External scripts/stylesheets can be added to the web page. There is a UI screen that helps you search for and add NPM libraries and google fonts. Moreover, NPM modules can be imported without the need for any npm installs.

Import and Code Pre-fill

Code can be imported from a variety of sources including GitHub gist, GitHub file, directory in a GitHub repo, Gitlab snippet, Gitlab file, directory in a Gitlab repo, JS Bin, raw code, code in web page DOM and code in zip file. You can also pre-fill code using various ways.

Share/Export

Projects can be easily shared as URLs or QR codes. In addition, you may export any project as HTML, JSON or zip file containing source code files. You may also export to other services like GitHub gists, CodePen or JSFiddle.

Embedded Playgrounds

Projects can be embedded in any web page. The embed screen allows you to customize the embed options and preview the resulting playground. An easy-to-use, yet powerful, SDK, allows communication between the embedding page and the playground. In addition, code can be easily prefilled.

This is particularly useful for educational websites and for library documentations. It is secure and highly configurable. Custom modules can be imported with full IntelliSense!

Lite mode

In lite mode, a light-weight, minimal code editor is used. This is specifically useful if you expect your users to make very little code edits, specially if you want to embed multiple playgrounds in the same webpage.

Code formatting, Emmet abbreviations and dev tools are not available. However, any language supported by LiveCodes can be used, with syntax highlighting. Code edits are compiled and shown in the result page as usual.

Deploy

Projects can be deployed to public URLs that can be shared with others. This is hosted for free on GitHub Pages.

Starter Templates

A large number of starter templates are available. They can be used to get you started with most of the supported technologies.

LiveCodes Starter Templates

Assets

Your own local assets (e.g. images, icons, fonts, local scripts and stylesheets) can be added to the app and then used in any project. The assets are made available even when the projects are shared, exported or deployed.

Dev Tools

Tools like console, compiled code viewer and test runner can significantly improve your development experience.

Broadcast

You can broadcast source code or result page in real-time to others. This can be of great value as an educational tool and for demo purposes.

Sync/Backup/Restore

Do you work on multiple devices? No Problem! You may sync or backup and restore your data any time on any device.

Developer-friendly

LiveCodes makes it easy to get started. It is highly configurable. Lots of features can be configured by URL query params. The SDK facilitates embedding playgrounds and allows easy communication with them. The SDK is available for use in Vanilla JS/TS, React, Vue and Svelte.

Focused on Privacy

Projects are private by default. The code you write in LiveCodes never leaves your computer, unless you choose to share, export, broadcast or sync it. User data is stored in the browser.

Documentation

Comprehensive documentations are available for features, configuration, supported languages and SDK (including TypeScript Types). Documentations are rich with code samples, live demos and screenshots. A gallery of usage examples is provided as a storybook. You can even just ask our AI chatbot.

More Features

Go to the features documentation to know about more features with detailed description.

How do I get started?

Check the getting started guide. However, in a nutshell:

To use the standalone App:

Just go to livecodes.io and enjoy all the features!
To embed a playground in your web page:

Add this code to your web page:

<div id="container"></div>

<script type="module">
  import { createPlayground } from 'https://unpkg.com/livecodes';

  createPlayground('#container', {
    params: {
      markdown: '# Hello LiveCodes!',
      css: 'h1 {color: dodgerblue;}',
      js: 'console.log("Hello, from JS!");',
      console: 'open',
    },
  });
</script>

Please check the documentation about embedded playgrounds and SDK for more details.

Can I self-host it?

Sure!

Download a release.
Put it on a static file server.

... and it just works!

Please check the documentation about self-hosting for more details.

What about commercial use?

Feel free to use it for commercial purposes. It is MIT-licensed 🎉

If you find it useful, please consider supporting the project 💚.

Can I use LiveCodes today?

Yes!

However, please note that LiveCodes is currently in public beta. It is in active development.

Having said that, the public-facing API has been stable for a while. Permanent URLs are available for the app and SDK to avoid later breaking changes in your embedded playgrounds.

Can I contribute?

Of course! You are very welcome. Please start here.

Let's start coding!

Visit livecodes.io to experience LiveCodes for yourself!

Please star the repo, let us know what you think and report any bugs you find.

If you do use LiveCodes in a project, we'd love to hear about it (we may add a link to it!).

What will you learn/build/teach with LiveCodes today?

Where can I learn more?

live-codes / livecodes

Code Playground That Just Works!

LiveCodes

Code Playground That Just Works!

A feature-rich, open-source, client-side code playground for React, Vue, Svelte, Solid, Typescript, Python, Go, Ruby, PHP and 90+ languages/frameworks.

Try it now on livecodes.io

Documentations

What makes LiveCodes different?

Code Playground That Just Works!

No servers to configure (or pay for!)
No databases to maintain (or pay for!)
No installs
No configuration files
No build steps
No subscription fees (free and open-source)
No account required *
No limits for usage (unlimited private projects)
90+ languages/frameworks/processors
Large set of features and integrations
Import code from a wide variety of sources
Use modules from npm, deno.land/x, jsr, GitHub, and others
Easily embed it in your web pages
It runs in the browser (client-side)

* GitHub account is required only for features that use GitHub Integration.

Quick Start

Standalone App

Go to livecodes.io

... and enjoy all the features!

Embedded Playground

Add this…

View on GitHub

A powerful backend ready for your next app 🚀

Hatem Hosny — Sat, 28 Nov 2020 01:05:35 +0000

I am a primarily frontend developer.

Whenever I start a new project I keep going into the dilemma of:

Which backend?
Which database?
Which hosting provider?
Which complexity for the cloud service provider will I have to go through this time?
What if I need later on to move to another provider?
Should I go serverless?
Do I need authentication? should I use a 3rd party service for that?
How to handle HTTPS certificates issuing and renewal?
How about the CI/CD setup?
How to get a convenient local development environment that also matches production deployment?

Services like Firebase and AWS Amplify, have always been appealing. However, I felt uncomfortable with having marked restrictions on the database design (with lots of de-normalization) because of pay-per-read model. I know, I know, this is how NoSQL works, but still I was not happy. In addition, I do not want to pay $30K in 72 hours because of a coding mistake. And then not be able to do a basic full-text search!

Serverless can be very cost-effective on small scale but can be quite expensive on large scales. I want to have a predictable budget.

In addition, the ease of local development with a cloud backend was concerning. There are many good solutions or workarounds for all of these questions, but none felt as easy and flexible for the requirements of different projects.

All of that, and we have not even started talking about what I care about most, my app!

Frontend development has become complex enough to also get distracted by all of these questions.

Recently, I have come across Parse server. It is a project that was acquired by Facebook (parse.com) and was later open-sourced when they decided to stop providing the cloud service. It is such a nice project that ticks nearly all my boxes.

So, I created a monorepo starter project that is managed by Docker Compose which runs the feature-rich ready-to-use setup that works out of the box for local development and can be easily deployed.

You can find it on github:

hatemhosny / parse-starter

A powerful backend ready for your next app 🚀

Feature Summary

Parse server: Backend-as-a-Service (BaaS) that features:
- SDKs for popular platforms
- REST API
- Graphql API
- LiveQuery for realtime apps
- Security features including authentication, users, roles, access control lists (ACL) and class-level permissions (CLP)
- 3rd party authentication
- Push notifications
- Adapters for file storage and caching
- Analytics
- Cloud code for custom server-side logic
- Web hooks
- Runs on top of Express allowing the use of Express middleware
- Comprehensive documentation
- Large community
MongoDB database.
Parse dashboard (optional): a powerful dashboard for managing the parse server.
API-First Headless CMS (optional): using chisel-cms.
A sample realtime frontend app.
Automatic HTTPS for the frontend and backend using Caddy server.
Reproducible setup using Docker containers managed by a single Docker Compose file.
Local development workflow with hot reload for frontend and backend.
Easy deployment.
CI/CD (continuous integration and deployment): using github actions.
Optional deployment to multiple environments (e.g. development, staging and production).
Highly configurable.
The whole stack is open source with no vendor lock-in or pay-per-request restrictions.

Getting Started

Run the shell command:

docker-compose up

By default, the following will be served:

parse server backend: https://localhost:1337/api
parse graphql API: https://localhost:1337/graphql
parse dashboard: https://localhost:1337/dashboard
frontend local dev server (with HMR): https://localhost:1234

After production build:

frontend app: https://localhost

When CMS is enabled:

chisel CMS: https://localhost:1337

Now you can edit/replace the app in the frontend directory and start building your own app making use of the feature-rich backend.

Deployment

Docker and Docker Compose significantly simplify deployment. All the setup and dependencies are already taken care of in the docker images.

So, in principle, the steps required for deployment are:

Defining the variables for the deployment environment.
Building the docker images and verifying them.
Running the containers on the host server.

Although this can be done manually, it is greatly simplified using the included automated CI/CD setup that uses github actions.

Quick Start

Assuming you can connect using SSH to your server which has Docker and Docker Compose installed (see Server Setup), and that you have a github personal access token (see Container Registry), add the following Github Secrets:

PROD_DOCKER_REGISTRY_TOKEN: your personal github access token
PROD_SSH_HOST: your server IP address
PROD_SSH_KEY: your server SSH private key
PROD_ENV_VARS: edit the following example with your values

  HOST_NAME=mywebsite.com
  APP_ID=myappid
  MASTER_KEY=mymasterkey
  PARSE_DASHBOARD_USER_ID=user
  PARSE_DASHBOARD_USER_PASSWORD=pass

Note: The environment variable HOST_NAME is required for remote deployment.

Now pushing code to main/master branch should trigger build and deploy to your server. Note that you can follow the progress and read logs of CI/CD workflows on the "Actions" tab in the gihub repo.

That's it!

You have launched your powerful backend locally and deployed it within a few minutes.

You can find the documentation and configuration details in the github repo: https://github.com/hatemhosny/parse-starter

This is clearly not the magic bullet that solves all the problems of the world, but it has made my life easier, and I hope it makes yours too.

Please let me know your suggestions/advices/comments, and I would be very grateful for contributions.

Happy coding, go build some great apps!