Scheme

Scheme is a classic programming language in the Lisp family. It emphasizes functional programming and domain-specific languages but adapts to other styles.

In LiveCodes, Scheme code runs in the browser using BiwaScheme, a Scheme interpreter written in JavaScript.

Note

Lisp language family supported in LiveCodes includes Common Lisp, Scheme, ClojureScript and Fennel.

Usage

LiveCodes runs Scheme code in the browser. BiwaScheme implements most of the features of R7RS small, including first-class continuation and tail call optimization.

Example:

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "activeEditor": "script",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, <span id=\"title\">World</span>!</h1>\n  <img class=\"logo\" alt=\"logo\" src=\"https://livecodes.io/livecodes/assets/templates/scheme.svg\" />\n  <p>You clicked <span id=\"counter\">0</span> times.</p>\n  <button id=\"counter-button\">Click me</button>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".container,\n.container button {\n  text-align: center;\n  font: 1em sans-serif;\n}\n.logo {\n  width: 150px;\n}\n"
    },
    "script": {
      "language": "scheme",
      "content": "(let ((title \"Scheme\"))\n  (set-content! \"#title\" title))\n\n(let ((counter 0))\n(add-handler! \"#counter-button\" \"click\"\n(lambda (ev)\n(set! counter (+ counter 1))\n(set-content! \"#counter\" (number->string counter)))))\n\n; check console\n(let ((time-now (date-hour (current-date))))\n(console-log\n(cond ((< time-now 12) \"Good morning\")\n((< time-now 18) \"Good afternoon\")\n(else \"Good evening\"))))\n"
    }
  }
};
createPlayground('#container', options);

TS

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

const options: EmbedOptions = {
  "config": {
    "activeEditor": "script",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, <span id=\"title\">World</span>!</h1>\n  <img class=\"logo\" alt=\"logo\" src=\"https://livecodes.io/livecodes/assets/templates/scheme.svg\" />\n  <p>You clicked <span id=\"counter\">0</span> times.</p>\n  <button id=\"counter-button\">Click me</button>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".container,\n.container button {\n  text-align: center;\n  font: 1em sans-serif;\n}\n.logo {\n  width: 150px;\n}\n"
    },
    "script": {
      "language": "scheme",
      "content": "(let ((title \"Scheme\"))\n  (set-content! \"#title\" title))\n\n(let ((counter 0))\n(add-handler! \"#counter-button\" \"click\"\n(lambda (ev)\n(set! counter (+ counter 1))\n(set-content! \"#counter\" (number->string counter)))))\n\n; check console\n(let ((time-now (date-hour (current-date))))\n(console-log\n(cond ((< time-now 12) \"Good morning\")\n((< time-now 18) \"Good afternoon\")\n(else \"Good evening\"))))\n"
    }
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "script",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, <span id=\"title\">World</span>!</h1>\n  <img class=\"logo\" alt=\"logo\" src=\"https://livecodes.io/livecodes/assets/templates/scheme.svg\" />\n  <p>You clicked <span id=\"counter\">0</span> times.</p>\n  <button id=\"counter-button\">Click me</button>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".container,\n.container button {\n  text-align: center;\n  font: 1em sans-serif;\n}\n.logo {\n  width: 150px;\n}\n"
    },
    "script": {
      "language": "scheme",
      "content": "(let ((title \"Scheme\"))\n  (set-content! \"#title\" title))\n\n(let ((counter 0))\n(add-handler! \"#counter-button\" \"click\"\n(lambda (ev)\n(set! counter (+ counter 1))\n(set-content! \"#counter\" (number->string counter)))))\n\n; check console\n(let ((time-now (date-hour (current-date))))\n(console-log\n(cond ((< time-now 12) \"Good morning\")\n((< time-now 18) \"Good afternoon\")\n(else \"Good evening\"))))\n"
    }
  }
};
  return (<LiveCodes {...options} />);
}

Vue

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

const options = {
  "config": {
    "activeEditor": "script",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, <span id=\"title\">World</span>!</h1>\n  <img class=\"logo\" alt=\"logo\" src=\"https://livecodes.io/livecodes/assets/templates/scheme.svg\" />\n  <p>You clicked <span id=\"counter\">0</span> times.</p>\n  <button id=\"counter-button\">Click me</button>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".container,\n.container button {\n  text-align: center;\n  font: 1em sans-serif;\n}\n.logo {\n  width: 150px;\n}\n"
    },
    "script": {
      "language": "scheme",
      "content": "(let ((title \"Scheme\"))\n  (set-content! \"#title\" title))\n\n(let ((counter 0))\n(add-handler! \"#counter-button\" \"click\"\n(lambda (ev)\n(set! counter (+ counter 1))\n(set-content! \"#counter\" (number->string counter)))))\n\n; check console\n(let ((time-now (date-hour (current-date))))\n(console-log\n(cond ((< time-now 12) \"Good morning\")\n((< time-now 18) \"Good afternoon\")\n(else \"Good evening\"))))\n"
    }
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

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

const options = {
  "config": {
    "activeEditor": "script",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, <span id=\"title\">World</span>!</h1>\n  <img class=\"logo\" alt=\"logo\" src=\"https://livecodes.io/livecodes/assets/templates/scheme.svg\" />\n  <p>You clicked <span id=\"counter\">0</span> times.</p>\n  <button id=\"counter-button\">Click me</button>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".container,\n.container button {\n  text-align: center;\n  font: 1em sans-serif;\n}\n.logo {\n  width: 150px;\n}\n"
    },
    "script": {
      "language": "scheme",
      "content": "(let ((title \"Scheme\"))\n  (set-content! \"#title\" title))\n\n(let ((counter 0))\n(add-handler! \"#counter-button\" \"click\"\n(lambda (ev)\n(set! counter (+ counter 1))\n(set-content! \"#counter\" (number->string counter)))))\n\n; check console\n(let ((time-now (date-hour (current-date))))\n(console-log\n(cond ((< time-now 12) \"Good morning\")\n((< time-now 18) \"Good afternoon\")\n(else \"Good evening\"))))\n"
    }
  }
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "script",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, <span id=\"title\">World</span>!</h1>\n  <img class=\"logo\" alt=\"logo\" src=\"https://livecodes.io/livecodes/assets/templates/scheme.svg\" />\n  <p>You clicked <span id=\"counter\">0</span> times.</p>\n  <button id=\"counter-button\">Click me</button>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".container,\n.container button {\n  text-align: center;\n  font: 1em sans-serif;\n}\n.logo {\n  width: 150px;\n}\n"
    },
    "script": {
      "language": "scheme",
      "content": "(let ((title \"Scheme\"))\n  (set-content! \"#title\" title))\n\n(let ((counter 0))\n(add-handler! \"#counter-button\" \"click\"\n(lambda (ev)\n(set! counter (+ counter 1))\n(set-content! \"#counter\" (number->string counter)))))\n\n; check console\n(let ((time-now (date-hour (current-date))))\n(console-log\n(cond ((< time-now 12) \"Good morning\")\n((< time-now 18) \"Good afternoon\")\n(else \"Good evening\"))))\n"
    }
  }
};
  return (<LiveCodes {...options} />);
}

Preact

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "script",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, <span id=\"title\">World</span>!</h1>\n  <img class=\"logo\" alt=\"logo\" src=\"https://livecodes.io/livecodes/assets/templates/scheme.svg\" />\n  <p>You clicked <span id=\"counter\">0</span> times.</p>\n  <button id=\"counter-button\">Click me</button>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".container,\n.container button {\n  text-align: center;\n  font: 1em sans-serif;\n}\n.logo {\n  width: 150px;\n}\n"
    },
    "script": {
      "language": "scheme",
      "content": "(let ((title \"Scheme\"))\n  (set-content! \"#title\" title))\n\n(let ((counter 0))\n(add-handler! \"#counter-button\" \"click\"\n(lambda (ev)\n(set! counter (+ counter 1))\n(set-content! \"#counter\" (number->string counter)))))\n\n; check console\n(let ((time-now (date-hour (current-date))))\n(console-log\n(cond ((< time-now 12) \"Good morning\")\n((< time-now 18) \"Good afternoon\")\n(else \"Good evening\"))))\n"
    }
  }
};
  return (<LiveCodes {...options} />);
}

Web Components

<live-codes></live-codes>

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

  const playground = document.querySelector("live-codes");
  playground.config = {
    "activeEditor": "script",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, <span id=\"title\">World</span>!</h1>\n  <img class=\"logo\" alt=\"logo\" src=\"https://livecodes.io/livecodes/assets/templates/scheme.svg\" />\n  <p>You clicked <span id=\"counter\">0</span> times.</p>\n  <button id=\"counter-button\">Click me</button>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": ".container,\n.container button {\n  text-align: center;\n  font: 1em sans-serif;\n}\n.logo {\n  width: 150px;\n}\n"
    },
    "script": {
      "language": "scheme",
      "content": "(let ((title \"Scheme\"))\n  (set-content! \"#title\" title))\n\n(let ((counter 0))\n(add-handler! \"#counter-button\" \"click\"\n(lambda (ev)\n(set! counter (+ counter 1))\n(set-content! \"#counter\" (number->string counter)))))\n\n; check console\n(let ((time-now (date-hour (current-date))))\n(console-log\n(cond ((< time-now 12) \"Good morning\")\n((< time-now 18) \"Good afternoon\")\n(else \"Good evening\"))))\n"
    }
  };
</script>

JS Interoperability

See BiwaScheme docs.

Language Info

Name

scheme

Extensions

.scm

Editor

script

Compiler

BiwaScheme, a Scheme interpreter written in JavaScript.

Version

biwascheme: v0.8.0

Code Formatting

Using Parinfer.

Limitations

BiwaScheme implements most of the features of R7RS small, however some features are not supported. See the BiwaScheme documentation for more information.

Starter Template

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

Links

• Scheme Programming Language
• BiwaScheme
• The Scheme Programming Language (4th Edition)
• Structure and Interpretation of Computer Programs