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
Previous
Assets (public/ private/)
Next
Server Utils (srvkit/)

UI Folder Overview

The ui folder contains reusable interface components for an app or library. App UI folders usually stay shallow, like @apps/myapp/ui, while libraries can expose shared components such as @libs/shared/ui.
App UI
Use for components that belong to one app, such as an admin header, landing hero, dashboard widget, or app-only interaction.
Library UI
Use for components shared by multiple apps, such as auth gates, responsive wrappers, editor pieces, or common form fields.

Recommended Shape

The recommended rule is simple: one file, one export, and file name equals export name. This keeps the barrel predictable and makes import optimization work well.
apps/myapp/ui
AutoClose.tsx

Barrel And Optimized Import

The ui folder is kept as a barrel folder. Pages import from the barrel, and Akan can optimize the import so a page only fetches the JavaScript bundle for the UI components it actually uses.
This matters in SSR. The server can render the page first, and the browser only hydrates the client components that are needed for that page instead of downloading a large shared UI bundle.
index.ts
page.tsx

Composite Components

Some UI APIs are easier to use as a grouped object. In that case, use a folder with an index file and export one composite name from the library barrel, such as Only.Admin or Only.Web.
Only/Web.tsx
Only/index.tsx
libs/shared/ui/index.ts
page.tsx

Practical Rules

Prefer one file, one export, and matching names such as AutoClose.tsx exporting AutoClose.
Keep app UI folders shallow unless a component is naturally a grouped API.
Import from the ui barrel, not from deep component paths, so Akan can optimize the import.
Use composite folders for APIs that read well as a namespace, such as Only.Web or Only.Admin.
UI Folder Overview
Recommended Shape
Barrel And Optimized Import
Composite Components
Practical Rules