Embedding Codetoy

Codetoy allows you to embed interactive multiplayer game development playgrounds directly into your website or documentation. This guide explains how to embed any Codetoy project directly into your own website.

Overview

The Codetoy embedding feature lets you:

• Create interactive JavaScript game examples
• Share playable multiplayer game demos
• Provide hands-on game programming experiences

Basic Embedding

To embed a Codetoy playground use the following url pattern {projectId}.project.codetoy.io/?embedded=true

<iframe
  allowfullscreen
  src="https://7a004431-3ffc-4e64-b5e4-fe46a9bcf241.project.codetoy.io/?embedded=true"
  class="w-full h-[535px]"
></iframe>

Which yields the following:

Query Parameters

autofocus

When ?autofocus is set to true the canvas will automatically become focused when the iframe loads.

This autofocus feature can be particularly useful in several scenarios:

1. Interactive Canvas Applications

   • When users need to immediately start typing or using keyboard controls
   • For games that require keyboard input right away
   • Drawing applications where immediate mouse/keyboard interaction is expected

2. User Experience Improvements

   • Eliminates the need for users to manually click the canvas to start interacting
   • Reduces friction in starting to use the application
   • Especially helpful in educational or tutorial environments

3. Example URL:

   // Example URL usage
   https://{projectId}.project.codetoy.io/?autofocus=true

However, be cautious with autofocus because:

• It can be disorienting for users, especially those using screen readers
• It might interrupt the natural tab order of the page
• Could be unexpected if the canvas isn't in the user's current viewport

Best practice is to use autofocus when:

• The canvas is the primary interaction point of the page
• Immediate interaction is expected/required
• The canvas is visible in the initial viewport

embedded

When ?embedded is set to true, renders the editor in embedded mode, which provides a minimal interface suitable for embedding in other websites or applications.

Warning: The ?embedded parameter is temporary and will be removed soon.