image
Akan.js
English
DocsConventionsReferencesCheatsheet
image
Akan.js
Released under the MIT License
Official Akan.js Consulting onAkansoft
Copyright © 2026 Akan.js All rights reserved.
System managed bybassman
CLI Reference
• Commands
• Workspace
• Application
• Library
• Module
• Scalar
• Package
• Page
• Cloud
AkanJS Reference
• akanjs/base
• akanjs/common
• akanjs/constant
• akanjs/fetch
• akanjs/signal
• akanjs/server
• akanjs/client
• akanjs/webkit
UI Reference
• Overview
• Core
• Display
• Forms
• Overlays
• System
CLI Reference
• Commands
• Workspace
• Application
• Library
• Module
• Scalar
• Package
• Page
• Cloud
AkanJS Reference
• akanjs/base
• akanjs/common
• akanjs/constant
• akanjs/fetch
• akanjs/signal
• akanjs/server
• akanjs/client
• akanjs/webkit
UI Reference
• Overview
• Core
• Display
• Forms
• Overlays
• System
Previous
Overview
Next
Display

Core UI

Core UI components are the most common `akanjs/ui` imports in apps and libs. They compose routing, images, layout containers, fetch loading, and model store workflows.

Link

Route-aware navigation component. It renders CSR or SSR navigation depending on the Akan render mode, and falls back to a non-clickable div when disabled or href is empty.
Props / API
NameTypeDescription
hrefstring | nullDestination route. Empty values render children without navigation.
disabledbooleanPrevents navigation while keeping the same visual layout.
activeClassNamestringClass applied when the current route matches the link.
scrollToTopbooleanScrolls to the top after client-side navigation.
Namespace helpers: `Link.Back`, `Link.Close`, and `Link.Lang` cover common navigation actions.
Usage

Image

Akan image component for `ProtoFile` objects and direct URLs. It can derive width, height, and blur data from file metadata and uses the Akan image optimizer in SSR mode.
Props / API
NameTypeDescription
srcstringDirect image URL. Takes precedence over file metadata.
fileProtoFile | file-likeFile object with `url`, `imageSize`, and optional `abstractData`.
abstractDatastringBlur/placeholder preview data.
priority / preloadbooleanMarks the image as high-priority and eager-loaded.
unoptimizedbooleanSkips Akan image optimization.
Usage

Layout

Namespace of lightweight layout primitives used throughout module templates, units, views, headers, sidebars, bottom tabs, and zones.
Props / API
NameTypeDescription
Layout.Template{ className?, children? }Vertical form/template container with default spacing.
Layout.Unit{ className?, children, href? }List/card item container that becomes clickable when href is provided.
Layout.View{ className?, children }Constrained detail page container.
Layout.ZonecomponentSection container for feature zones and page blocks.
Usage

Load

Namespace for data loading bridges between Akan fetch results and React rendering. It is commonly used for model detail pages, edit pages, pagination, and server/client page loading.
Props / API
NameTypeDescription
Load.View{ view, renderView, loading?, noDiv? }Hydrates a full model view and renders it through `renderView`.
Load.EditcomponentLoads edit payloads for model edit/new workflows.
Load.Page{ loader, render, loading?, noCache? }Shared SSR/CSR page loader wrapper.
Load.UnitscomponentRenders list/unit data from pagination-style results.
Usage

Model

Namespace of model workflow shells for generated Akan stores: view wrappers, edit/new modals, removal flows, and admin panels.
Props / API
NameTypeDescription
Model.EditModal{ slice, edit?, renderTitle?, onSubmit? }Modal editing shell wired to generated model store actions.
Model.NewWrappercomponentWrapper for opening and initializing a new-model form.
Model.ViewWrappercomponentWrapper for rendering full model view state.
Model.RemovecomponentRemoval action connected to generated delete flows.
Use `Model` components inside module `Util`, `View`, or `Zone` files where generated store actions are already available.
Usage
Core UI
Link
Image
Layout
Load
Model