{
"$type": "site.standard.document",
"bskyPostRef": {
"cid": "bafyreigdkijrjats3gntmsu6vwvltr5nqb7vu6bu3q45nnzbpck3s4a6ba",
"uri": "at://did:plc:h3hxgjxgcvgvtik7hoxpc4pa/app.bsky.feed.post/3m27zpr445za2"
},
"coverImage": {
"$type": "blob",
"ref": {
"$link": "bafkreiemxm23hirlhygrquy6hil5kzz5latv4lbmueas6bea427ozondnu"
},
"mimeType": "image/png",
"size": 384046
},
"description": "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.\n\nWe’ll build a simple mini-game where you score points by clicking a circle that moves randomly across the screen.\n\n\nStep 1: Create a new Shortcut\n\n 1. Open the Shortcuts app on your iPhone.\n 2. Tap + to create a new shortcut.\n 3. Name it something like MiniGame",
"path": "/how-to-run-javascript-mini-games-with-shortcuts/",
"publishedAt": "2025-09-30T16:57:00.000Z",
"site": "https://blog.routinehub.co",
"textContent": "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.\n\nWe’ll build a simple mini-game where you score points by clicking a circle that moves randomly across the screen.\n\n## Step 1: Create a new Shortcut\n\n 1. Open the **Shortcuts** app on your iPhone.\n 2. Tap **+** to create a new shortcut.\n 3. Name it something like **MiniGame JS**.\n\n\n\n## Step 2: Add a “Text” action\n\n 1. Insert a **Text** action.\n 2. Paste the following code into the text field:\n\n\n\n\n <!DOCTYPE html>\n <html>\n <head>\n <meta charset=\"UTF-8\">\n <title>MiniGame</title>\n <style>\n body { font-family: sans-serif; text-align:center; margin:0; background:#f5f5f5; }\n h1 { margin:20px; }\n #game { position:relative; width:100%; height:80vh; background:#fff; border:2px solid #ccc; overflow:hidden; }\n #circle { position:absolute; width:60px; height:60px; border-radius:50%; background:#ff4caf; cursor:pointer; }\n #score { font-size:20px; margin:10px; }\n </style>\n </head>\n <body>\n <h1>MiniGame</h1>\n <p id=\"score\">Score: 0</p>\n <div id=\"game\">\n <div id=\"circle\"></div>\n </div>\n <script>\n let score=0;\n const circle=document.getElementById(\"circle\");\n const game=document.getElementById(\"game\");\n const scoreText=document.getElementById(\"score\");\n\n function moveCircle(){\n const maxX=game.clientWidth-circle.clientWidth;\n const maxY=game.clientHeight-circle.clientHeight;\n const x=Math.floor(Math.random()*maxX);\n const y=Math.floor(Math.random()*maxY);\n circle.style.left=x+\"px\";\n circle.style.top=y+\"px\";\n }\n\n circle.addEventListener(\"click\",()=>{\n score++;\n scoreText.textContent=\"Score: \"+score;\n moveCircle();\n });\n\n moveCircle();\n setInterval(moveCircle,2000);\n </script>\n </body>\n </html>\n\nBio Link\n\n## Step 3: Store the text in a variable\n\n 1. Add the **Set Variable** action.\n 2. Name the variable **`HTMLCode`**.\n 3. Now the variable contains the full HTML + JS game code.\n\n\n\n## Step 4: Prepare the `data:text/html` URL\n\n 1. Add another **Text** action.\n 2. Write the following:\n\n\n\n\n data:text/html,[HTMLCode]\n\n\nBio Link\n\nReplace [HTMLCode] with the variable **HTMLCode** from the previous step.\n\n**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.\n\n## Step 5: Open the URL\n\n 1. Add the **Open URL** action.\n 2. Connect it to the `data:text/html,[HTMLCode]` output.\n\n\n\nWhen you run the Shortcut, it will open the mini-game in a Web View right on your iPhone.\n\n## Final Shortcut Flow\n\n 1. **Text:** HTML + JS + CSS code\n 2. **Set Variable:** `HTMLCode`\n 3. **Text:** `data:text/html,` + `HTMLCode`\n 4. **Open URL:** Opens the inline HTML page\n\n\n\nWith 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 simple dashboards, all running locally without internet connection.",
"title": "How to Run JavaScript Mini-Games with Shortcuts",
"updatedAt": "2026-06-02T19:25:35.017Z"
}