Embed a code editor that runs the code, on any web page

This is the editor. Change the code and press Run:

Add it with a script tag

Create a widget key in your dashboard, then add the script and a div for each editor. The code goes in a <pre> inside it, and optional standard input in a <pre data-stdin>:

<!-- Once per page, or once in your site's layout -->
<script src="https://onlinecompiler.io/widget.js"></script>

<!-- Each editor -->
<div class="runcode" data-key="YOUR_WIDGET_KEY" data-lang="python-3.14" data-theme="light">
<pre>
name = input("What's your name? ")
print(f"Hello, {name}!")
</pre>
<pre data-stdin>Ada</pre>
</div>

data-lang takes any compiler id from the language list. data-theme is dark, light or auto, data-readonly locks the code, and the editor renders in Shadow DOM, so your page's CSS and the editor's stay apart. Editors only connect when they scroll near the screen, so a long page of examples stays fast.

Or with an iframe

Many course platforms, site builders and wikis strip script tags but allow an iframe. For those, the embed page holds one editor that fills the frame, with the code and input after the #:

<iframe src="https://api.onlinecompiler.io/embed/?key=YOUR_WIDGET_KEY&amp;lang=python-3.14&amp;theme=light#code=name%20%3D%20input(%22What's%20your%20name%3F%20%22)%0Aprint(f%22Hello%2C%20%7Bname%7D!%22)&amp;input=Ada"
  title="Runnable Python example" width="100%" height="400" style="border: 0" loading="lazy"></iframe>

The embed builder in the docs writes this for you from your code. A key locked to your domain can only be framed by pages on that domain.

Check answers with the JavaScript API

Each editor fires runcode:run, runcode:result and runcode:error events, and OnlineCompilerWidget.get(div) gives you getCode, setCode, run and reset. This exercise tells the reader whether their answer is right:

<div class="runcode" id="exercise" data-key="YOUR_WIDGET_KEY" data-lang="python-3.14">
<pre># Print the sum of the numbers from 1 to 10
print()</pre>
</div>
<p id="verdict"></p>

<script>
  document.getElementById("exercise").addEventListener("runcode:result", (event) => {
    const { exit_code, output } = event.detail;
    const correct = exit_code === 0 && output.trim() === "55";
    document.getElementById("verdict").textContent = correct ? "Correct!" : "Not yet, try again.";
  });
</script>

A hidden template can wrap the reader's code, so they edit only a function body while your test code runs around it. To grade on your server instead, with hidden tests and a score, send the code to the run tests API.

Where people use it

• Docs sites: setups for Docusaurus, MkDocs, Sphinx, Mintlify and WordPress are in runnable code examples in docs.
• Courses and classrooms: exercises students can run without an account, in the page or in an LMS iframe. Teachers moving off Trinket can start with the Trinket alternative.
• Blogs and tutorials: one editor per example, in any of the 45 languages, from Python and Java to Rust and SQL.

How it compares with other embeddable editors

If all you need is free runs in as many languages as possible, OneCompiler's and JDoodle's embeds give more of both. Ours fits when the example's code should live in your own page, when you want to check answers or wrap hidden code, or when the same account also runs code from your backend.

Frequently asked questions

How do I embed a code editor in a web page?

Add the script https://onlinecompiler.io/widget.js once, then a div with class runcode, your widget key and a language, with your code in a <pre> inside it. Readers can edit and run the code in any of 45 languages. Where a site strips script tags, paste an iframe of https://api.onlinecompiler.io/embed/ instead.

Is the embeddable code editor free?

Yes, up to 100,000 runs a month across all your editors and API calls, commercial use included, with no credit card. Readers don't need an account.

Does the embedded editor run the code, or only highlight it?

It runs it. Each run goes to our servers, executes in a fresh sandbox with no network access, and the output, errors, exit code, run time and memory come back to the editor.

Can I check whether a reader's answer is right?

Yes. The editor fires a runcode:result event with the output and exit code, so a few lines of JavaScript on your page can compare them with the expected answer. Hidden template code can wrap the reader's code, so they only edit the part that matters.

Can I embed it in an LMS, site builder or wiki that only allows iframes?

Yes, if the platform accepts an iframe. The iframe embed takes the code and input after the # in its URL, so each example is one iframe and the code never reaches a server log.

Is the widget key a secret?

No. Widget keys are meant to sit in public HTML: they only work for the editor, cannot call the REST API, and can be locked to your domain.