Sign in Subscribe
Development

Run HTML5 Inside Shortcuts — Powered by Jellycuts

Run HTML5 right inside your Shortcuts with Jellycuts

0xChris

• 3 min read
Run HTML5 Inside Shortcuts — Powered by Jellycuts

You build shortcuts. You automate everything. But here’s the twist: with Jellycuts, you can run HTML5 right inside your Shortcuts—no web hosting, no external tools, just pure code and instant results.

This isn’t just another trick. It’s a whole new way to think about what Shortcuts can do.

Why Jellycuts Changes the Game

Apple Shortcuts alone? Blocky, slow, limited.

Jellycuts? It compiles clean, Swift-like text into shortcuts instantly—and because it supports raw text and URLs, it opens the door to embedding HTML5 directly inside your automations.

This means you can:

  • Build custom mini-web apps for iOS without servers
  • Combine JavaScript logic with native shortcut actions
  • Prototype interfaces faster than Xcode could ever dream
  • Push updates in seconds and redeploy instantly

If you can write HTML, you can now run it with Jellycuts.

The Core HTML5 Example

Here’s a simple snippet we’ll use to demo the workflow:

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body style="margin:0;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:sans-serif">
    <h2>Tap to Change Color</h2>
    <button onclick="c()" style="padding:10px 20px;font-size:18px">Change</button>
    <script>
      function c() {
        document.body.style.background = "#" + Math.floor(Math.random()*16777215).toString(16);
      }
    </script>
  </body>
</html>

Bio Link

Download JellyCuts

Available from the Apple App Store

Download Today

It’s small, visual, and perfect for showing how Jellycuts handles HTML5 in seconds.

Running It in Jellycuts

Here’s how you wrap that code and run it in a Shortcut:

import Shortcuts
#Color: grayBlue, #Icon: compass

text(text:"<html><head><meta name='viewport' content='width=device-width, initial-scale=1.0'></head><body style='margin:0;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:sans-serif'><h2>Tap to Change Color</h2><button onclick='c()' style='padding:10px 20px;font-size:18px'>Change</button><script>function c(){document.body.style.background='#'+Math.floor(Math.random()*16777215).toString(16);}</script></body></html>") >> text
url(url: "data:text/html,${text}") >> url
openURL(url: url) >> openURL

Bio Link

  • text stores your HTML5 code
  • url turns it into a data: URL
  • openURL launches it instantly in Safari

Result? Your shortcut runs HTML5 directly—no extra steps.

Why This Matters for Jellycuts Users

This isn’t about "changing a background color." It’s about proving what’s possible:

  • Custom dashboards for your automations
  • CSS-driven widgets that run from a shortcut
  • Quick HTML prototypes, shared via RoutineHub
  • Hybrid shortcuts that mix native actions with web-powered UIs

If you already love Jellycuts for building shortcuts faster, this pushes it further: Jellycuts turns your iPhone into an instant HTML5 sandbox.

Level Up: Ideas to Try Next

  • Animate with CSS (@keyframes loops for flashy UI)
  • Add forms that send input back to Shortcuts
  • Embed APIs (weather, quotes, timers) via JavaScript fetch calls
  • Build tiny, shareable web tools packaged inside your automations

With Jellycuts, these aren’t side projects. They’re 5-second deploys you can run and share.

Ready to Try?

  1. Install Jellycuts (From App Store)
  2. Paste the sample script
  3. Tap the row to compile and send to your shortcuts library
  4. Watch HTML5 come alive—inside a shortcut you control

You’re not just writing shortcuts anymore.
You’re building HTML5-powered tools inside Jellycuts.

And once you see it work? You’ll never look at Shortcuts the same way again.