How to publish TS/JS packages to JSR

In this article you will learn how to publish your own javascript/ts library to new npm-like package registry : JSR !

Table of Contents

What is JSR ( Javascript Registry )

The JavaScript Registry (JSR) is a modern package registry for JavaScript and TypeScript. JSR works with many runtimes (Node.js, Deno, browsers, and more) and is backwards compatible with npm. Learn more about why we built JSR.
jsr.io/docs/introduction

JSR is a package registry for javascript(also typescript). It is a similar tool like npm (node package manager) but it has advantages :

JSR supports ES modules out of the box. You can use export and import keywords in your code.
JSR supports Typescript out of the box. You can write TS freely and don’t have to spend time to transpile it to javascript
JSR works with many runtimes => Node.js, deno, cloudflare workers, browser…

Lets create a basic TS package and publish it to JSR

First, we will create our package than publish it to JSR.

Creating TS package

Create an empty folder and open it via your favourite code editor, I will be using VsCode.

Create a package.json file and main entry point for you package. In package.json change type to module so it will be compatible with JSR.

{
  "type" : "module"
}

You can see in below I have created a main.ts for my date-to-day package.

Write you logic into your main.ts file and export it. I have created a simple function that take a JS date type and return day name.

Publish it to JSR

It is time to publish our package.

First, go to JSR package publishing from this link. Then Sign In with Github.

After you Signed In, create a scope and a package name for your package.

Click Create to create a new scope, and click Create again for your package

After Creating both scope and package name, it will guide you to uploading section.
Create a jsr.json file for JSR config. Remember change “exports” field to your main file. Mine is main.ts

Then open a new terminal in your project directory, write command npx jsr publish. ( I assume you have nodejs installed )

Install required packages :

It will open a new browser windows and want approvel for publishing. Approve it.

After that steps your package will be published successfully and it will redirect you to package home page.

What is JSR Score ? and improving it.

You can see there is a JSR Score in the top right of the page. JSR score is an indicator of how well your project is documented.
If you click on the score, it will show you how to improve your JSR score :