Fennel

Fennel is a programming language that brings together the speed, simplicity, and reach of Lua with the flexibility of a lisp syntax and macro system.

Fennel 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": "fennel"
};
createPlayground('#container', options);

TS

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

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

React

import LiveCodes from 'livecodes/react';

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

Vue

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

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

Svelte

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

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

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

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

Preact

import LiveCodes from 'livecodes/preact';

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

Web Components

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

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

Language Info

Name

fennel

Extension

.fnl

Editor

script

Compiler

Fennel

Version

Fennel v1.3.0

Code Formatting

Using Parinfer.

Starter Template

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

Links

• Fennel
• Fennel tutorial
• Lua
• Fengari
• lua in LiveCodes
• Common Lisp in LiveCodes