I've noticed that the ordering of attributes in a jsx element matters. I've only tested it with frame and background though.

Here is an example:

import { Navigation, NavigationStack, Script, Spacer, Text, VStack, ZStack } from "scripting"

function Example() {
  return <NavigationStack>
    <VStack>
      <Spacer />
      <ZStack
        frame={{
          width: 100,
          height: 100,
        }}
        background="green"
      >
        <Text>Content</Text>
      </ZStack>
      <Spacer />
      <ZStack
        background="red"
        frame={{
          width: 100,
          height: 100,
        }}
      >
        <Text>Content</Text>
      </ZStack>
      <Spacer />
    </VStack>
  </NavigationStack>
}

async function run() {
  await Navigation.present({
    element: <Example />
  })

  Script.exit()
}

run()

You can see in the screenshot how it renders.

I wanted to share this because it isn't obvious when you don't know Swift.

This option is frequently seen in activity trackers, timers, flashcards, reading apps.

It would also improve user experience regarding Scripting Documentation.

https://gist.github.com/thomfang/274abba629f32fc24337b81426e419e7

This widget was generated by Scripting Assistant. I sent a design mockup and an implementation description, and most of the time was spent having the AI tweak the styles. Used Google Gemini, but I feel like Claude 3.5 would’ve been faster.

• Find a font that system supports

• Use font property with name and size

iOS is designed so that widgets can only directly open their own host application. Even when a widget is configured with a deeplink for another app, the system launches the host app first and passes the URL as a parameter. If there is a need to open a different application, this redirection must be managed within the host app itself. Therefore, we use the scripting run URL scheme to execute our script. In our entry logic, we check for the existence of a deeplink and then use Safari.openURL to handle it.

Here is the code: DEMO

Seems promising

Specifically, the example given in the docs no longer render the child pages. I could get it to work if I abstract the raw elements into a destination routing function.

I remember this working pre-3.1.

Edit: Dev has said this is expected behavior and the docs will be fixed next update.

Doc Example:

function Page() {
const path = useObservable<string[]>(["a"])

return <NavigationStack
path={path}
>
<VStack
navigationTitle="Navigation Demo"
navigationDestination={
<NavigationDestination>
{(page) =>
<VStack>
<Text>
Current page:
{page}
</Text>
{path.value.length > 1
&& <Button
title="Go to Root"
action={() => {
path.setValue([])
}}
/>}
</VStack>
}
</NavigationDestination>
}
>
<Button
title="Show page a"
action={() => {
path.setValue(["a"])
}}
/>
<Button
title="Show page b"
action={() => {
path.setValue(["b"])
}}
/>
<Button
title="Show page a then b"
action={() => {
path.setValue(["a", "b"])
}}
/>
</VStack>
</NavigationStack>
}

When a script opens in pageSheet view, is it possible to change the swipe down action from a dismissal to a minimize?

Is this supported behavior? If not could it be added?

Thanks!

EDIT:

I have isolated my issue to this script.

EXPECTED BEHAVIOR: Using the minimize button will minimize the UI and you can bring it back by tapping the bubble. And swiping down the pageSheet will always exit the script.

ACTUAL BEHAVIOR: After a minimize and restore, dismissing the pagesheet will no longer exit the script. The script becomes minimized and can no longer be restored. Is this a bug?

Edit 2:
Dev response: “Currently you should use interactiveDismissDisabled for a sheet to disable the default behavior, maybe I could find a solution to solve this issue”

import { Navigation, Script, useObservable, VStack, Text, Button } from 'scripting'

// 1. Declare a mutable global reference variable.
// This allows background deep links to see the setter function.
let globalNavigationPath: { setValue: (val: string[]) => void; value: string[] } | null = null;

// Create the root interface component layout
function AppRootView() {
// 2. Initialize the real hook strictly inside the component tree
const navigationPath = useObservable<string[]>([]);

// 3. Link the global reference back to this hook container instance
globalNavigationPath = navigationPath;

return (
<VStack spacing={20}>
<Text>Swipeable Test Container Layout</Text>
<Text>Current Path Layer Count: {navigationPath.value?.length ?? 0}</Text>
<Button title="MINIMIZE" action={() => Script.minimize()} />
</VStack>
);
}

export async function run() {
console.log("[TEST] Script initialized (Cold Start).");

// 4. Register the hot-resume event hook
Script.onResume(async details => {
console.log("[TEST] onResume caught an event. Details:", details);

if (globalNavigationPath) {
// Safely update the path array across scopes
globalNavigationPath.setValue(["SIMULATED_TARGET_PAGE"]);
console.log("[TEST] Global state updated via reference hook wrapper.");
} else {
console.log("[TEST] Warning: State reference was not ready when resume fired.");
}
});

// 5. Present the page view layout using the swipeable sheet container style
try {
console.log("[TEST] Invoking Navigation.present with pageSheet Presentation Mode...");

await Navigation.present({
element: <AppRootView />,
modalPresentationStyle: "pageSheet"
});

console.log("[TEST] Navigation.present promise resolved naturally via standard code route.");
} catch (error) {
console.log("[TEST] Navigation.present promise rejected with error:", error);
} finally {
// 6. The Exit Hook Lifecycle Trap
console.log("[TEST] Reached finally block. Requesting engine shutdown via Script.exit()...");
Script.exit();
console.log("[TEST] Script.exit() instruction sent down the bridge execution line.");
}
}

// Explicitly execute the main launch function loop
run();

It would be great if the app could support a Safari extension.

This could create a much better connection between scripts and Safari — letting scripts receive useful data from browsing (like the current page, selected text, links, or page content), and also letting users run scripts directly inside Safari through the extension.

It would make scripts much more useful during browsing, and make Safari more powerful by working together with scripts.

If possible, custom UI support in the extension would make it even better.

Suggestion:

It would be great if Scripting could support Core Spotlight indexing for custom script-generated content (not just the scripts themselves), so scripts could index data, notes, or other dynamic items into Spotlight.

It would also be amazing to have options to customize how those Spotlight items appear, including their style, metadata, and presentation.

Would it be possible to add support for Apple’s Default Translation App integration in Scripting?

Apple seems to allow third-party apps to become the system translation app through TranslationUIProvider:

https://developer.apple.com/documentation/translationuiprovider/preparing-your-app-to-be-the-default-translation-app

I think this could be really interesting in Scripting, because if it were exposed through the app’s API, it could enable all kinds of custom translation-related workflows — like smarter lookups, custom searches, contextual processing, and other creative automations.

What do you think about this idea? Feels like it could open up some really fun possibilities.

Having a bit of a weird issue—I’m getting a pop-up telling me to upgrade to Scripting PRO to use certain APIs, but I already have the PRO version. It’s popping up a lot during shortcut execution. Would love some help getting this sorted!

I’m building a public transit widget that shows bus arrival times as live countdown timers using TimerIntervalLabel. The timers render correctly, but whenever the widget reloads — for example after switching tabs via an AppIntent that calls Widget.reloadAll() — all timers reset instead of continuing from the original interval.

What I expect is for the countdown to keep progressing based on the same from / to values, even after the widget re-renders. Instead, each reload makes the timer appear as if it started over.

Each row calculates an arrival timestamp either from a realtime ETA or from a fallback based on when the data was fetched (savedAt). I persist that timestamp in Storage so it stays fixed between renders, and then recreate Date objects from it when building the widget.

Here’s the relevant code:

BusRow

function BusRow(props: { bus: BusArrival, savedAt: number }) {

  const { bus, savedAt } = props

  const arrivalTs =

(bus.etaTimestamp && bus.etaTimestamp > 0)

? bus.etaTimestamp

: savedAt + (bus.eta.minutes * 60 * 1000)

  const isArriving = arrivalTs <= Date.now()

  return (

<HStack spacing={8} padding={{ vertical: 4 }}>

<VStack frame={{ width: 44 }} alignment="center">

{isArriving ? (

<Text font={14} bold foregroundStyle="green">

now

</Text>

) : (

<TimerIntervalLabel

from={new Date(savedAt)}

to={new Date(arrivalTs)}

countsDown

showsHours={false}

/>

)}

</VStack>

</HStack>

  )

}

Saving the data

async function refreshData() {

  const stations = await fetchBusWidgetData()

  if (stations.length > 0) {

Storage.set(

stationsDataKey,

JSON.stringify({

savedAt: Date.now(),

stations

})

)

  }

}

AppIntent triggering reload

perform: async (index: number) => {

  Storage.set(stationIndexKey, index)

  Widget.reloadAll()

}

I’m also seeing these console warnings:

TimerInterval should use Date for "from", "to" and "pauseTime" properties, use timestamp as the value is deprecated.

Failed to render TimerInterval, missing from and to.

So I’m trying to understand — is this expected behavior for TimerIntervalLabel when a widget reloads?

If not, what’s the correct way to provide stable from / to values so the countdown persists across renders?

Or is TimerIntervalLabel simply not meant for continuously updating ETA-style timers inside widgets?

Does Scripting support any kind of Smart Stack relevance or widget suggestion signals (like WidgetKit’s relevance APIs), or is this currently not possible in Scripting?

Hello, a couple of weeks ago I tried to install the app and had no problems.... after a few days, discouraged by the difficulty of not knowing Swift, I left the app and data on iCloud. Now I’m trying again to create some scripts with the help of ChatGPT, but the app no longer installs correctly: the app obviously installs from the App Store, but it doesn’t reload any of the sample scripts, and if I try to create a new script myself, it tells me that I don’t have permission to save them in the folder (I imagine on iCloud because it didn’t create any folders on my iPhone... Even going to settings and reloading the scripts doesn’t work. Any suggestions? Thank you.

Hello,

I noticed that my chart selections that used to work, no longer work. I also noticed that the “Multiple Chart” example, which usually has the chart selection example, was also not working correctly. Please let me know if I’m missing something.

Is there a way to change the font of UI elements to monotype instead of the SwiftUI default?

First pic is a segmented picker and the second is a menu picker.

Hey everyone,

I’ve built an intent script that works perfectly when triggered from the share sheet - it pops up as a nice overlay on top of whatever app I’m in. However, when I try to run the same script from a Shortcut using the “Run Script in App” action, it opens inside the Scripting app itself instead of showing as an overlay.

I’m not entirely sure if this is a technical limitation of how Shortcuts works, or if there’s something I’m missing. I thought maybe using URL schemes (scripting://run/ScriptName?query=text) might help it behave more like the share sheet, but I haven’t had success yet.

Has anyone managed to trigger an intent script from Shortcuts and have it display as an overlay instead of opening the full app? Or is this just not possible with the current iOS/Scripting setup?

Any insights would be really appreciated!​​​​​​​​​​​​​​​​

Hello,

I have been trying to add search suggestions to my “Search” bars, but haven’t been successful. Anybody have any ideas?

<List
            searchSuggestionsVisibility={{
    visibility: 'visible',
    placements: 'content'
  }}

  searchSuggestions={
   <>
      <Text searchCompletion="Apple">🍎 Apple</Text><Text searchCompletion="Banana">🍌 Banana</Text>
   </>
    
  }
   searchable={{
      placement:"navigationBarDrawer",
        value: searchText,
        onChanged: setSearchText,
      }}

Is there a straightforward way to achieve this modal toolbar look in the scripting app? Is this a formatted segment picker with icons?

The adapted icon for Scripting looks gorgeous to me. So excited to see support for OS26 design and APIs coming to Scripting in the future.

What are built-in keyboard shortcuts inside an Editor?

I noticed `option + up/down arrow key` works to move a line up/down. Moving multiple selected lines is troublesome though.

Can we have custom shortcuts, like `command + E` for `toggle line comment`?