image
Akan.js
English
DocsConventionsReferencesCheatsheet
image
Akan.js
Akan.js v2 docs are now available.View the v1 docs
DocsConventionsReferencesCheatsheet
Released under the MIT License
Official Akan.js Consulting onAkansoft
Copyright © 2026 Akan.js All rights reserved.
System managed bybassman
Workspace Convention
• Structure
• Format & Lint
App & Library Convention
• Assets (public/ private/)
• Components (ui/)
• Server Utils (srvkit/)
• Web Utils (webkit/)
• Common Utils (common/)
• akan.config.ts
Domain 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
• Scalar.Template.tsx
• Scalar.Unit.tsx
Service Convention
• Overview
• service.dictionary.ts
• service.service.ts
• service.signal.ts
• service.store.ts
• Service.Util.tsx
• Service.Zone.tsx
Workspace Convention
• Structure
• Format & Lint
App & Library Convention
• Assets (public/ private/)
• Components (ui/)
• Server Utils (srvkit/)
• Web Utils (webkit/)
• Common Utils (common/)
• akan.config.ts
Domain 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
• Scalar.Template.tsx
• Scalar.Unit.tsx
Service Convention
• Overview
• service.dictionary.ts
• service.service.ts
• service.signal.ts
• service.store.ts
• Service.Util.tsx
• Service.Zone.tsx
Next
Structure

Webkit Overview

The webkit folder contains reusable code needed during web rendering. It is similar to srvkit, but it is for browser-side or web-rendering logic instead of server-only logic.
Use it for render maps, browser helpers, web hooks, and wrappers around browser libraries. Pages can then import from the webkit barrel instead of carrying complex logic directly.

What Belongs In Webkit

Render maps
Static maps used during rendering, such as status colors, badges, icons, labels, or page display options.
webkit/ticketStatusColorMap.ts
Browser helpers
Small browser actions such as downloading a file, reading cookies, opening a share link, or copying text.
webkit/copyText.ts
Web hooks
Reusable browser hooks for notifications, messaging, viewport state, permission checks, or browser APIs.
webkit/useViewportWidth.ts
External web wrappers
Wrappers around browser libraries so pages do not import vendor packages directly.
webkit/qrCodeCanvas.ts
Routing/account helpers
Web helpers that read account state or route users during rendering.
webkit/getSignedInUser.ts

Barrel, Optimized Import, And Shape

The webkit folder is a barrel folder like ui. Export web helpers from index.ts, then import from the barrel. Akan can optimize imports so the page includes only the webkit files it actually uses.
Prefer one file, one export, and file name equals export name. This keeps the barrel predictable and helps optimized imports stay precise.
webkit/downloadFile.ts
webkit/index.ts
page.tsx

Practical Rules

Use webkit for web-rendering logic that is not itself a reusable UI component.
Use srvkit for server-only code, and webkit for browser or web-rendering code.
Import from the webkit barrel instead of deep paths so optimized import can work.
Keep file names and export names aligned, such as downloadFile.ts exporting downloadFile.
Webkit Overview
What Belongs In Webkit
Barrel, Optimized Import, And Shape
Practical Rules