iframe Embed

TinyEmulator can be embedded into any website via iframe. This is the simplest integration method.

Basic Embed

<iframe
  src="https://play.tinyemulator.com"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
  allow="autoplay; fullscreen; gamepad"
></iframe>

Launch with Parameters

TinyEmulator supports two URL parameter formats:

EmulatorJS Compatible Format (Recommended)

The simplest way to load a game — compatible with EmulatorJS-style parameters:

<iframe
  src="https://play.tinyemulator.com?core=nes&rom=https://example.com/game.nes&gameName=Super Mario&single=1"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
  allow="autoplay; fullscreen; gamepad"
></iframe>

Parameters:

Parameter	Required	Description
`core`	Yes	Emulator core name (see core mapping table)
`rom`	Yes	ROM file URL (must be CORS-accessible)
`gameName`	No	Game display name
`single`	No	Single player mode (hide netplay): `1` or `0`

Core Name Mapping

EmulatorJS core	TinyEmulator type
`nes`	nes
`snes`	snes
`gba`	gba
`gb`	gb
`gbc`	gbc
`genesis`	genesis
`megadrive`	genesis
`n64`	n64
`psx`	psx
`arcade`	arcade
`fbneo`	arcade
`atari2600`	2600
`atari7800`	7800
`colecovision`	coleco
`ngp`	ngp
`pce`	pce
`segacd`	segacd

TinyEmulator Native Format (props)

Advanced format using Base64-encoded JSON for more control:

<iframe
  src="https://play.tinyemulator.com?props=eyJ0eXBlIjoibmVzIiwidGl0bGUiOi...&single=1"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
></iframe>

Encoding: Base64(encodeURIComponent(JSON.stringify(gameConfig)))

{
  "type": "nes",
  "title": "Super Mario Bros",
  "app": "nes",
  "uid": "unique-id",
  "rom": "https://example.com/game.nes"
}

Encoding helper (JavaScript):

function encodeProps(props) {
  return btoa(encodeURIComponent(JSON.stringify(props)));
}

const props = {
  type: "nes",
  title: "Super Mario",
  app: "nes",
  uid: "game-" + Date.now(),
  rom: "https://example.com/game.nes"
};

const url = "https://play.tinyemulator.com?props=" + 
  encodeURIComponent(encodeProps(props)) + "&single=1";

Migration from EmulatorJS

If you are currently using EmulatorJS, simply replace the iframe src:

Before (EmulatorJS):

<iframe
  src="https://www.emulatorjs.org/embed/NES?core=nes&rom=https://example.com/game.nes"
  ...
></iframe>

After (TinyEmulator):

<iframe
  src="https://play.tinyemulator.com?core=nes&rom=https://example.com/game.nes&single=1"
  ...
></iframe>

Complete Examples

Example 1: Full HTML Page

A complete standalone page with a game library and emulator:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Retro Game Site</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, sans-serif;
      background: #1a1a2e;
      color: #fff;
      padding: 20px;
      max-width: 1000px;
      margin: 0 auto;
    }
    h1 { margin-bottom: 20px; color: #64b5f6; }
    .game-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 12px;
      margin-bottom: 20px;
    }
    .game-card {
      background: #16213e;
      border: 2px solid #0f3460;
      border-radius: 8px;
      padding: 12px;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s;
    }
    .game-card:hover {
      border-color: #64b5f6;
      transform: translateY(-2px);
    }
    .game-card.active {
      border-color: #64b5f6;
      background: #0f3460;
    }
    .emulator-wrapper {
      position: relative;
      width: 100%;
      padding-bottom: 75%;
      background: #000;
      border-radius: 8px;
      overflow: hidden;
    }
    .emulator-wrapper iframe {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      border: none;
    }
  </style>
</head>
<body>
  <h1>🎮 Retro Games</h1>

  <div class="game-grid" id="gameGrid"></div>

  <div class="emulator-wrapper">
    <iframe
      id="emulator"
      src="about:blank"
      allowfullscreen
      allow="autoplay; fullscreen; gamepad"
    ></iframe>
  </div>

  <script>
    const games = [
      { name: "Super Mario", core: "nes", rom: "https://your-cdn.com/mario.nes" },
      { name: "Zelda", core: "nes", rom: "https://your-cdn.com/zelda.nes" },
      { name: "Pokemon", core: "gba", rom: "https://your-cdn.com/pokemon.gba" },
    ];

    const grid = document.getElementById("gameGrid");
    const iframe = document.getElementById("emulator");

    games.forEach((game, index) => {
      const card = document.createElement("div");
      card.className = "game-card";
      card.textContent = game.name;
      card.onclick = () => loadGame(game, card);
      grid.appendChild(card);
    });

    function loadGame(game, card) {
      document.querySelectorAll(".game-card").forEach(c => c.classList.remove("active"));
      card.classList.add("active");
      
      const url = `https://play.tinyemulator.com?core=${game.core}&rom=${encodeURIComponent(game.rom)}&gameName=${encodeURIComponent(game.name)}&single=1`;
      iframe.src = url;
    }
  </script>
</body>
</html>

Example 2: React Component

import { useState } from "react";

const GAMES = [
  { id: 1, name: "Super Mario", core: "nes", romUrl: "https://your-cdn.com/mario.nes" },
  { id: 2, name: "Sonic", core: "genesis", romUrl: "https://your-cdn.com/sonic.md" },
];

function TinyEmulator({ game, single = true, width = "100%", height = 600 }) {
  const src = `https://play.tinyemulator.com?core=${game.core}&rom=${encodeURIComponent(game.romUrl)}&gameName=${encodeURIComponent(game.name)}${single ? "&single=1" : ""}`;

  return (
    <div style={{ position: "relative", width, height, background: "#000", borderRadius: 8, overflow: "hidden" }}>
      <iframe
        src={src}
        title={game.name}
        width="100%"
        height="100%"
        frameBorder="0"
        allowFullScreen
        allow="autoplay; fullscreen; gamepad"
      />
    </div>
  );
}

function GameLibrary() {
  const [selectedGame, setSelectedGame] = useState(null);

  return (
    <div>
      <h2>Game Library</h2>
      <div style={{ display: "flex", gap: 12, marginBottom: 20 }}>
        {GAMES.map(game => (
          <button
            key={game.id}
            onClick={() => setSelectedGame(game)}
            style={{
              padding: "10px 16px",
              background: selectedGame?.id === game.id ? "#64b5f6" : "#16213e",
              color: "#fff",
              border: "none",
              borderRadius: 6,
              cursor: "pointer",
            }}
          >
            {game.name}
          </button>
        ))}
      </div>

      {selectedGame ? (
        <TinyEmulator game={selectedGame} />
      ) : (
        <p>Select a game to start playing</p>
      )}
    </div>
  );
}

export default GameLibrary;

Example 3: Vue 3 Component

<template>
  <div class="game-page">
    <h2>Play Retro Games</h2>
    
    <div class="game-list">
      <button
        v-for="game in games"
        :key="game.id"
        :class="{ active: selectedGame?.id === game.id }"
        @click="selectedGame = game"
      >
        {{ game.name }}
      </button>
    </div>

    <div v-if="selectedGame" class="emulator-container">
      <iframe
        :src="emulatorUrl"
        :title="selectedGame.name"
        frameborder="0"
        allowfullscreen
        allow="autoplay; fullscreen; gamepad"
      ></iframe>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const games = [
  { id: 1, name: "Super Mario", core: "nes", romUrl: "https://your-cdn.com/mario.nes" },
  { id: 2, name: "Metroid", core: "nes", romUrl: "https://your-cdn.com/metroid.nes" },
];

const selectedGame = ref(null);

const emulatorUrl = computed(() => {
  if (!selectedGame.value) return "about:blank";
  const g = selectedGame.value;
  return `https://play.tinyemulator.com?core=${g.core}&rom=${encodeURIComponent(g.romUrl)}&gameName=${encodeURIComponent(g.name)}&single=1`;
});
</script>

<style scoped>
.game-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}
.game-list {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.game-list button {
  padding: 8px 16px;
  background: #16213e;
  color: #fff;
  border: 2px solid #0f3460;
  border-radius: 6px;
  cursor: pointer;
}
.game-list button.active {
  background: #0f3460;
  border-color: #64b5f6;
}
.emulator-container {
  position: relative;
  width: 100%;
  padding-bottom: 75%;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.emulator-container iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}
</style>

Click a game card to open the emulator in a modal:

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 20px; }
    .card {
      background: #f5f5f5;
      border-radius: 8px;
      padding: 16px;
      text-align: center;
      cursor: pointer;
      transition: transform 0.2s;
    }
    .card:hover { transform: scale(1.05); }
    .modal-overlay {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.8);
      z-index: 1000;
      justify-content: center;
      align-items: center;
    }
    .modal-overlay.active { display: flex; }
    .modal {
      width: 90%;
      max-width: 900px;
      background: #000;
      border-radius: 8px;
      overflow: hidden;
    }
    .modal-header {
      padding: 10px 16px;
      background: #333;
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .close-btn {
      background: none;
      border: none;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
    }
    .modal iframe {
      width: 100%;
      height: 500px;
      border: none;
      display: block;
    }
  </style>
</head>
<body>
  <div class="grid" id="grid"></div>

  <div class="modal-overlay" id="modal">
    <div class="modal">
      <div class="modal-header">
        <span id="modalTitle">Game</span>
        <button class="close-btn" onclick="closeModal()">&times;</button>
      </div>
      <iframe id="modalIframe" src="about:blank" allowfullscreen allow="autoplay; fullscreen; gamepad"></iframe>
    </div>
  </div>

  <script>
    const games = [
      { name: "Super Mario Bros", core: "nes", rom: "https://cdn.example.com/smb.nes" },
      { name: "Contra", core: "nes", rom: "https://cdn.example.com/contra.nes" },
      { name: "Pokemon Red", core: "gbc", rom: "https://cdn.example.com/pokemon.gbc" },
      { name: "Sonic 3", core: "genesis", rom: "https://cdn.example.com/sonic3.md" },
    ];

    const grid = document.getElementById("grid");
    const modal = document.getElementById("modal");
    const modalTitle = document.getElementById("modalTitle");
    const modalIframe = document.getElementById("modalIframe");

    games.forEach(game => {
      const card = document.createElement("div");
      card.className = "card";
      card.innerHTML = `<h3>${game.name}</h3><p>${game.core.toUpperCase()}</p>`;
      card.onclick = () => openGame(game);
      grid.appendChild(card);
    });

    function openGame(game) {
      modalTitle.textContent = game.name;
      const url = `https://play.tinyemulator.com?core=${game.core}&rom=${encodeURIComponent(game.rom)}&gameName=${encodeURIComponent(game.name)}&single=1`;
      modalIframe.src = url;
      modal.classList.add("active");
    }

    function closeModal() {
      modal.classList.remove("active");
      modalIframe.src = "about:blank";
    }

    modal.onclick = (e) => {
      if (e.target === modal) closeModal();
    };
  </script>
</body>
</html>

Example 5: Using Props Format (Advanced)

// Helper to encode props
function encodeProps(props) {
  return btoa(encodeURIComponent(JSON.stringify(props)));
}

// Create iframe dynamically
function createEmulator(container, gameConfig) {
  const encoded = encodeProps(gameConfig);
  const iframe = document.createElement("iframe");
  iframe.src = `https://play.tinyemulator.com?props=${encodeURIComponent(encoded)}&single=1`;
  iframe.width = "100%";
  iframe.height = "600";
  iframe.frameBorder = "0";
  iframe.allowFullscreen = true;
  iframe.setAttribute("allow", "autoplay; fullscreen; gamepad");
  container.appendChild(iframe);
  return iframe;
}

// Usage
const gameConfig = {
  type: "nes",
  title: "Super Mario Bros",
  app: "nes",
  uid: "user-" + userId + "-game-" + gameId,
  rom: "https://cdn.example.com/roms/mario.nes",
  props: {
    // Additional core-specific props
  }
};

createEmulator(document.getElementById("game-container"), gameConfig);

Responsive Embed

Use CSS to make the iframe responsive with different aspect ratios:

.emulator-4by3 {
  position: relative;
  width: 100%;
  padding-bottom: 75%; /* 4:3 aspect ratio (NES, SNES, GBA) */
  height: 0;
  overflow: hidden;
}

.emulator-16by9 {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio (arcade, psx) */
  height: 0;
  overflow: hidden;
}

.emulator-4by3 iframe,
.emulator-16by9 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

<div class="emulator-4by3">
  <iframe
    src="https://play.tinyemulator.com?core=nes&rom=https://example.com/game.nes"
    frameborder="0"
    allowfullscreen
    allow="autoplay; fullscreen; gamepad"
  ></iframe>
</div>

Security Considerations

Setting	Recommended	Reason
`allow` attribute	`autoplay; fullscreen; gamepad`	Enable required features
`sandbox`	Not recommended	May break emulator functionality
CSP	Add `play.tinyemulator.com` to `frame-src`	If your site uses Content Security Policy

Cross-Origin Notes

Since TinyEmulator runs in a cross-origin iframe:

No direct DOM access: You cannot access the emulator's DOM from your page
localStorage: The emulator uses its own isolated storage
File uploads: Users upload ROMs directly within the iframe
Audio: Requires user interaction first (browser autoplay policy)

Self-Hosted Embed

If you self-host TinyEmulator, replace the iframe src with your own domain:

<iframe
  src="https://play.your-domain.com?core=nes&rom=https://example.com/game.nes"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
  allow="autoplay; fullscreen; gamepad"
></iframe>

Basic Embed​

Launch with Parameters​

EmulatorJS Compatible Format (Recommended)​

Core Name Mapping​

TinyEmulator Native Format (props)​

Migration from EmulatorJS​

Complete Examples​

Example 1: Full HTML Page​

Example 2: React Component​

Example 3: Vue 3 Component​

Example 4: Game Grid with Modal Popup​

Example 5: Using Props Format (Advanced)​

Responsive Embed​

Security Considerations​

Cross-Origin Notes​

Self-Hosted Embed​