Teal

Teal is a typed dialect of Lua.

Teal code is compiled to Lua, which then runs in the browser using Fengari. See documentation for Lua language support in LiveCodes here.

Usage

JavaScript interoperability and DOM access is achieved using "js" module.

This example demonstrates usage, JavaScript interoperability and DOM access:

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "template": "teal"
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "template": "teal"
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "template": "teal"
};
  return (<LiveCodes {...options} />);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "template": "teal"
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "template": "teal"
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "template": "teal"
};
  return (<LiveCodes {...options} />);
}

Preact

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "template": "teal"
};
  return (<LiveCodes {...options} />);
}

Web Components

<live-codes
  template="teal"></live-codes>

<script type="module">
  import "livecodes/web-components";
</script>

Language Info

Name

teal

Extension

.tl

Editor

script

Compiler

Teal

Version

Teal v0.15.2

Code Formatting

Using lua-fmt.

Starter Template

https://livecodes.io/?template=teal

Links

• Teal
• Teal documentation
• Teal tutorial
• Lua
• Lua documentation
• Fengari
• lua in LiveCodes
• lua-wasm in LiveCodes