Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/henryhale/livecode

⚡️ Minimal code playground
https://github.com/henryhale/livecode

beginner-friendly code-playground codemirror6 henryhale live livecode-editor livecoding minimal vue vuejs

Last synced: about 2 months ago
JSON representation

⚡️ Minimal code playground

Awesome Lists containing this project

README

        

![](./public/brand.png)

LiveCode

A front-end code playground tool right in your browser. It's intended for use wherever possible most especially, live coding sessions for front-end developers.

![](./media/screenshot.png)

## Features

- Easy to use
- Minimal and fast
- Live updates and preview
- Builtin IDE with syntax highlighting, suggestions, and more
- Local storage for backup (CTRL + S to save and automatic restore)

## Demo

Try this demo online: [Click Here](https://henryhale.github.io/livecode)

## Why?

I needed an offline tool to quickly learn and test front-end code (the basics). There are many code playgrounds online that offer much more but I intended to create a minimal, zero-config and easy to use playground.

If you need a more fully fledged online code playground, try;

- [StackBlitz](https://stackblitz.com)
- [CodeSandbox](https://codesandbox.io)
- [CodePen](https://codepen.io)

## Get Started

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/henryhale/livecode)

## Install

To setup `LiveCode` locally, follow the steps below;

- Clone this repository

```sh
git clone https://github.com/henryhale/livecode.git
```

- Install all dependencies

```sh
pnpm install # or npm install or yarn install
```

- Run dev server

```sh
pnpm dev # or npm run dev or yarn run dev
```

## Bugs, Issues and Contributions

I'm glad you took time to check `LiveCode`. Thank you very much.

All contributions are welcome, please follow the steps [here](https://github.com/henryhale/livecode/blob/main/.github/CONTRIBUTING.md)

For any bug or issue, kindly open one [here](https://github.com/henryhale/livecode/issues).

## Credits

Thanks to these amazing projects, `LiveCode` heavily depends on them;

- [Vue.js](https://vuejs.org)
- [Vite.js](https://vitejs.dev)
- [TailwindCSS](https://tailwindcss.com)
- [CodeMirror](https://codemirror.net)
- [LowDB](https://github.com/typicode/lowdb)

## License

Released under [MIT License](./LICENSE.md)