Skip to main content

CLI (sublime)

@sublime-ui/devkit is the sublime command line. It scaffolds code, generates the cross-platform artifacts, and drives builds for every target (web, desktop, mobile).

Installed by @sublime-ui/devkit (bin sublime, alias sui). Run any command with npx sublime <command> or npx @sublime-ui/devkit <command>.

A day in the life​

The handful of commands a Sublime UI developer actually runs day to day:

# ── Start a session ──────────────────────────────────────────────
npm run dev:web            # web app with hot reload (Vite)

# ── After editing navigation (storybook.*.ts) ────────────────────
npm run build:nav          # recompile typed navigation
# …or leave it running:
npx sublime build:nav --watch

# ── Add code ─────────────────────────────────────────────────────
npx sublime make:model Post --fields "title:string, body:string"
npx sublime make:component Card

# ── Check the other targets ──────────────────────────────────────
npm run dev:desktop        # Electron shell (renders the web UI)
npm run dev:mobile         # Android debug build (run `sublime doctor` first)

# ── Before committing ────────────────────────────────────────────
npm run typecheck          # if your app defines it; or: npx tsc --noEmit

Rule of thumb: the dev servers (dev:web, dev:desktop) recompile navigation on every storybook.web.ts / storybook.native.ts change, and every build:* compiles it up front — so generated routes and types stay in sync without running build:nav by hand.

Copy-paste commands​

Each command in its own block — use the copy icon to grab just that one.

Create a project​

npm create @sublime-ui/app@latest my-app

Scaffold a new app (prompts for name + targets), then installs everything.

Develop (hot reload)​

npm run dev:web

Web app with hot reload (Vite) — navigation recompiles on every storybook change.

npm run dev:desktop

Electron shell with HMR — renders the same web UI.

npm run dev:mobile

Android debug build (run sublime doctor first).

Build for release​

npm run build:web

Production web bundle → dist/web/.

npm run build:desktop

Desktop installers → dist/desktop/.

npm run build:mobile

Standalone offline Android APK → dist/mobile/.

npm run build:nav

Compile the storybooks into typed navigation.

Generate code​

npx sublime make:model Post --fields "title:string, body:string"

Generate a Model (+ registerModel) and update the models barrel.

npx sublime make:component Card

Generate a cross-platform component (types + web + native + index).

npx sublime theme:init

Scaffold design tokens (tokens.json + a typed tokens.ts).

npx sublime build:nav --watch

Recompile typed navigation on every storybook change.

Mobile toolchain​

npx sublime doctor

Check the Android toolchain (Node, JDK 17, SDK, NDK, CMake).

npx sublime setup

Provision the full Android toolchain into ~/.sublime (fully automatic).

npx sublime run

Install + launch the built APK on a device or emulator.

Create a project​

CommandWhat it does
npm create @sublime-ui/app@latest my-appScaffold a new app — prompts for name + targets (web / mobile / desktop), then installs everything.
npx @sublime-ui/devkit init my-appSame scaffolder, if you already have the CLI.

Useful flags: --targets web,desktop · --name my-app · --no-install · --no-git · --force (write into a non-empty dir) · -y / --yes (accept defaults, no prompts).

Project scripts​

These live in a scaffolded app's package.json — run them with npm run <name>. Only the scripts for the targets you selected are present.

ScriptRunsTarget
npm run dev:websublime dev:webWeb dev server (hot reload + live nav)
npm run build:websublime build:nav && vite buildWeb production bundle
npm run dev:mobilesublime build --debugAndroid debug build (needs Metro)
npm run build:mobilesublime buildStandalone Android APK (offline)
npm run dev:desktopsublime dev:desktopElectron shell with HMR + live nav
npm run build:desktopsublime build:desktopDesktop apps (Win/macOS/Linux)
npm run build:navsublime build:navCompile storybooks → typed navigation

All three targets follow the same shape: dev:<target> to run, build:<target> to package.

The navigation layer is generated (and git-ignored), so you almost never run build:nav by hand: dev:web and dev:desktop compile it on startup and keep watching the storybooks — recompiling on every change — while every build:* (including sublime build for mobile) compiles it once up front.

Where your builds go​

Every build:* command writes its final artifact into a single dist/ folder at the project root — one subfolder per platform, so all your release outputs live in one place:

CommandDestinationContents
npm run build:webdist/web/Static site — index.html + hashed assets/
npm run build:desktopdist/desktop/Portable apps — .zip (Win/macOS), .deb, .rpm (Linux)
npm run build:mobiledist/mobile/The signed .apk (or .aab when you pass --aab)

dist/ is git-ignored. Desktop and mobile produce intermediate native build trees along the way (desktop/out, desktop/.webpack, android/) — those stay in place, but the finished artifacts are copied into dist/ for you, so you only ever need to look in one folder.

Command reference​

Scaffolding & code generation​

CommandWhat it does
sublime init [dir]Scaffold a new app (same as npm create @sublime-ui/app).
sublime make:model <Name> [--fields "a:string,b:number"] [--resource /path] [--force]Generate a Model (+ registerModel) and update the models barrel.
sublime make:component <Name> [--mobile-only] [--force]Generate a cross-platform component (types + web + native + index).
sublime theme:init [--force]Scaffold design tokens (tokens.json + a typed tokens.ts).
CommandWhat it does
sublime build:nav [--watch] [--force] [--project <path>]Compile storybook.web.ts / storybook.native.ts into navigation.tsx, navigation.native.tsx, a typed route map (routes.d.ts), and an index barrel. --watch rebuilds on change. These four files are git-ignored build artifacts; dev:web / dev:desktop / build run this for you, so you rarely call it directly.

Web (Vite)​

CommandWhat it does
sublime dev:web [--project <path>]Run the Vite dev server, compiling navigation first and recompiling it on every storybook change.

Desktop (Electron Forge)​

CommandWhat it does
sublime dev:desktop [--project <path>]Run the Electron shell in development (Forge start + HMR), with live navigation recompilation. Aliased as desktop:dev.
sublime build:desktop [--project <path>]Build the desktop app (Forge make) → dist/desktop/. Aliased as desktop:build.

Mobile (offline Android)​

CommandWhat it does
sublime doctorCheck the Android toolchain (Node, JDK 17, SDK, NDK, CMake) — a ✓/✗ table. Managed pieces show a (managed) source.
sublime setupProvision the full Android toolchain into ~/.sublime — fully automatic on Windows, macOS, and Ubuntu (see below).
sublime build [--release|--debug] [--aab] [--project <path>]Compile navigation, then build a standalone Android APK fully offline → dist/mobile/. --release (default) embeds the JS bundle; --debug needs Metro; --aab makes a Play Store bundle.
sublime run [--device <id>] [--project <path>]Install and launch the built APK on a device/emulator.

Environment setup (sublime setup)​

sublime setup installs the full Android toolchain into ~/.sublime (jdk-17/ and android-sdk/) on Windows, macOS, and Linux. It needs no admin rights and changes no environment variables — sublime doctor and sublime build find the managed toolchain automatically. Re-running setup is safe; it resumes from the first missing piece.

It provisions JDK 17, the Android cmdline-tools (with licenses accepted), platform-tools, the android-35 platform, build-tools;35.0.0, NDK 27.1.12297006, and CMake 3.22.1 — showing a download progress bar and numbered phases as it goes. sublime doctor then reports each managed piece with a (managed) source, and sublime build produces an APK (or sublime build --aab an AAB) with no further configuration.

See also​