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.

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