Frontend SDK

The Granit Frontend SDK is a collection of 49 TypeScript packages that mirror the Granit .NET backend modules. Every package follows a two-tier architecture:

TypeScript SDK (@granit/<domain>) — framework-agnostic types, API functions, factories, and constants. Zero React dependency. Works with Angular, Vue, Svelte, or plain TypeScript.
React bindings (@granit/react-<domain>) — Provider components and hooks that wrap the TypeScript SDK for React applications.

Architecture

graph TD
    subgraph "Foundation"
        logger["@granit/logger"]
        utils["@granit/utils"]
        storage["@granit/storage"]
        cookies["@granit/cookies"]
    end

    subgraph "Infrastructure"
        api["@granit/api-client"]
        authn["@granit/react-authentication"]
        authz["@granit/react-authorization"]
        localization["@granit/localization"]
        tracing["@granit/tracing"]
        errorBoundary["@granit/error-boundary"]
    end

    subgraph "Business"
        querying["@granit/querying"]
        dataExchange["@granit/data-exchange"]
        workflow["@granit/workflow"]
        timeline["@granit/timeline"]
        notifications["@granit/notifications"]
    end

    authn --> api
    localization --> storage
    errorBoundary --> logger
    querying --> utils
    dataExchange --> utils
    timeline --> querying
    notifications --> querying

Data flows from types to API functions to hooks to providers: types/ → api/ → hooks/ → providers/

Package inventory

Foundation

Package	Role
`@granit/api-client`	Axios factory, Bearer token interceptor, RFC 7807 error types
`@granit/idempotency`	Automatic `Idempotency-Key` header injection
`@granit/utils`	Tailwind CSS class merging, date/number formatting
`@granit/logger`	Configurable logger factory with pluggable transports
`@granit/logger-otlp`	OTLP HTTP transport for log-to-trace correlation

Security

Package	Role
`@granit/authentication`	Keycloak/OIDC types (framework-agnostic)
`@granit/react-authentication`	Keycloak init hook, auth context factory, mock provider
`@granit/authentication-api-keys`	API key management types
`@granit/react-authentication-api-keys`	React hooks for API key CRUD
`@granit/authorization`	Permission and role types
`@granit/react-authorization`	Permission checking hooks
`@granit/identity`	Identity provider capabilities
`@granit/react-identity`	Identity provider and hooks
`@granit/multi-tenancy`	Tenant resolver abstraction
`@granit/react-multi-tenancy`	Tenant provider and hooks

Data and messaging

Package	Role
`@granit/notifications`	Transport-agnostic notification types and API
`@granit/react-notifications`	Notification provider and hooks
`@granit/notifications-signalr`	SignalR real-time transport
`@granit/notifications-sse`	Server-Sent Events transport
`@granit/notifications-web-push`	Web Push VAPID subscription API
`@granit/react-notifications-web-push`	Web Push React hook
`@granit/notifications-mobile-push`	Mobile push token registration API
`@granit/react-notifications-mobile-push`	Mobile push React hook
`@granit/querying`	Headless data grid types, filter system, saved views
`@granit/react-querying`	Query provider, pagination, smart filter hooks
`@granit/data-exchange`	Import/export pipeline types and API
`@granit/react-data-exchange`	Import/export providers and hooks

Domain

Package	Role
`@granit/workflow`	FSM lifecycle types and API
`@granit/react-workflow`	Workflow provider, status and transition hooks
`@granit/timeline`	Activity stream types and API
`@granit/react-timeline`	Timeline provider, stream and follower hooks
`@granit/templating`	Template editing, preview, lifecycle (unified package)
`@granit/background-jobs`	Background job status types
`@granit/react-background-jobs`	Job monitoring and control hooks

Cross-cutting

Package	Role
`@granit/settings`	User/tenant/global settings types and API
`@granit/react-settings`	Settings provider and hooks
`@granit/reference-data`	i18n reference data types
`@granit/react-reference-data`	Reference data CRUD hooks
`@granit/localization`	i18next integration, locale resolution
`@granit/react-localization`	React localization bindings
`@granit/cookies`	Cookie consent abstraction
`@granit/react-cookies`	Cookie consent provider and hook
`@granit/cookies-klaro`	Klaro CMP adapter
`@granit/storage`	Typed browser storage factory
`@granit/react-storage`	Synchronized storage hook
`@granit/tracing`	OpenTelemetry browser tracing
`@granit/react-tracing`	Tracing provider and span hooks
`@granit/error-boundary`	Error context types
`@granit/react-error-boundary`	Error boundary, global capture, breadcrumbs

Prerequisites

Node.js 22+ and pnpm
@tanstack/react-query v5 — peer dependency of all React packages with data fetching
Axios v1.x — peer dependency of @granit/api-client

.NET correspondence

Each frontend package mirrors a Granit .NET module:

.NET module	Frontend SDK
`Granit.Core`	`@granit/api-client`, `@granit/utils`
`Granit.Security`	`@granit/authentication`, `@granit/react-authentication`
`Granit.Authorization`	`@granit/authorization`, `@granit/react-authorization`
`Granit.Identity`	`@granit/identity`, `@granit/react-identity`
`Granit.MultiTenancy`	`@granit/multi-tenancy`, `@granit/react-multi-tenancy`
`Granit.Notifications`	`@granit/notifications` + transport packages
`Granit.Querying`	`@granit/querying`, `@granit/react-querying`
`Granit.DataExchange`	`@granit/data-exchange`, `@granit/react-data-exchange`
`Granit.Workflow`	`@granit/workflow`, `@granit/react-workflow`
`Granit.Timeline`	`@granit/timeline`, `@granit/react-timeline`
`Granit.Templating`	`@granit/templating`
`Granit.BackgroundJobs`	`@granit/background-jobs`, `@granit/react-background-jobs`
`Granit.Observability`	`@granit/logger`, `@granit/tracing`
`Granit.Localization`	`@granit/localization`, `@granit/react-localization`
`Granit.Cookies`	`@granit/cookies`, `@granit/cookies-klaro`
`Granit.ExceptionHandling`	`@granit/error-boundary`, `@granit/react-error-boundary`

TypeScript types in each package mirror the corresponding .NET DTOs. Changes to a .NET endpoint contract must be propagated to the matching TypeScript type, and vice versa.