Ruby (Wasm)

Ruby is a dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write.

LiveCodes uses ruby.wasm to run Ruby in the browser.

ruby.wasm is a collection of WebAssembly ports of the CRuby. It enables running Ruby application on browsers, WASI compatible WebAssembly runtimes, and Edge Computing platforms.

ruby.github.io/ruby.wasm/

Note

LiveCodes also supports running Ruby using Opal which is a Ruby to JavaScript source-to-source compiler. Read documentation here.

Usage

LiveCodes runs Ruby in the browser, including the stdlib.

JavaScript interoperability and DOM access is achieved using "JS" module. See the starter template for an example.

Language Info

Name

ruby-wasm

Extension

.wasm.rb

Alias

rubywasm

Editor

script

Compiler

ruby.wasm

Version

ruby.wasm v2.7.2, running Ruby v3.4

Code Formatting

Not supported for Ruby.

Example Usage

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "params": {
    "ruby-wasm": "class User\n  attr_accessor :name\n\n  def initialize(name)\n    @name = name\n  end\n\n  def admin?\n    @name == 'Admin'\n  end\nend\n\nuser = User.new('Bob')\n\n# the output will go to the console\nputs user\nputs user.admin?\n",
    "console": "full"
  }
};
createPlayground('#container', options);

TS

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

const options: EmbedOptions = {
  "params": {
    "ruby-wasm": "class User\n  attr_accessor :name\n\n  def initialize(name)\n    @name = name\n  end\n\n  def admin?\n    @name == 'Admin'\n  end\nend\n\nuser = User.new('Bob')\n\n# the output will go to the console\nputs user\nputs user.admin?\n",
    "console": "full"
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "params": {
    "ruby-wasm": "class User\n  attr_accessor :name\n\n  def initialize(name)\n    @name = name\n  end\n\n  def admin?\n    @name == 'Admin'\n  end\nend\n\nuser = User.new('Bob')\n\n# the output will go to the console\nputs user\nputs user.admin?\n",
    "console": "full"
  }
};
  return (<LiveCodes {...options} />);
}

Vue

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

const options = {
  "params": {
    "ruby-wasm": "class User\n  attr_accessor :name\n\n  def initialize(name)\n    @name = name\n  end\n\n  def admin?\n    @name == 'Admin'\n  end\nend\n\nuser = User.new('Bob')\n\n# the output will go to the console\nputs user\nputs user.admin?\n",
    "console": "full"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

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

const options = {
  "params": {
    "ruby-wasm": "class User\n  attr_accessor :name\n\n  def initialize(name)\n    @name = name\n  end\n\n  def admin?\n    @name == 'Admin'\n  end\nend\n\nuser = User.new('Bob')\n\n# the output will go to the console\nputs user\nputs user.admin?\n",
    "console": "full"
  }
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "params": {
    "ruby-wasm": "class User\n  attr_accessor :name\n\n  def initialize(name)\n    @name = name\n  end\n\n  def admin?\n    @name == 'Admin'\n  end\nend\n\nuser = User.new('Bob')\n\n# the output will go to the console\nputs user\nputs user.admin?\n",
    "console": "full"
  }
};
  return (<LiveCodes {...options} />);
}

Preact

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "params": {
    "ruby-wasm": "class User\n  attr_accessor :name\n\n  def initialize(name)\n    @name = name\n  end\n\n  def admin?\n    @name == 'Admin'\n  end\nend\n\nuser = User.new('Bob')\n\n# the output will go to the console\nputs user\nputs user.admin?\n",
    "console": "full"
  }
};
  return (<LiveCodes {...options} />);
}

Web Components

<live-codes></live-codes>

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

  const playground = document.querySelector("live-codes");
  playground.params = {
    "ruby-wasm": "class User\n  attr_accessor :name\n\n  def initialize(name)\n    @name = name\n  end\n\n  def admin?\n    @name == 'Admin'\n  end\nend\n\nuser = User.new('Bob')\n\n# the output will go to the console\nputs user\nputs user.admin?\n",
    "console": "full"
  };
</script>

This example demonstrates stdlib usage, JavaScript interoperability and DOM access:

show code

JS

import { createPlayground } from 'livecodes';

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

TS

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

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

React

import LiveCodes from 'livecodes/react';

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

Vue

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

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

Svelte

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

const options = {
  "template": "ruby-wasm"
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

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

Preact

import LiveCodes from 'livecodes/preact';

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

Web Components

<live-codes
  template="ruby-wasm"></live-codes>

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

Starter Template

https://livecodes.io/?template=ruby-wasm

Links

• Ruby
• Ruby documentation
• ruby.wasm
• Ruby using Opal in LiveCodes