Overview

Show a page

Import app from supernode. app.show({ views }) opens a native page and returns a Promise<void> that resolves after the user closes the page and effects are cleaned up. Execution continues after await; a later call can open another page.

Save this example as main.tsx and use the JSX configuration in View.

import { app } from "supernode";
import { Column, Text, TextField, useState } from "supernode/app";

function Profile() {
  const [name, setName] = useState("SuperNode");
  return (
    <Column spacing={12}>
      <Text fontSize={24}>Hello, {name}</Text>
      <TextField value={name} placeholder="Name" onValueChange={setName} />
    </Column>
  );
}

await app.show({ views: <Profile /> });
console.log("Page closed; the script continues.");

Build the page from components, lay it out with Modifier, and manage state with Hooks and Context, all imported from supernode/app.

API and execution context

Run the script inside SuperNode, where the host supplies the RPC connection. Each Node process can hold one active App session. A concurrent app.show rejects; sequential calls are supported. Widget executions reject app.show.

The SDK sends the process working directory to the host. Relative Image paths resolve from that directory. Images also support absolute paths, file: URLs, HTTP(S), image data URLs, and bundled Pika resource names.

Updates and lifecycle

Function components retain Hook state by their identity and key. TextField.onValueChange receives the latest string; state changes produce incremental native updates. Stable keys preserve component state when siblings move.

useEffect runs after the native page mounts. Dependency changes clean up the previous effect before its replacement runs. Closing the page disposes effects and event handlers. Return a synchronous cleanup function to release timers or subscriptions.

Rotation rebinds the existing session. Closing with Back or the toolbar starts cleanup; the host waits up to two seconds for acknowledgement. The connection stays alive while a page is idle. A stopped Node process or disconnected socket releases the native page.

Errors

Catch errors around await app.show(...). Invalid views, mount or commit timeouts, event-handler failures, cleanup failures and connection loss reject the Promise. The host logs native failures. Fix the reported problem before opening a new session.

App pages use the system theme. Localize the text supplied by your script for your audience; SuperNode supplies English and Chinese page controls.

Use Widget to publish a home-screen snapshot. See App information for the installed version and package name.