View
Configure JSX and choose between the App and Widget surfaces.
Configure JSX
Both view surfaces share one automatic JSX runtime. Set jsxImportSource to supernode:
{
"compilerOptions": {
"target": "ES2022",
"module": "NodeNext",
"moduleResolution": "NodeNext",
"jsx": "react-jsx",
"jsxImportSource": "supernode",
"strict": true,
"outDir": "dist"
},
"include": ["*.tsx"]
}Set "type": "module" in package.json. Compile TSX with TypeScript and run the emitted JavaScript inside SuperNode, for example tsc && node dist/main.js. SuperNode supplies the supernode runtime package. Your project needs a TypeScript compiler for this command.
Choose a surface
SuperNode has two view surfaces. App pages are rendered by Compose and support state, input and live time. Home-screen widgets are rendered by Glance as RemoteViews and only expose what Glance can render faithfully. Choose the surface by import path:
| Surface | Import from | Rendered by | Reference |
|---|---|---|---|
| App pages | supernode/app (components, Modifier and Hooks) | Compose | Components, Modifier, Hooks and Context |
| Widget snapshots | supernode/widget (components, Modifier and widget) | Glance | Components, Modifier |
Each path exports only what its renderer supports, so unsupported usage fails at type-check time. widget.show() also rejects views imported from supernode/app; see Validation and errors.
| Capability | App | Widget |
|---|---|---|
TextField | ✓ | — |
| Hooks and Context | ✓ | — (components are pure functions) |
fontWeight | All nine weights | normal, medium, bold |
DateText formats | date, time, relative, offset, timer (updates while visible) | date, time (formatted once per render) |
contentScale | All seven values | crop, fit, fillBounds |
| Children per container | Unlimited | Up to 10 |
| Modifier order | Applies in call order | Order-independent; each property set once |
| Rounded corners | Modifier.clip | Modifier.cornerRadius, Android 12 (API 31) and later |
| Filling remaining space | Modifier.weight(n), any ratio | Modifier.defaultWeight(), equal shares only |
Children and components
Component names, prop names, values and defaults follow Jetpack Compose. Layout and decoration use a modifier prop, like the modifier parameter of Compose components.
Function components return ViewChild. Children support views, components, arrays, text, numbers, booleans, null and undefined; empty children are omitted. JSX fragments group children. String tags such as <div> are not supported. Assign stable key values to function components in lists to preserve state during reordering.
Sizes and spacing are in dp, matching widget.displaySize; text fontSize uses sp.
Color values
Every color (background and color on text and dividers) is either a hex string or a { light, dark } object with separate colors for light and dark theme. Both support #RRGGBB and an optional alpha channel via #AARRGGBB.
<Text color={{ light: "#333333", dark: "#EDEDED" }}>Hello</Text>Alignment values
Box contentAlignment takes the values of Compose Alignment: "topStart", "topCenter", "topEnd", "centerStart", "center", "centerEnd", "bottomStart", "bottomCenter" or "bottomEnd". Column horizontalAlignment takes "start", "center" or "end", and Row verticalAlignment takes "top", "center" or "bottom".
start and end follow the layout direction, so they swap in right-to-left languages.