An embeddable interactive code editor.

What is codefence?

codefence.io is an easy to embed editor and compiler for over 25 server-side programming languages.

Everything is run securely inside dedicated sandboxed Docker containers and, once executed, destroyed. We never store your code on our servers, and only the results are cached (you can opt-out of this as well).

Perfect for examples, tutorials, and technical documentation, allowing the reader to interact with the code and make changes.

Hosted on the Netlifyglobal CDN and cached with Fastly, we provide the best possible experience for your readers.

Features

  • High performance 16 core AMD Epyc powered sandboxes
  • Support for over 25 server-side programming languages
  • Multipile versions of a many different languages
  • Secure sandboxed environments
  • No language limitations or sandbox restrictions
  • Inbound network access
  • Capture and display std::out and std::err
  • Binary and ASCII mode file exporting
  • CDN hosted sandbox artifacts
  • Embedded artifacts directly in the results
  • Simple testing utilities to check results

Supported Languages

  • Ada gnatmake 7.5.0
  • C / C++ gcc 10.0.1
  • C# .NET Core 3.1.201 with dotnet-script
  • Clojure 1.10.1 with Java adopt-openjdk-13.0.2+8
  • Crystal 0.34.0 with LLVM 8.0.0
  • D dmd 2.092.0
  • Dart 2.8.2
  • Elixir 1.10.3 with Erlang 22.3.4
  • Erlang 22.3.4
  • Forth gforth 0.7.3
  • GNU Assembly gcc 7.5.0
  • Go 1.14.3
  • Haskell 8.10.1
  • Java adopt-openjdk-13.0.2+8
  • JavaScript Node.js 14.2.0
  • Kotlin 1.3.72 with Java adopt-openjdk-8u252-b09
  • Lua 5.3.5
  • Perl 5.26.1
  • PHP 7.4.6
  • Python 3.8.3
  • R 3.6.3
  • Raku 2020.05.1 on MoarVM 2020.05
  • Ruby 2.7.1
  • Rust 1.43.1
  • Scala 2.11.8 with Java adopt-openjdk-8u252-b09
  • Swift 5.2.2
  • TypeScript Deno 1.0.0
  • Zig 0.6.0

See the Hello World section below for an example of all supported languages.

We try to keep the latest version available, if something is out of date or if you would like to request other languages, let us know.

With WordPress

If you are using WordPress, we have a plugin available, all you have to do is install our plugin and you will find a codefence block directly inside the Gutenber editor.

With GatsbyJS

If you are using Gatsby, James Simone wrote a plugin thats hooks into gatsby-transformer-remark to add codefence support.

All other sites

It's simple, just add this snippet somewhere in your pages head.

<link href="//codefence.io/codefence.css" rel="stylesheet">
<script defer type="text/javascript" src="//codefence.io/codefence.js"></script>

Component Usage

<code-fence lang="language" version="version" heading="heading" artifact="fileA.ext,fileB.ext">
<textarea vue-slot="code">
// your code here
</textarea>
</code-fence>

The lang attribute should be the extension or short name of the language you'd like the editor to function in (e.g., py or python, rust or rs).

The version attribute allows you to target different versions of a language, see the version section for more information.

The heading attribute allows you to set the components styled heading.

The artifact attribute allows you to specify a single file or comma-separated list of files to be exported and included in the resulting output. codefence embeds exported files for the text/plain, image/*, and video/* mime types; others render as a link. We automatically delete artifacts after 1 day, so we do not recommend hotlinking to them.

Example Usages

This is a simple example with no heading and no artifact.

<code-fence lang="js">
<textarea vue-slot="code">
console.log("Hello World from Node!");
</textarea>
</code-fence>

There may be times when you need to disable caching, to do that set cache="false" on the <code-fence /> element.

<code-fence lang="haskell" cache="false" heading="Disable Caching">
<textarea vue-slot="code">
-- this example disables cache and will always compile on-demand
import Data.Time

main = do
    getCurrentTime >>= print
</textarea>
</code-fence>

This example targets a different language version.

<code-fence lang="lua" version="luajit-2.0.5" heading="LuaJIT 2.0.5">
<textarea vue-slot="code">
-- targeting luajit 2.0.5, codefence default is lua 5.3.5
print(jit.version)
</textarea>
</code-fence>

This is an example with a custom heading and ASCII mode file export.

<code-fence lang="rust" heading="Export a File" artifact="output.txt">
<textarea vue-slot="code">
static MYSTRING: &str = "Hello World from a file!";

use std::fs::File;
use std::io::prelude::*;
use std::path::Path;

fn main() {
  let path = Path::new("output.txt");
  let display = path.display();

  let mut file = match File::create(&path) {
      Err(why) => panic!("couldn't create {}: {}", display, why.to_string()),
      Ok(file) => file,
  };

  match file.write_all(MYSTRING.as_bytes()) {
      Err(why) => panic!("couldn't write to {}: {}", display, why.to_string()),
      Ok(_) => println!("successfully wrote to {}", display),
  }
}
</textarea>
</code-fence>

This is an example with a custom heading and an image mode file export.

<code-fence lang="py" heading="Export an Image" artifact="example.png">
<textarea vue-slot="code">
import matplotlib.pyplot as plt
import numpy as np

def fahrenheit2celsius(temp):
    return (5. / 9.) * (temp - 32)

def convert_ax_c_to_celsius(ax_f):
    y1, y2 = ax_f.get_ylim()
    ax_c.set_ylim(fahrenheit2celsius(y1), fahrenheit2celsius(y2))
    ax_c.figure.canvas.draw()

fig, ax_f = plt.subplots()
ax_c = ax_f.twinx()

ax_f.callbacks.connect("ylim_changed", convert_ax_c_to_celsius)
ax_f.plot(np.linspace(-40, 120, 100))
ax_f.set_xlim(0, 100)

ax_f.set_title('Two scales: Fahrenheit and Celsius')
ax_f.set_ylabel('Fahrenheit')
ax_c.set_ylabel('Celsius')

plt.savefig('example.png')
</textarea>
</code-fence>

How our caching works

We hash the contents and attributes of the element to generate an ETag, this re-validates responses on the server-side, only executing when code has changed. Responses are then cached on Fastly's global CDN to improve performance further.

If you would like to opt-out of caching, perhaps your code is date senesitive or for privacy reasons, set cache="false" on the <code-fence /> element.

How long we cache for

We cache successful compiles and CDN artifacts for 24 hours. Unsuccessful compiles are cached for 12 hours as long as we know why the compile failed; in the rare case we do not, they are not cached.

Language Versions

A codefence can target different language versions using the version="version" attribute.

Here are a list of versions available:

  • C
    • 10.0.1 (default) -Wall -std=c11
    • 9.3.0 -Wall -std=c11
    • 8.4.0 -Wall -std=c11
    • 7.5.0 -Wall -std=c11
  • C++
    • 10.0.1 (default) -Wall -std=c++2a
    • 9.3.0 -Wall -std=c++17
    • 8.4.0 -Wall -std=c++14
    • 7.5.0 -Wall -std=c++11
  • Java
    • adopt-openjdk-13.0.2+8 (default)
    • adopt-openjdk-8u252-b09
  • Lua
    • 5.3.5 (default)
    • 5.2.4
    • 5.1.5
    • luajit-2.0.5
  • Python
    • 3.8.2 (default)
    • 2.7.18
If you would like to request other versions, let us know and we'll see about adding it.

Testing

codefence has a very simple testing utility, allowing you to very console output.

Output is checked against the test string, allowing for wildcard * placements.

<code-fence lang="js" heading="Hello World with Tests">
<textarea vue-slot="code">
const name = "Ben";
console.log(`Hello ${name}, how are you today?`);
</textarea>
<textarea vue-slot="test" name="Test Output">
Hello *, how are you today?
</textarea>
</code-fence>

Hello World

Here you can find a Hello World in all supported languages. Feel free to play around and try your own code!

GNU Assembly is compiled with these flags, -nostdlib -no-pie.