#runtime

Low-level StatelyUi runtime configuration and builder.

This module provides the base runtime types and factory function for creating a StatelyUi instance without the core plugin. These are intended for plugin authors and advanced use cases.

#For Most Users

Use statelyUi from @statelyjs/stately instead. It includes the core plugin automatically and provides a simpler API:

import { statelyUi } from '@statelyjs/stately';

const runtime = statelyUi<MySchemas>({
  schema,
  client,
  options: { api: { pathPrefix: '/api/v1' } }
});

#For Plugin Authors

Use createStatelyUi when building plugins that need to work with the base runtime before the core plugin is applied:

import { createStatelyUi } from '@statelyjs/ui/runtime';

const baseRuntime = createStatelyUi<MySchemas, [MyPlugin]>({
  schema,
  client,
  options: {}
}).withPlugin(myPlugin());

#Interfaces

#RouteOption

Defined in: packages/ui/src/runtime.ts:103

Route and navigation option for an individual route.

Primarily represented in the application's navigation but may be used elsewhere.

#Properties

#badge?

optional badge: ComponentType<Omit<RouteOption, "badge">> | null

Defined in: packages/ui/src/runtime.ts:107

#icon?

optional icon: ComponentType<any>

Defined in: packages/ui/src/runtime.ts:104

#label

label: string

Defined in: packages/ui/src/runtime.ts:105

#to

to: string

Defined in: packages/ui/src/runtime.ts:106

#StatelyUiBuilder

Defined in: packages/ui/src/runtime.ts:216

Builder interface for constructing a StatelyUi runtime.

Extends the runtime with withPlugin() for chaining plugin installation. After all plugins are added, the builder can be used as the runtime.

#Extends

• StatelyUiRuntime<Schema, Augments>

#Type Parameters

#Schema

Schema extends StatelySchemas<any, any>

The application's StatelySchemas type

#Augments

Augments extends readonly AnyUiPlugin[] = readonly []

Tuple of plugin types that will be installed

#Properties

#client

readonly client: Client<Schema["config"]["paths"]>

Defined in: packages/ui/src/runtime.ts:155

An openapi-fetch client for making API calls

#Inherited from

StatelyUiRuntime.client

#options

readonly options: UiOptions

Defined in: packages/ui/src/runtime.ts:157

UI configuration options

#Inherited from

StatelyUiRuntime.options

#plugins

plugins: MergeUiAugments<Schema, Augments>

Defined in: packages/ui/src/runtime.ts:178

Installed plugins accessible by name

#Inherited from

StatelyUiRuntime.plugins

#registry

registry: UiRegistry

Defined in: packages/ui/src/runtime.ts:174

Component and transformer registry for dynamic rendering

#Inherited from

StatelyUiRuntime.registry

#schema

readonly schema: Stately<Schema>

Defined in: packages/ui/src/runtime.ts:153

The Stately schema instance containing type definitions

#Inherited from

StatelyUiRuntime.schema

#utils

utils: UiUtils

Defined in: packages/ui/src/runtime.ts:176

Utility functions available throughout the application

#Inherited from

StatelyUiRuntime.utils

#Methods

#withPlugin()

withPlugin(plugin): StatelyUiBuilder<Schema, Augments>

Defined in: packages/ui/src/runtime.ts:226

Install a plugin into the runtime.

#Parameters

#plugin

UiPluginFactory<Schema, Augments>

Plugin factory function

#Returns

StatelyUiBuilder<Schema, Augments>

Builder with the plugin installed

#StatelyUiConfiguration

Defined in: packages/ui/src/runtime.ts:151

Core configuration required to create a StatelyUi runtime.

#Type Parameters

#Schema

Schema extends StatelySchemas<any, any>

The application's StatelySchemas type

#Properties

#client

client: Client<Schema["config"]["paths"]>

Defined in: packages/ui/src/runtime.ts:155

An openapi-fetch client for making API calls

#options

options: UiOptions

Defined in: packages/ui/src/runtime.ts:157

UI configuration options

#schema

schema: Stately<Schema>

Defined in: packages/ui/src/runtime.ts:153

The Stately schema instance containing type definitions

#StatelyUiRuntime

Defined in: packages/ui/src/runtime.ts:201

The complete StatelyUi runtime.

Combines the base configuration with plugin-provided runtime additions. This is what gets passed to the StatelyUiProvider and is accessible via the useStatelyUi hook.

#Example

// Access runtime in components
const runtime = useStatelyUi();
runtime.schema // Schema instance
runtime.client // API client
runtime.plugins.core // Core plugin
runtime.registry // Component registry

#Extends

• Readonly<StatelyUiConfiguration<Schema>>.UiPluginRuntime<Schema, Augments>

#Extended by

• StatelyUiBuilder

#Type Parameters

#Schema

Schema extends StatelySchemas<any, any>

The application's StatelySchemas type

#Augments

Augments extends readonly AnyUiPlugin[] = readonly []

Tuple of plugin types that are installed

#Properties

#client

readonly client: Client<Schema["config"]["paths"]>

Defined in: packages/ui/src/runtime.ts:155

An openapi-fetch client for making API calls

#Inherited from

Readonly.client

#options

readonly options: UiOptions

Defined in: packages/ui/src/runtime.ts:157

UI configuration options

#Inherited from

Readonly.options

#plugins

plugins: MergeUiAugments<Schema, Augments>

Defined in: packages/ui/src/runtime.ts:178

Installed plugins accessible by name

#Inherited from

UiPluginRuntime.plugins

#registry

registry: UiRegistry

Defined in: packages/ui/src/runtime.ts:174

Component and transformer registry for dynamic rendering

#Inherited from

UiPluginRuntime.registry

#schema

readonly schema: Stately<Schema>

Defined in: packages/ui/src/runtime.ts:153

The Stately schema instance containing type definitions

#Inherited from

Readonly.schema

#utils

utils: UiUtils

Defined in: packages/ui/src/runtime.ts:176

Utility functions available throughout the application

#Inherited from

UiPluginRuntime.utils

#UiNavigationOptions

Defined in: packages/ui/src/runtime.ts:116

Navigation configuration for the application.

Controls the sidebar navigation structure, base paths for links, and allows overriding plugin-provided routes.

#Properties

#basePath?

optional basePath: string

Defined in: packages/ui/src/runtime.ts:118

Base path prepended to all navigation links

#routeOverrides?

optional routeOverrides: Record<string, RouteOption>

Defined in: packages/ui/src/runtime.ts:138

Override specific route configurations by path.

Keys are the original to path, values are the replacement route config. Useful for customizing plugin-provided navigation items.

#Example

routeOverrides: {
  '/entities/user': {
    icon: UserIcon,
    label: 'Team Members',
    to: '/team'
  }
}

#routes?

optional routes: object & RouteOption

Defined in: packages/ui/src/runtime.ts:120

Primary navigation routes displayed in the sidebar

#Type Declaration

#items?

optional items: RouteOption[]

#UiOptions

Defined in: packages/ui/src/runtime.ts:83

App-wide configuration options for StatelyUi.

Configure API path prefixes, navigation structure, and theme settings. These options are available throughout the application via context.

#Example

const options: UiOptions = {
  api: { pathPrefix: '/api/v1' },
  navigation: {
    basePath: 'app',
    routes: {
      label: 'Application',
      to: '/',
      items: [{
        icon: Cog,
        label: 'Pipelines',
        to: '/pipelines',
      }]
    },
    routeOverrides: {
      ['/entities/source']: {
        icon: Cog,
        label: 'Source',
        to: '/source-driver',
      }
    }
  },
  theme: { defaultTheme: 'dark' }
};

#Properties

#api?

optional api: object

Defined in: packages/ui/src/runtime.ts:85

API configuration options

#pathPrefix?

optional pathPrefix: string

Path prefix prepended to all API calls

#navigation?

optional navigation: UiNavigationOptions

Defined in: packages/ui/src/runtime.ts:90

Navigation configuration for sidebar and routing

#theme?

optional theme: object & Partial<Omit<ThemeProviderProps, "children">>

Defined in: packages/ui/src/runtime.ts:92

Theme configuration for light/dark mode

#Type Declaration

#disabled?

optional disabled: boolean

Set to true to disable the theme provider

#UiPluginRuntime

Defined in: packages/ui/src/runtime.ts:169

Plugin-provided runtime additions.

Contains the component registry, utility functions, and plugin instances that are added to the runtime through plugins.

#Extended by

• StatelyUiRuntime

#Type Parameters

#Schema

Schema extends StatelySchemas<any, any>

The application's StatelySchemas type

#Augments

Augments extends readonly AnyUiPlugin[] = readonly []

Tuple of plugin types that are installed

#Properties

#plugins

plugins: MergeUiAugments<Schema, Augments>

Defined in: packages/ui/src/runtime.ts:178

Installed plugins accessible by name

#registry

registry: UiRegistry

Defined in: packages/ui/src/runtime.ts:174

Component and transformer registry for dynamic rendering

#utils

utils: UiUtils

Defined in: packages/ui/src/runtime.ts:176

Utility functions available throughout the application

#Variables

#defaultUiOptions

const defaultUiOptions: UiOptions

Defined in: packages/ui/src/runtime.ts:144

Default UI options applied when not specified.

#Functions

#createStatelyUi()

createStatelyUi<Schema, Augments>(config): StatelyUiBuilder<Schema, Augments>

Defined in: packages/ui/src/runtime.ts:267

Create a new base StatelyUi runtime builder (without core plugin).

This is a low-level API for plugin authors and advanced use cases. It returns a builder that allows chaining plugin installations via withPlugin().

#For Most Users

Use statelyUi from @statelyjs/stately instead, which includes the core plugin automatically:

import { statelyUi } from '@statelyjs/stately';

const runtime = statelyUi<MySchemas>({ schema, client, options });

#For Plugin Authors

Use this when you need the base runtime without core:

#Type Parameters

#Schema

Schema extends StatelySchemas<any, any>

The application's StatelySchemas type

#Augments

Augments extends readonly AnyUiPlugin[] = readonly []

Tuple of plugin types that will be installed

#Parameters

#config

Readonly<StatelyUiConfiguration<Schema>>

Core configuration with schema, client, and options

#Returns

StatelyUiBuilder<Schema, Augments>

A builder for installing plugins and creating the runtime

#Example

import { createStatelyUi } from '@statelyjs/ui';

const baseRuntime = createStatelyUi<MySchemas, [MyPlugin]>({
  schema,
  client,
  options: {}
}).withPlugin(myPlugin());