embedtutorialsdk

How to Embed a Code Editor in Your Website

Step-by-step guide to embedding a live code editor in your blog, documentation, or course platform.

YaliCode TeamMarch 27, 20268 min read

# How to Embed a Code Editor in Your Website

Static code blocks are fine for showing syntax, but they cannot replace the experience of actually running code. If you build educational content, technical documentation, or developer tools, embedding a live code editor on your website lets readers interact with examples instead of just reading them.

This guide covers three approaches: the YaliCode Embed API, the `@yalicode/sdk` npm package, and a plain iframe fallback. By the end, you will have a working embedded editor on your site.

Why Embed a Code Editor?

Education and Courses

If you teach programming, embedded editors remove the biggest barrier for beginners: setting up a development environment. Students can run code directly in your lesson page without switching tabs or installing anything. This keeps them engaged and reduces drop-off.

Documentation

API documentation with runnable examples converts better than static code blocks. When developers can modify and execute your examples, they understand your API faster and are more likely to adopt it.

Blog Posts and Tutorials

Technical blog posts with live code examples get more engagement. Readers can experiment with variations, see output immediately, and build intuition — something a screenshot of a terminal can never provide.

Interview Platforms

If you are building a coding assessment tool, an embedded editor with execution support gives candidates a realistic coding environment without the overhead of managing your own sandboxed infrastructure.

Approach 1: YaliCode Embed API

The fastest way to embed a runnable code editor is with the YaliCode Embed API. You get a Monaco-based editor with syntax highlighting, code execution across 23 languages, and a console output panel — all in a single embed.

Basic Embed

Add this snippet to any HTML page:

```html

<iframe

src="https://yalicode.dev/embed?lang=python&theme=dark"

width="100%"

height="400"

frameborder="0"

allow="clipboard-read; clipboard-write"

sandbox="allow-scripts allow-same-origin allow-popups"

title="YaliCode Editor"

></iframe>

```

This renders a Python editor with a dark theme and a run button. Users can write code and execute it directly in the embed.

Embed Parameters

Customize the embed with URL parameters:

|-----------|--------|---------|-------------|

| `fontSize` | `12`-`24` | `14` | Editor font size |

Pre-Filled Code Example

Embed a specific code snippet by passing URL-encoded source code:

```html

<iframe

src="https://yalicode.dev/embed?lang=cpp&theme=dark&code=%23include%20%3Ciostream%3E%0Aint%20main()%20%7B%0A%20%20%20%20std%3A%3Acout%20%3C%3C%20%22Hello%20from%20embedded%20C%2B%2B!%22%3B%0A%20%20%20%20return%200%3B%0A%7D"

width="100%"

height="350"

frameborder="0"

allow="clipboard-read; clipboard-write"

sandbox="allow-scripts allow-same-origin allow-popups"

title="C++ Example"

></iframe>

```

Embed an Existing Project

If you have a saved project on YaliCode, embed it directly by project slug:

```html

<iframe

src="https://yalicode.dev/embed/p/yourname/my-project?theme=dark&readOnly=true"

width="100%"

height="500"

frameborder="0"

allow="clipboard-read; clipboard-write"

sandbox="allow-scripts allow-same-origin allow-popups"

title="My Project"

></iframe>

```

This renders the full project with file tree, editor, and console — read-only by default so visitors cannot modify the original.

Approach 2: @yalicode/sdk

For deeper integration, use the `@yalicode/sdk` npm package. This gives you programmatic control over the embedded editor: set code, run it, listen for output events, and dynamically change the language.

Installation

```bash

npm install @yalicode/sdk

```

React Example

```tsx

import { YaliCodeEditor } from '@yalicode/sdk/react';

export function CodePlayground() {

return (

<YaliCodeEditor

language="python"

theme="dark"

initialCode={`def greet(name):\n return f"Hello, {name}!"\n\nprint(greet("World"))`}

height="400px"

showConsole={true}

onRun={(output) => {

console.log('Execution output:', output);

}}

onError={(error) => {

console.error('Execution error:', error);

}}

);

}

```

The `<YaliCodeEditor>` component handles iframe creation, messaging, and lifecycle management. It renders the editor within your React component tree and exposes callbacks for execution events.

Vue Example

```vue

<YaliCodeEditor

language="javascript"

theme="dark"

:initial-code="code"

height="400px"

:show-console="true"

@run="handleRun"

@error="handleError"

</template>

import { YaliCodeEditor } from '@yalicode/sdk/vue';

const code = `const fibonacci = (n) => {

if (n <= 1) return n;

return fibonacci(n - 1) + fibonacci(n - 2);

};

for (let i = 0; i < 10; i++) {

console.log(\`fib(\${i}) = \${fibonacci(i)}\`);

}`;

const handleRun = (output) => {

console.log('Output:', output);

};

const handleError = (error) => {

console.error('Error:', error);

};

</script>

```

Imperative API

For non-framework usage or advanced control, use the core API directly:

```javascript

import { createEditor } from '@yalicode/sdk';

const editor = createEditor({

container: document.getElementById('editor-container'),

language: 'rust',

theme: 'dark',

height: '450px',

});

// Set code programmatically

editor.setCode(`fn main() {

let numbers: Vec<i32> = (1..=10).collect();

let sum: i32 = numbers.iter().sum();

println!("Sum of 1 to 10: {}", sum);

}`);

// Run the code

const result = await editor.run();

console.log(result.stdout); // "Sum of 1 to 10: 55"

// Change language on the fly

editor.setLanguage('python');

editor.setCode('print(sum(range(1, 11)))');

// Listen for events

editor.on('run', (output) => console.log(output));

editor.on('error', (error) => console.error(error));

// Clean up when done

editor.destroy();

```

Approach 3: Plain iframe

If you do not want a dependency and need maximum simplicity, a plain iframe pointing to the YaliCode editor works on any website, including static site generators, WordPress, and Notion embeds.

```html

<iframe

src="https://yalicode.dev/embed?lang=go&theme=dark"

style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"

frameborder="0"

allow="clipboard-read; clipboard-write"

sandbox="allow-scripts allow-same-origin allow-popups"

title="Go Editor"

></iframe>

</div>

```

The wrapper `div` with `padding-bottom: 56.25%` creates a responsive 16:9 aspect ratio container. The iframe fills it regardless of screen size.

Customization Options

Themes

The embed supports `dark` and `light` themes that adapt to your site's design. The dark theme uses a neutral gray background that works well on most dark-mode sites without clashing.

Panel Visibility

Control which panels appear in the embed:

```

?showConsole=true // Output panel below the editor

?showRunButton=true // Run button in the toolbar

?readOnly=true // Disable editing (view-only mode)

?lineNumbers=false // Hide line numbers for cleaner look

```

Combine parameters as needed: `?lang=python&theme=light&readOnly=true&showConsole=false` gives you a syntax-highlighted code viewer with no interactivity — useful for displaying code snippets with proper highlighting.

Responsive Sizing

The embed is fully responsive. Set `width="100%"` and a fixed `height` in pixels, or use the aspect-ratio wrapper shown above. Minimum recommended height is 300px for a comfortable editing experience with the console panel visible.

Pricing

The embed API follows YaliCode's standard pricing with one addition: branding.

|---------|------|------------------|--------------|

| Embeds per page | 3 | 10 | Unlimited |

| Code execution | 20/day (shared with account) | 100/day | 500/day |

| "Powered by YaliCode" badge | Yes | Yes | Removable |

| Custom domain CORS | No | Yes | Yes |

| Private embed projects | No | Yes | Yes |

The free tier includes a small "Powered by YaliCode" badge in the bottom-right corner of the embed. Starter plans keep the badge but add custom domain support. Pro plans let you remove the badge entirely for a white-label experience.

Implementation Tips

Performance

Each embed loads the Monaco editor and establishes a connection to the execution API. If you have multiple embeds on a single page, they share the same Monaco instance for faster loading. Still, keep it to three or fewer embeds per page for the best user experience.

Accessibility

The embedded editor supports keyboard navigation, screen reader announcements for execution output, and respects `prefers-reduced-motion` for animations. Add a descriptive `title` attribute to your iframe for screen readers.

Security

Embeds run in a sandboxed iframe with `allow-scripts allow-same-origin`. Code execution happens in isolated Docker containers on YaliCode's servers — no code runs on your domain or your users' machines. The sandbox attribute prevents the embed from accessing your page's DOM, cookies, or storage.

SEO

Search engines cannot index content inside iframes. For SEO purposes, include a static code block alongside (or as a fallback for) your embed. Use `<noscript>` to show the static version when JavaScript is disabled.

```html

</div>

<pre><code class="language-python">print("Hello, World!")</code></pre>

</noscript>

```

Get Started

The quickest path: copy the iframe snippet from [Approach 1](#approach-1-yalicode-embed-api), replace the `lang` and `code` parameters with your own, and paste it into your page. You will have a live, runnable code editor in under a minute.

For programmatic control, install `@yalicode/sdk` and use the React or Vue components. Check the full SDK documentation at [yalicode.dev/docs/embed](https://yalicode.dev/docs/embed).

Questions or feature requests? Reach out at [yalicode.dev](https://yalicode.dev).

Ready to code?

No account needed. Just open the editor and start building.

Open the editor