Publishing /Embedding

Publishing

Embedding

Put a live codetoy on your website, blog or course page with an iframe, showing either the code and preview or just the game.

There are two ways to embed:

Embed the codetoy Embed a build
Shows Code editor + live preview Just the game, full frame
URL https://codetoy.io/<id> https://<build-id>.codetoy.dev/
Updates Always the latest saved code Fixed to one captured version
Languages All AssemblyScript
Good for Tutorials, explanations, "try it" demos Showing off a finished game

#Embed the codetoy

Every codetoy has a short link: open it and copy the id from the address bar (codetoy.io/codetoys/EZxvFO → EZxvFO). Then drop it into an iframe:

HTML
<iframe
  src="https://codetoy.io/EZxvFO"
  title="My codetoy"
  style="width: 100%; max-width: 720px; aspect-ratio: 4 / 3; border: 0; border-radius: 12px;"
  allow="fullscreen; clipboard-write"
  loading="lazy"
></iframe>

When Codetoy detects it's inside an iframe, it hides parts of the interface that don't make sense in an embed. Visitors can edit and run the code right there, but their changes aren't saved to your codetoy.

Note

Only codetoys other people can open can be embedded. If an embed shows an error for logged-out visitors, check your codetoy's visibility.

#Embed just the game

For a clean, game-only embed, use a build URL:

HTML
<iframe
  src="https://3f9c2a1e-7b4d-4c1a-9e8f-2d6b5a0c4e71.codetoy.dev/"
  title="Sky Hopper"
  style="width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #000;"
  allow="fullscreen; autoplay"
  loading="lazy"
></iframe>

The game fills the iframe and resizes with it, so your code's screen.width()Screen.Widthwidth() and screen.height()Screen.Heightheight() always match the frame. A build is fixed to the version you captured. To update the embed, capture a new build and change the src.

#Making embeds responsive

Use width: 100% with an aspect-ratio so the embed scales with the page. If you need a fixed size, set explicit width and height instead. Codetoy adapts either way.

HTML
<div style="max-width: 800px; margin: 0 auto;">
  <iframe
    src="https://codetoy.io/EZxvFO"
    title="My codetoy"
    style="display: block; width: 100%; aspect-ratio: 16 / 10; border: 0;"
    loading="lazy"
  ></iframe>
</div>

#Keyboard input in embeds

Browsers only send keyboard events to an iframe after someone clicks it. If your codetoy uses the keyboard, show a "Click to play" message until the first click or tap.

#Live example

Esc

Popular