Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

triple chevron down Verticalize

A pipe-like function to verticalize your JavaScript code

dependencies minified + brotlied size minified + zipped size

types npm license


The following example code is a bit hard to read:

const { status } = await send(capitalize(greeting) + "!")

Make it less nested, more vertical, by using the V "pipe":

V( greeting,     // initial value ➡ "hi"
V (capitalize),  // custom function call ➡ "Hi"
V .concat("!"),  // String method `concat` call ➡ "Hi!"
V (send),        // custom async function call ➡ Promise { <pending> }
V .status,       // automatic promise chaining + getting property ➡ Promise { 200 }
V (console.log), // automatic promise chaining + global function call ➡ logs 200

If your IDE or a tool like Prettier automatically formats the code for you, it may result in the following syntax (still working):


Verticalize’s V function is around 200 bytes minified and compressed, and has no dependencies. It won’t bloat your web app.



npm install verticalize


import { V } from 'verticalize'


Verticalize uses ES modules, widely supported in browsers nowadays. Import the V function from the verticalize.min.js file. This file can be located in a CDN (example below) or copied in any directory of your website (for better performance and to be GDPR compliant, since you don’t have to connect to a third party server).

<script type="module">
  import { V } from ''

V function usage

The gist example above covers pretty much everything. Just call the V function with the initial value as the first argument, followed by the other arguments wrapped by another V at the beginning of the line to get a nice triple chevron down syntax. All these V-prefixed lines will then act like a pipeline, the output of a pipe being the input of the following pipe. Pipes can use unary functions, methods and properties, but not values (except for the initial value).

Unary functions

A unary function is a function that takes only one argument. You can use an anonymous ("arrow") function to turn a multi-argument function into a unary one.

V( 1.9,                  // initial value
V (Math.round),          // unary function
V (n => Math.pow(n, 3)), // binary function turned into unary
) // returns 8

Methods and properties

To call a method or to get a property of the previous pipe output (or of the initial value), you can use an anonymous function like count => count.add(1), but or convenience Verticalize allows you to use a direct dot syntax.

V( [1, 2, 3],         // initial Array value
V .concat([4, 5, 6]), // calling the Array method `concat()` (returning an Array)
V .length,            // getting the Array property `length`
) // returns 6


When the previous pipe output (or the initial value) is a promise, the next pipe will automatically chain it so you don’t have to write many .then() yourself.

const greeting =
  V( Promise.resolve("Hello"),
  V .toUpperCase(),
  V .concat("!!!"),

is the same as

const greeting =
  await Promise.resolve("Hello")
    .then(s => s.toUpperCase())
    .then(s => s.concat("!!!"))


A TC39 proposal for the pipe operator |> was created in 2015 and is currently in stage 2. It may or may not be included in the official JavaScript specs in a few years. If so, then it will take a few more years to be adopted by all the major browsers and runtimes. But you can use Verticalize right now and enjoy its unique dot syntax and automatic promise chaining features 😉



Stargazers ❤️

Stargazers repo roster for @laurentpayot/verticalize