image
Akan.js
(v1)
Docs (V1)
English
image
Akan.js
You are viewing the Akan.js v1 docs.Go to the latest v2 docs
Docs (V1)
Released under the MIT License
Copyright © 2026 Akan.js All rights reserved.
System managed bybassman
Official Akan.js Consulting onAkansoft
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