image
Akan.js
English
Docs (V1)
image
Akan.js
You are viewing the Akan.js v1 docs.Go to the latest v2 docs
Docs (V1)
Released under the MIT License
Official Akan.js Consulting onAkansoft
Copyright © 2026 Akan.js All rights reserved.
System managed bybassman
Introduction
• Quick Start
• How it works
• Practice a Workflow
Tutorials
• Show Details
• Modifying Status
• Interact in Service
• Displaying with Slice
• UX with Pages
• Using Scalar
• Using Insight
• Relate Data
System Architecture
• Overview
• Backend System
• Frontend System
• Environment Variables
• Primitive Scalar Types
• Domain Based Modules
• CSS
Module Convention
• Overview
• model.constant.ts
• model.dictionary.ts
• model.document.ts
• model.service.ts
• model.signal.ts
• model.store.ts
• Model.Template.tsx
• Model.Unit.tsx
• Model.Util.tsx
• Model.View.tsx
• Model.Zone.tsx
Scalar Convention
• Overview
• scalar.constant.ts
• scalar.dictionary.ts
• scalar.document.ts
Introduction
• Quick Start
• How it works
• Practice a Workflow
Tutorials
• Show Details
• Modifying Status
• Interact in Service
• Displaying with Slice
• UX with Pages
• Using Scalar
• Using Insight
• Relate Data
System Architecture
• Overview
• Backend System
• Frontend System
• Environment Variables
• Primitive Scalar Types
• Domain Based Modules
• CSS
Module Convention
• Overview
• model.constant.ts
• model.dictionary.ts
• model.document.ts
• model.service.ts
• model.signal.ts
• model.store.ts
• Model.Template.tsx
• Model.Unit.tsx
• Model.Util.tsx
• Model.View.tsx
• Model.Zone.tsx
Scalar Convention
• Overview
• scalar.constant.ts
• scalar.dictionary.ts
• scalar.document.ts
Previous
Model.Unit.tsx
Next
Model.View.tsx

model.util.ts / [Model].Util.tsx

The Util module is a designated space for UI helpers, sub-components, and specific logic that supports your main application features. It is especially useful for packaging complex interactions, wrappers, and reusable logic to keep your 'Page' and 'Zone' files clean.
fieldDescriptionExample
[Module].Util.tsxStandard naming convention for module utilities.
Complex LogicEncapsulate complex state management and store interactions.
WrappersWrappers for server-side actions or navigation.
[Module].Util.tsx

Standard naming convention for module utilities.

Complex Logic

Encapsulate complex state management and store interactions.

Wrappers

Wrappers for server-side actions or navigation.

Packaging Complex Logic

When a feature requires local state (like Modals), form handling, and store interactions, encapsulate it in a Util component.
RefundModal Component

Wrapper for Server Actions

Use wrappers to handle client-side events that trigger server actions (via fetch) and navigation, while keeping children simpler.
CreateOrderWrapper

Endpoint Trigger Components

Simple button components that trigger specific business logic or endpoints.
ApproveButton

Context-Aware UI

Components that adapt their rendering based on the global store state (e.g. current path, user role).
ContextBackButton
model.util.ts / [Model].Util.tsx
Packaging Complex Logic
Wrapper for Server Actions
Endpoint Trigger Components
Context-Aware UI