API
Modules
An NSH app imports everything it uses from a small set of modules. They are all native: the reactive graph, the renderer and every module are implemented in Rust inside the runtime, and the bundler keeps import ... from "nsh/..." as imports instead of copying code into your bundle. Your bundle only holds your own code.
import { mount, signal } from "nsh";
import { createNativeValue } from "nsh/animated";
import { windowSize } from "nsh/device";
import { Button, SafeAreaView } from "nsh/ui/mobile";
#Two layers
nshandnsh/<module>are the primitives and the environment: reactivity, lists, canvas, animation, gestures, device information. Every UI set builds on them.nsh/ui/<set>is a whole UI for one form factor. Today that isnsh/ui/mobile: navigation, modals, the status bar, system dialogs and components such asButtonandTextField(see Components).
There is no catch-all module: each API lives in exactly one place. Platform-only APIs live in nsh/ios, nsh/android and nsh/desktop (macOS, Windows, Linux); all can be imported on every platform, so one bundle runs everywhere (their calls do nothing elsewhere, and isAvailable tells you which platform you are on).
Types are generated from the runtime: nsh init, nsh build, nsh dev and nsh trace write .nsh/types next to your app, so the TypeScript declarations always match the runtime you build with (see Project structure).
#All modules
| Module | Exports | Page |
|---|---|---|
nsh | signal, computed, effect, batch, untracked, cleanup, context, split, mount; View, Text, Scroll, Input; the types of elements, styles, events and JSX (YNode, ViewStyle, …) | nsh |
nsh/animated | createNativeValue, NativeValue, NativeNode, Animated, Easing, LayoutAnimation | nsh/animated |
nsh/list | List (virtualized, recycling list) | nsh/list |
nsh/canvas | Canvas, Path2D, CanvasRenderingContext2D, CanvasGradient | nsh/canvas |
nsh/device | windowSize, colorScheme, fontScale, Platform, PixelRatio, I18nManager | nsh/device |
nsh/gesture | PanResponder | nsh/gesture |
nsh/image | Image (the element), Image.getSize, Image.prefetch | nsh/image |
nsh/clipboard | Clipboard.setString, Clipboard.getString, Clipboard.hasString | nsh/clipboard |
nsh/keymap | keymap.bind (keyboard shortcuts: mod+k, ctrl+shift+p, …) | nsh/keymap |
nsh/native | nativeComponent (components the embedding app registers) | nsh/native |
nsh/accessibility | AccessibilityInfo, screenReaderEnabled, reduceMotion | nsh/accessibility |
nsh/ios | isAvailable, InputAccessoryView | nsh/ios |
nsh/android | isAvailable, Toast, BackHandler, setStatusBarBackgroundColor | nsh/android |
nsh/desktop | isAvailable, Window (title, title bar, maximize, full screen), titleBar, Menu (application menu, context menus) | nsh/desktop |
nsh/webview | WebView | nsh/webview |
nsh/video | Video | nsh/video |
nsh/ui/mobile | Navigation (createNavigator, Stack, Screen, Modal), SafeAreaView, StatusBar, Alert, ActionSheet, Keyboard, Button, TextField, … | Components |
| Globals | fetch, URL, TextEncoder, Blob, FormData, AbortController, Intl, timers, console, requestAnimationFrame, … (no import) | Global APIs |
Reference pages that are not modules:
| Page | Covers |
|---|---|
| Style reference | Every style key, its type and meaning |
| Tailwind reference | The Tailwind utilities and variants class accepts |
#Host elements
The host elements are components imported like everything else: View, Text, Scroll and Input from nsh, Image from nsh/image, List from nsh/list, Canvas, WebView, Video from their modules, Modal from nsh/ui/mobile, InputAccessoryView from nsh/ios. Only If and Each are globals. The compiler makes the elements in place, so the imports cost nothing at run time. Their props are documented under Elements.