How to print zpl in web via javascript?

I have a zebra label printer. I am attempting to print labels for fun using javascript and webUSB.

The current setup prints blank labels.

Here is the excerpt:

// Get USB device (the zebra printer)
const printer = await navigator.usb.requestDevice({
  filters: [],
});
await printer.open();
await printer.selectConfiguration(deviceConfiguration);
await printer.claimInterface(interfaceNumber);

// Hello world print command
const source = `^XA
^FO100,80
^FDHello, World!^FS
^XZ
`;

// Send print command - Method 1
const encoded = new TextEncoder().encode(source);
await printer.transferOut(1, encoded); // 1 is the endpoint number. 1 is the only valid value for my printer. We can get this from the printer (type:USBDevice) object.
// => When executed, prints a blank label.

// Send print command - Method 2
const blob = new Blob([source], {
  type: "text/plain",
});

const arrayBuffer = await blob.arrayBuffer();
await printer.transferOut(1, arrayBuffer);
// => When executed, prints a blank label.

Can someone help me understand what am I doing wrong?

In the zpl documentation, they say:

Save the file as a .txt file and copy it to the printer from DOS command line.

enter image description here

I am attempting to find the equivalent in web.

Update: I don’t want to use 3rd party libraries. I’m attempting to understand the low level fundamentals.

Demo: https://github.com/vajahath/label-jet