Sign in Subscribe
Developers

How to Run JavaScript Mini-Games with Shortcuts

Victor Sanchez

• 3 min read
How to Run JavaScript Mini-Games with Shortcuts

This tutorial shows how to embed HTML + JavaScript into a Shortcut, save it in a variable, and open it directly in Safari (or the Web View). Using the data:text/html scheme, you can run interactive content without hosting it on a server.

We’ll build a simple mini-game where you score points by clicking a circle that moves randomly across the screen.

Step 1: Create a new Shortcut

  1. Open the Shortcuts app on your iPhone.
  2. Tap + to create a new shortcut.
  3. Name it something like MiniGame JS.

Step 2: Add a “Text” action

  1. Insert a Text action.
  2. Paste the following code into the text field:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MiniGame</title>
<style>
body { font-family: sans-serif; text-align:center; margin:0; background:#f5f5f5; }
h1 { margin:20px; }
#game { position:relative; width:100%; height:80vh; background:#fff; border:2px solid #ccc; overflow:hidden; }
#circle { position:absolute; width:60px; height:60px; border-radius:50%; background:#ff4caf; cursor:pointer; }
#score { font-size:20px; margin:10px; }
</style>
</head>
<body>
<h1>MiniGame</h1>
<p id="score">Score: 0</p>
<div id="game">
  <div id="circle"></div>
</div>
<script>
let score=0;
const circle=document.getElementById("circle");
const game=document.getElementById("game");
const scoreText=document.getElementById("score");

function moveCircle(){
  const maxX=game.clientWidth-circle.clientWidth;
  const maxY=game.clientHeight-circle.clientHeight;
  const x=Math.floor(Math.random()*maxX);
  const y=Math.floor(Math.random()*maxY);
  circle.style.left=x+"px";
  circle.style.top=y+"px";
}

circle.addEventListener("click",()=>{
  score++;
  scoreText.textContent="Score: "+score;
  moveCircle();
});

moveCircle();
setInterval(moveCircle,2000);
</script>
</body>
</html>

Bio Link

Step 3: Store the text in a variable

  1. Add the Set Variable action.
  2. Name the variable HTMLCode.
  3. Now the variable contains the full HTML + JS game code.

Step 4: Prepare the data:text/html URL

  1. Add another Text action.
  2. Write the following:
data:text/html,[HTMLCode]

Bio Link

Replace [HTMLCode] with the variable HTMLCode from the previous step.

Context: data:text/html, is a URL scheme that lets you embed raw HTML content inline. When you open this URL, Safari (or the Web View) renders the HTML code as if it came from a web page.

Step 5: Open the URL

  1. Add the Open URL action.
  2. Connect it to the data:text/html,[HTMLCode] output.

When you run the Shortcut, it will open the mini-game in a Web View right on your iPhone.

Final Shortcut Flow

  1. Text: HTML + JS + CSS code
  2. Set Variable: HTMLCode
  3. Text: data:text/html, + HTMLCode
  4. Open URL: Opens the inline HTML page

✅ With this setup, you can run any custom HTML + JavaScript project inside Shortcuts. You’re not limited to games: you could make interactive tools, forms, or even dashboards — all running locally without an internet connection.