Skip to content

Pipes

Pipes are pure transform functions for display values. They take a value in, return a formatted value out. Use them in templates, in script, or chain them together.

pipe()

The pipe() function applies a transform to a value:

ts
import { pipe, uppercase, currency, date } from '@akashjs/runtime';

pipe('hello', uppercase);                // 'HELLO'
pipe(1234.5, currency, 'USD');           // '$1,234.50'
pipe(new Date(), date, 'long');          // 'March 29, 2026'

The first argument is the value, the second is the transform function, and any remaining arguments are passed to the transform.

Using in Templates

Inside .akash templates, call pipe() directly in expressions:

html
<script lang="ts">
import { signal } from '@akashjs/runtime';
import { pipe, uppercase, currency } from '@akashjs/runtime';

const name = signal('john');
const price = signal(29.99);
</script>

<template>
  <h1>{pipe(name(), uppercase)}</h1>
  <p>Price: {pipe(price(), currency, 'USD')}</p>
</template>

Built-in Pipes

PipeInputExampleOutput
uppercasestringpipe('hello', uppercase)'HELLO'
lowercasestringpipe('HELLO', lowercase)'hello'
capitalizestringpipe('hello', capitalize)'Hello'
titleCasestringpipe('hello world', titleCase)'Hello World'
trimstringpipe(' hi ', trim)'hi'
truncatestringpipe('Hello World', truncate, 8)'Hello...'
dateDate | string | numberpipe(new Date(), date, 'short')'3/29/26'
currencynumberpipe(1234.5, currency, 'EUR')'€1,234.50'
numbernumberpipe(1234567.89, number)'1,234,567.89'
percentnumberpipe(0.85, percent)'85%'
jsonunknownpipe({ a: 1 }, json)'{\n "a": 1\n}'
pluralnumberpipe(5, plural, 'item', 'items')'5 items'
relativeTimeDate | numberpipe(Date.now() - 60000, relativeTime)'1 minute ago'

Date Formats

The date pipe accepts a format argument:

ts
pipe(new Date(), date);             // '3/29/2026'     (medium, default)
pipe(new Date(), date, 'short');    // '3/29/26'
pipe(new Date(), date, 'long');     // 'March 29, 2026'
pipe(new Date(), date, 'full');     // 'Sunday, March 29, 2026'
pipe(new Date(), date, 'time');     // '2:30 PM'
pipe(new Date(), date, 'iso');      // '2026-03-29T...'

An optional locale can be passed as the third argument:

ts
pipe(new Date(), date, 'long', 'de-DE');  // '29. März 2026'

Number Formatting

The number pipe accepts a digitsInfo string in "min-max" format:

ts
pipe(3.14159, number, '0-2');  // '3.14'
pipe(3.1, number, '2-2');     // '3.10'

Truncate Options

ts
pipe('Hello World', truncate, 8);           // 'Hello...'
pipe('Hello World', truncate, 8, '…');      // 'Hello W…'

Custom Pipes with definePipe()

Create your own pipes with definePipe():

ts
import { definePipe, pipe } from '@akashjs/runtime';

const reverse = definePipe<string, string>((value) =>
  value.split('').reverse().join('')
);

pipe('hello', reverse);  // 'olleh'

A pipe with extra arguments:

ts
const wrap = definePipe<string, string>((value, left: string, right: string) =>
  `${left}${value}${right}`
);

pipe('hello', wrap, '[', ']');  // '[hello]'

Chaining with chain()

Combine multiple pipes into a single transform using chain():

ts
import { chain, trim, capitalize, truncate } from '@akashjs/runtime';

const format = chain(trim, capitalize, truncate);

format('  hello world  ', 10);  // 'Hello w...'

Use the chained pipe in templates:

html
<script lang="ts">
import { chain, trim, capitalize } from '@akashjs/runtime';

const cleanName = chain(trim, capitalize);
</script>

<template>
  <p>{cleanName(rawInput())}</p>
</template>

Type Signature

ts
type PipeFn<TIn = any, TOut = any> = (value: TIn, ...args: any[]) => TOut;

function pipe<TIn, TOut>(value: TIn, transform: PipeFn<TIn, TOut>, ...args: any[]): TOut;
function chain<T>(...pipes: PipeFn[]): PipeFn<T, any>;
function definePipe<TIn, TOut>(fn: PipeFn<TIn, TOut>): PipeFn<TIn, TOut>;

Released under the MIT License.