A tiny JavaScript library for packing 2D rectangles into a near-square container, which is useful for generating CSS sprites and WebGL textures. Similar to shelf-pack, but static (you can't add items once a layout is generated), and aims for maximal space utilization.
A variation of algorithms used in rectpack2D and bin-pack, which are in turn based on this article by Blackpawn.
importpotpackfrom'potpack';constboxes=[{w: 300,h: 50},{w: 100,h: 200},
...
];const{w, h, fill}=potpack(boxes);// w and h are resulting container's width and height;// fill is the space utilization value (0 to 1), higher is better// potpack mutates the boxes array: it's sorted by height,// and box objects are augmented with x, y coordinates:boxes[0];// {w: 300, h: 50, x: 100, y: 0}boxes[1];// {w: 100, h: 200, x: 0, y: 0}Install with NPM: npm install potpack.
Potpack is provided as a ES module, so it's only supported on modern browsers, excluding IE:
<scripttype="module">importpotpackfrom'https://cdn.skypack.dev/potpack';
...
</script>In Node, you can't use require — only import in ESM-capable versions (v12.15+):
importpotpackfrom'potpack';