Forem: Arshad Yaseen

Building a modern TypeScript Library in 2026 with Bun

Arshad Yaseen — Fri, 26 Sep 2025 15:19:52 +0000

Building TypeScript libraries has been painful for too long. Slow builds that take seconds. Complex configurations. Manual package.json maintenance. It's 2025, and we deserve better.

This guide shows you how to build modern TypeScript libraries with exceptional speed and ergonomics using Bunup, powered by Bun's native bundler.

Getting Started

Let's create a simple TypeScript library. First, ensure you have Bun installed, then create your project structure:

mkdir my-library
cd my-library
bun init -y

Create your first TypeScript file:

// src/index.ts
export function greet(name: string): string {
  return `Hello, ${name}!`;
}

export function add(a: number, b: number): number {
  return a + b;
}

The Speed Revolution

Here's where things get interesting. Traditional tools take seconds to build even simple libraries. Let's see the difference:

# Traditional approach with tsup
$ tsup src/index.ts
✓ Build completed in 5.4s

# Modern approach with bunup
$ bunup src/index.ts
✓ Build completed in 37ms

That's 37 milliseconds. Not 5.4 seconds. Not 400ms. Just 37ms.

This isn't about saving a second here and there. Instant builds fundamentally change how you work. Your development flow stays uninterrupted. Watch mode becomes instantaneous. Pre-commit hooks run without friction. Building becomes invisible.

Setting Up Your Build

Install bunup as a development dependency:

bun add --dev bunup

Create a configuration file:

// bunup.config.ts
import { defineConfig } from 'bunup';

export default defineConfig({
  entry: 'src/index.ts',
  format: ['esm', 'cjs'],
});

Add build scripts to your package.json:

{
  "scripts": {
    "build": "bunup",
    "dev": "bunup --watch"
  }
}

Now build your library:

bun run build

Your library is built in both ESM and CommonJS formats, with TypeScript declarations, in milliseconds.

Modern TypeScript Configuration

For the best performance and compatibility, enable isolatedDeclarations in your tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "declaration": true,
    "isolatedDeclarations": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

This enables dramatically faster declaration generation while ensuring your types are explicit and predictable. Learn more about isolated declarations.

Automatic Package Exports

One of the most tedious parts of library development is maintaining your package.json exports. Bunup handles this automatically.

Add the exports plugin to your configuration:

// bunup.config.ts
import { defineConfig } from 'bunup';
import { exports } from 'bunup/plugins';

export default defineConfig({
  entry: 'src/index.ts',
  format: ['esm', 'cjs'],
  plugins: [exports()]
});

Build your library and watch your package.json transform:

{
  "name": "my-library",
  "version": "1.0.0",
  "type": "module",
  "main": "./dist/index.cjs",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": {
        "types": "./dist/index.d.ts",
        "default": "./dist/index.js"
      },
      "require": {
        "types": "./dist/index.d.cts",
        "default": "./dist/index.cjs"
      }
    }
  }
}

Every path is correct. Every format is mapped. Every type declaration is in place. You never touch it manually again.

Multiple Entry Points

Real libraries often have multiple entry points. Bunup makes this effortless:

// bunup.config.ts
export default defineConfig({
  entry: ['src/index.ts', 'src/utils.ts', 'src/math.ts'],
  format: ['esm', 'cjs'],
  plugins: [exports()]
});

Each entry point gets its own output files and proper exports mapping. Your consumers can import exactly what they need:

import { greet } from 'my-library';
import { formatDate } from 'my-library/utils';
import { calculate } from 'my-library/math';

Keeping Your Library Clean

Bunup helps you maintain a clean, efficient library with the unused dependencies plugin:

// bunup.config.ts
import { defineConfig } from 'bunup';
import { exports, unused } from 'bunup/plugins';

export default defineConfig({
  entry: 'src/index.ts',
  plugins: [
    exports(),
    unused()
  ]
});

During build, you'll get warnings about dependencies you're not using, dependencies in the wrong section, and missing peer dependencies. Your library stays lean and your dependencies stay accurate.

Monorepo Support

Building a design system or component library with multiple packages? Bunup's workspace support makes monorepo development seamless:

// bunup.config.ts
import { defineWorkspace } from 'bunup';

export default defineWorkspace([
  {
    name: 'core',
    root: 'packages/core'
  },
  {
    name: 'utils',
    root: 'packages/utils'
  },
  {
    name: 'components',
    root: 'packages/components'
  }
]);

Build all packages with a single command:

bunup

Bunup handles incremental builds, only rebuilding packages that have changed. Watch mode works across all packages. Dependencies between packages are resolved automatically.

Advanced Configuration

For more complex scenarios, bunup provides additional options while keeping the experience simple. You can configure minification, source maps, externals, and more. See the bunup documentation for all available options.

// bunup.config.ts
export default defineConfig({
  entry: 'src/index.ts',
  format: ['esm', 'cjs'],
  minify: true,
  sourcemap: 'linked',
  target: 'node',
  plugins: [exports()]
});

Development Workflow

Your daily workflow becomes effortless:

# Start development with watch mode
bun run dev

# Build for production
bun run build

# Type check your code
bun run typecheck

Changes rebuild instantly. Type declarations generate automatically. Package exports stay synchronized. Everything just works.

Why This Matters

This isn't just about faster builds or better configuration. It's about removing friction from library development. When builds are instant, you experiment more freely. When configuration is automatic, you focus on your code. When everything works out of the box, you ship faster.

Traditional build tools were designed for a different era. They carry the weight of legacy decisions and plugin ecosystems. Bunup is designed for today, leveraging Bun's native speed and modern TypeScript features to deliver an experience that feels right.

Start Building

Create your next TypeScript library with bunup:

bunx @bunup/cli@latest create

Choose the TypeScript template and start building. Your library will have instant builds, automatic exports, proper TypeScript configuration, and everything you need to publish to npm.

The future of TypeScript library development is here. Fast, ergonomic, and joyful. Welcome to modern library development with bunup.

Building a TypeScript Library in 2025

Arshad Yaseen — Wed, 23 Jul 2025 22:55:03 +0000

If you've built a TypeScript library recently, you know the pain. You spend more time wrestling with build configurations than actually writing code. Your tsup builds take 4 seconds.

It's 2025. We can do better.

The TypeScript ecosystem has been missing a tool that combines:

Lightning-fast builds (sub-100ms, not multi-second)
Zero-config ergonomics that scale with complexity
Modern TypeScript features like isolatedDeclarations
Built-in intelligence for common library tasks

Enter the Speed Revolution

Here's what modern TypeScript library development should look like:

# Traditional approach
$ tsup src/index.ts
✓ Build completed in 1.4s

# What's possible in 2025 with bunup
$ bunup src/index.ts
✓ Build completed in 37ms

37 milliseconds. Not 1.8 seconds. Not 400ms. 37ms.

Bunup is powered by Bun's native bundler, making it fast by default with instant TypeScript declaration generation.

This isn't just about saving time (though saving 1.7+ seconds per build adds up). It's about changing how you develop. When builds are instant, you can:

Iterate faster during development
Run builds in watch mode without battery drain
Include builds in pre-commit hooks without friction
Actually enjoy the development process

Modern TypeScript: Isolated Declarations

TypeScript 5.5 introduced isolatedDeclarations - a game-changer for library authors that most tools still don't properly support.

Why It Matters

Traditional declaration generation analyzes your entire codebase to infer types:

// Old way - requires whole-program analysis
export function getUserData(id: string) {
  return database.users.find(user => user.id === id); // Inferred return type
}

With isolatedDeclarations, you're explicit about your public API:

// Modern way - explicit, fast, reliable
export function getUserData(id: string): Promise<User | null> {
  return database.users.find(user => user.id === id);
}

The Benefits

10x faster declaration generation
More predictable types for library consumers
Better encapsulation - your internal types stay internal
Clearer intent - you explicitly define what's public

Enable it in your tsconfig.json:

{
  "compilerOptions": {
    "declaration": true,
    "isolatedDeclarations": true
  }
}

Modern bundlers should embrace this, not fight it.

Beyond Speed: Beautiful Ergonomics

Fast builds are just the beginning. Modern library tooling should understand your needs:

Package Exports

// bunup.config.ts
export default defineConfig({
  entry: ['src/index.ts'],
  plugins: [exports()]
});

Your package.json automatically gets:

{
  "main": "./dist/index.cjs",
  "module": "./dist/index.js", 
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": {
        "types": "./dist/index.d.ts",
        "default": "./dist/index.js"
      },
      "require": {
        "types": "./dist/index.d.cts", 
        "default": "./dist/index.cjs"
      }
    }
  }
}

No more manual exports field maintenance. No more forgetting the types field. No more mismatched paths.

Unused Dependencies

plugins: [unused()]

Get warnings about:

Dependencies you're not actually using
Dev dependencies that should be regular dependencies
Missing peer dependencies

And a lot more beautiful plugins that you love.

Monorepo Support

Building multiple packages? Bunup workspaces make it effortless:

// bunup.config.ts
export default defineWorkspace([
  {
    name: "core",
    root: "packages/core",
    config: { entry: ["src/index.ts"], format: ["esm", "cjs"] }
  },
  {
    name: "utils", 
    root: "packages/utils",
    config: { entry: ["src/index.ts"], format: ["esm"] }
  }
]);

Build all packages with a single command, with incremental builds that only rebuild what's changed. Perfect for design systems, component libraries, and complex projects.

The Full Developer Experience

Here's what building a TypeScript library looks like in 2025:

Initial Setup (10 seconds)

bunx bunup@latest --new

You get:

TypeScript configured with isolatedDeclarations
Bun-powered testing setup
Biome for linting and formatting
GitHub Actions for CI/CD
Automatic npm publishing workflow

Development Workflow

bun run dev    # Watch mode with instant rebuilds
bun run test   # Lightning-fast tests
bun run build  # Production build in ~37ms

Publishing

bun run release

Automatically:

Bumps version
Generates changelog
Creates GitHub release
Publishes to npm with provenance

Real-World Performance Comparison

I tested this with a medium-sized TypeScript library (15 source files, 3 entry points):

Tool	Build Time	Rebuild Time
tsup	1.8s	0.6s
unbuild	1.1s	0.4s
tsdown	108ms	34ms
bunup	37ms	8ms

That's not a typo. 37 milliseconds for a complete build with TypeScript declarations.

⭐ Star bunup on GitHub and join the speed revolution.

The future of TypeScript library development is here. It's fast, it's simple, and it's available at bunup.dev today.

Build a blog app with new Next.js 13 app folder and Contentlayer

Arshad Yaseen — Wed, 05 Apr 2023 18:46:15 +0000

Here is the demo 👋

Create a Next.js app
Create a blog page with contentlayer
Styling the blog
Custom components
List all posts
Highlight codes

Let's get started!

First, we need to create a new Next.js app with the new app folder feature:

npx create-next-app@latest --ts --experimental-app

You can also use Javascript instead of Typescript. In this tutorial we will use Typescript.

Then, you need to install the Contentlayer:

npm i contentlayer next-contentlayer @opentelemetry/api

Now, export the contentlayer config in the next.config.js:

const { withContentlayer } = require("next-contentlayer");

module.exports = withContentlayer({
  experimental: { appDir: true },
});

Now, we need to create a contentlayer.config.ts file in the root of the project and add the following code:

import { defineDocumentType, makeSource } from "contentlayer/source-files";

const Post = defineDocumentType(() => ({
  name: "Post",
  filePathPattern: `**/*.mdx`,
  contentType: "mdx",
  fields: {
    title: {
      type: "string",
      description: "The title of the post",
      required: true,
    },
    date: {
      type: "date",
      description: "The date of the post",
      required: true,
    },
  },
  computedFields: {
    url: {
      type: "string",
      resolve: (doc) => `/posts/${doc._raw.flattenedPath}`,
    },
  },
}));

export default makeSource({
  contentDirPath: "posts",
  documentTypes: [Post],
});

Above code is the config for the Contentlayer. It will create a Post document type and will generate the url field based on the flattenedPath field.

You can add more document types and fields such as Author and Category and more.

Now, we need to create a posts folder in the root of the project and create a hello-world.mdx file in it and add the following code:

You can name the file whatever you want. In this tutorial, we will use hello-world.mdx:

---
title: "How to create Next.js app"
date: 2023-04-06
---

# Install Next.js

### Fist you need to install Next.js with the following command:

npm i create-next-app@latest

Above code is the mdx file. You can use md instead of mdx. You can add more fields such as description and author and more.

Then, restart the app with the following command:

npm run dev

Now, you can see new .contentlayer folder in the root of the project. This folder contains the generated JSON files, types and more.

We need to install date-fns for sorting posts by date and format the date:

npm i date-fns

And we need to add the following code in the tsconfig.json file:

"paths": {
  "@/*": ["./*"],
  "contentlayer/generated": ["./.contentlayer/generated"]
}

Above code is for importing the generated files from the .contentlayer folder.

Now, we need to create a posts folder in the app folder and create a [slug] folder in it. and create a page.tsx file in [slug] folder and add the following code:

app/posts/[slug]/page.tsx

import { allPosts } from "contentlayer/generated";
import { getMDXComponent } from "next-contentlayer/hooks";
import { format, parseISO } from "date-fns";

export const generateStaticParams = async () =>
  allPosts.map((post:any) => ({ slug: post._raw.flattenedPath }));
export const generateMetadata = ({ params }: any) => {
  const post = allPosts.find(
    (post: any) => post._raw.flattenedPath === params.slug: any
  );
  return { title: post?.title, description: post?.description };
};

const PostLayout = ({ params }: { params: { slug: string } }) => {
  const post = allPosts.find((post) => post._raw.flattenedPath === params.slug);

  let MDXContent;

  if (!post) {
    return <div>404</div>;
  } else {
    MDXContent = getMDXComponent(post!.body.code);
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{format(parseISO(post.date), "LLLL d, yyyy")}</p>
      <article>
        <MDXContent />
      </article>
    </div>
  );
};

export default PostLayout;

Above code is the page for the blog post. It will render the blog post based on the slug parameter.

Now, you can see the blog rendered in the http://localhost:3000/posts/hello-world:

Styling the blog

Now, we need to style the blog using CSS or others. In this tutorial, we will use CSS:

globals.css

pre {
  padding: 15px 20px;
  border-radius: 10px;
  background-color: #f9f8f981;
  overflow: auto;
  font-size: 0.9rem;
  margin: 40px 0;
}
article p {
  font-size: 1rem;
  line-height: 1.8rem;
  margin-top: 20px;
}
article h1 {
  font-size: 2.5rem;
  line-height: 3.5rem;
  margin-top: 60px;
  font-weight: 425;
}

...

Get full example css code from here

Now, you can see the blog styled:

Also you can use TailwindCSS or others.

Custom components

Custom components is a great feature of MDX. You can create your own components and use them in your blog posts.

For example, we can create a CodeSnippet component:

app/posts/[slug]/page.tsx

import { allPosts } from "contentlayer/generated";
import { getMDXComponent } from "next-contentlayer/hooks";
import { format, parseISO } from "date-fns";
import { Snippet } from "@geist-ui/core";

...

const CodeSnippet = (props: any) => (
 <Snippet {...props} text={props.text} />
);

 return (
    <div>
      <h1>
        {post.title}
      </h1>
      <p>{format(parseISO(post.date), "LLLL d, yyyy")}</p>
      <article>
        <MDXContent components={{ CodeSnippet }} />
      </article>
    </div>
  );

export default PostLayout;

Now, you can use the CodeSnippet component in your blog posts:

---
title: How to create a Next.js app
date: 2023-04-06
---

# Install Next.js

### First, install Next.js using the following command:

<CodeSnippet text="npx create-next-app@latest" />

Now, you can see the CodeSnippet component in the blog post:

List all posts

Now, we need to create a page that lists all posts. For this, we need to create a posts folder in the app folder and create a page.tsx file in it and add the following code:

app/posts/page.tsx

import Link from "next/link";
import { allPosts, Post } from "contentlayer/generated";
import { compareDesc } from "date-fns";

function PostCard(post: Post) {
  return (
    <div>
      <h2>
        <Link href={post.url} legacyBehavior>
          {post.title}
        </Link>
      </h2>
      <p>{post.description}</p>
    </div>
  );
}

function page() {
  const posts = allPosts.sort((a, b) =>
    compareDesc(new Date(a.date), new Date(b.date))
  );

  return (
    <div>
      <div>
        {posts.map((post, idx) => (
          <PostCard key={idx} {...post} />
        ))}
      </div>
    </div>
  );
}

export default page;

Now, you can see the list of all posts in the http://localhost:3000/posts:

Highlight codes

Now, we need to highlight the codes in the blog posts. For this, we will use rehype-pretty-code:

npm i rehype-pretty-code shiki

Now, we need to add the rehype-pretty-code plugin to the contentlayer.config.ts file:

contentlayer.config.ts

import { defineDocumentType, makeSource } from "contentlayer/source-files";
import rehypePrettyCode from "rehype-pretty-code";

const Post = defineDocumentType(() => ({
  ...
}));

const rehypeoptions = {
    // Use one of Shiki's packaged themes
    theme: "light-plus",
    // Set to true to keep the background color
    keepBackground: true ,
    onVisitLine(node: any) {
      if (node.children.length === 0) {
        node.children = [{ type: "text", value: " " }];
      }
    },
    onVisitHighlightedLine(node: any) {
      node.properties.className.push("highlighted");
    },
    onVisitHighlightedWord(node: any, id: any) {
      node.properties.className = ["word"];
    },
  };

export default makeSource({
  contentDirPath: "posts",
  documentTypes: [Post],
  mdx: {
    rehypePlugins: [[rehypePrettyCode, rehypeoptions]],
  },
});

Now, you can see the highlighted codes in the blog posts:

You can find more information about rehype-pretty-code
and Shiki themes.

Finally you can start building your blog with Contentlayer and Next.js. The great feature of Contentlayer is that Contentlayer will automatically save and refresh the blog when you add a new blog post or edit an existing blog post.

Conclusion

In this tutorial, we have learned how to create a blog using Next.js, Contentlayer, and MDX. We have learned how to create a blog post, how to list all posts, and how to highlight codes in the blog posts.

You can find the source code of the Contentlayer blog in the following GitHub repository:

Source code of example

Resources

About the author

Arshad Yaseen. I'm a software engineer and I love to create aesthetic frontends. If you have any questions, feel free to ask me on Twitter.

Easily update your Web App's manifest file with react-manifest npm library

Arshad Yaseen — Thu, 26 Jan 2023 17:34:19 +0000

Github : https://github.com/arshad-yaseen/react-manifest
NPM : https://www.npmjs.com/package/react-manifest

Learn how to use the React-Manifest library to easily update your web app's manifest.json file with new icons, names, and other details. Step-by-step instructions and code examples are provided to help you get started and make the most of this powerful tool.

‎ ‎

Installation

with npm

  npm install react-manifest

with yarn

  yarn add react-manifest

Step 2

Import the package in your React component

  import reactManifest from "react-manifest"

  const reactManifest = require("react-manifest")

Step 3

Add a <link> tag in your index.html file with the id attribute set to "manifest-placeholder" and href attribute set to "./manifest.json"

  <link rel="manifest" id="manifest-placeholder" href="./manifest.json"  />

Step 4

In your React component, create an object with the details you want to update in your manifest.json file. For example:

  const manifestDetails = {

    "name": "My Web App",
    "short_name": "My App",
    "start_url": "index.html",
    "display": "standalone",
    "orientation": "portrait",
    "theme_color": "#000000",
    "background_color": "#ffffff",
    "icons": [
        {
            "src": "icon-192x192.png",
            "sizes": "192x192"
        },
        {
            "src": "icon-512x512.png",
            "sizes": "512x512"
        }
    ],


    // And More...

}

Step 5

Use the update method to update your manifest.json file by passing in the manifest details and the id of the <link> tag in your index.html file.

  reactManifest.update(manifestDetails, "#manifest-placeholder")

Final ReactJs Code

import React, { useEffect } from 'react';
import reactManifest from 'react-manifest';

const MyComponent = () => {

  useEffect(() => {

    const manifestDetails = {
      "name": "My Web App",
      "short_name": "My App",
      "start_url": "index.html",
      "display": "standalone",
      "orientation": "portrait",
      "theme_color": "#000000",
      "background_color": "#ffffff",
      "icons": [
        {
            "src": "icon-192x192.png",
            "sizes": "192x192"
        },
        {
            "src": "icon-512x512.png",
            "sizes": "512x512"
        }
      ],

      And More...

    };

    reactManifest.update(manifestDetails, "#manifest-placeholder");

  }, []); 


  return (

    <div>
        ...
    </div>

  );
};

export default MyComponent;

Final HTML Code

  <!DOCTYPE html>
<html>
  <head>
    <title>My Web App</title>
    <link rel="manifest" id="manifest-placeholder" href="./manifest.json"  />
  </head>
  <body>
    <div id="root"></div>
    <script src="./index.js"></script>
  </body>
</html>

💖✨

And that's it! You have successfully updated your manifest.json file with the details provided. You can use this package to easily update your manifest.json file and customize your PWA experience.

Forem: Arshad Yaseen

Building a modern TypeScript Library in 2026 with Bun

Getting Started

The Speed Revolution

Setting Up Your Build

Modern TypeScript Configuration

Automatic Package Exports

Multiple Entry Points

Keeping Your Library Clean

Monorepo Support

Advanced Configuration

Development Workflow

Why This Matters

Start Building

Building a TypeScript Library in 2025

Enter the Speed Revolution

Modern TypeScript: Isolated Declarations

Why It Matters

The Benefits

Beyond Speed: Beautiful Ergonomics

Package Exports

Unused Dependencies

Monorepo Support

The Full Developer Experience

Initial Setup (10 seconds)

Development Workflow

Publishing

Real-World Performance Comparison

Build a blog app with new Next.js 13 app folder and Contentlayer

Here is the demo 👋

Contents

Let's get started!

Styling the blog

Custom components

List all posts

Highlight codes

Conclusion

Resources

About the author

Easily update your Web App's manifest file with react-manifest npm library

‎ ‎

Installation

Step 2

Step 3

Step 4

Step 5

Final ReactJs Code

Final HTML Code

💖✨

And that's it! You have successfully updated your manifest.json file with the details provided. You can use this package to easily update your manifest.json file and customize your PWA experience.