Skip to main content
Boxed logo

Boxed

Essential building-blocks for functional & safe TypeScript code

Get startedAPI reference
import { AsyncData } from "@swan-io/boxed";

const UserCard = ({user}: {user: AsyncData<User>}) => {
  return user.match({
    NotAsked: () => null,
    Loading: () => `Loading`,
    Done: (user) => {
      const name = user.name.getOr("anonymous");
      return `Hello ${name}!`;
    },
  });
};

Avoid accidental complexity

Boxed provides functional building blocks that make your code more maintainable, more expressive, and safer.

Focused on DX

We provide a very small API surface. With easy interop, and compatibility with the ecosystem (like ts-pattern)

Easy to reason about

The concepts exposed by Boxed are simple and accessible: you don't need a CS degree to get started.

Example of a request lifecycle management in a React component using Boxed.AsyncData

Build with the right tools

By using functional type-safe constructs like Option, Result and AsyncData, you can eliminate bugs right from the modeling.

Your code will be simpler, safer,and easier to reason about than with regular null-checks, exception flows and manual value tracking.

All of that for less that 3KBs when gzipped!

Tailored for your IDE

Thanks to our chaining API, you get a nice autocomplete right from the value and can easily name intermediate variables.

Boxed leverages the JavaScript class API so that you don't need to import any module to work with a Boxed value: it's all available as a method. On top of that, the Boxed API is minimal, so that your tooling doesn't feel overwhelming.

Cheatsheet table for the types of the map and flatMap functions

Get productive immediately

Boxed gives you the tools you need without requiring loads of theoretical knowledge.

We provide simple naming, documentation and escape hatches so that you don't get stuck. You get to learn as you use the library instead of getting frustrated over complex concepts.