# Self-Made JS API Wrapper

**URL:** <https://discourse.getcockpit.com/t/self-made-js-api-wrapper/3229>\
**Category:** General\
**Created:** [July 26, 2025, 8:57pm UTC](https://discourse.getcockpit.com/t/self-made-js-api-wrapper/3229 "2025-07-26T20:57:11Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![pasu](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/pasu/32/1562_2.png) [@pasu](https://discourse.getcockpit.com/u/pasu)\
**Post date:** [July 26, 2025, 8:57pm UTC](https://discourse.getcockpit.com/t/self-made-js-api-wrapper/3229/1 "2025-07-26T20:57:11Z")

</div>

Heya!

I’ve been reworking my homepage and found Cockpit to be a slim yet powerful CMS. Was a little surprised to find out that there’s no API-wrapper for it, still wanted to give it a try. I’ve now implemented most of the fetching for collections and Assets in my own wrapper, including (generic) typing. Example usage:

```ts
// initialising with custom host
const api = createApi('https://cockpit.box.pasu.me/api');

// fetching all documents from a "projects" collection, including limit & sorting
// this will return a properly typed Array<Project>, where Project is a custom type
const projects = await api
  .collection<Project>(CollectionName.PROJECTS)
  .query({
    limit: 3,
    sort: {
      title: 1
    }
  });

// fetching a path to an image to include in a HTML image tag
const imagePath: string = api.image(
  // ID of image
  projects[0].image._id,
  // options passed via query params 
  {
    width: 512,
    binary: true
  }
).path;

// alternatively, you can fetch the asset with meta-data
// 'Asset' is a type provided by my wrapper, including all the meta-data returned from Cockpit
const image: Asset = await api.image(projects[0].image._id).fetch();

```

Currently, this is sufficient for my needs of simply displaying some blog-type stuff. If there’s any demand for it, I could certainly add the remaining features into my wrapper and publish it as a npm package.

If you want to check my code:

- [Wrapper](https://github.com/pascalstockert/pascalstockert/blob/main/frontend/src/api.ts)
- [Types](https://github.com/pascalstockert/pascalstockert/blob/main/frontend/src/types/api.types.ts)

Let me know what you think and whether you’d want to use this yourself!

Many greets from Germany  
Pasu

---

<div class="post-metadata">

**Author:** ![pasu](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/pasu/32/1562_2.png) [@pasu](https://discourse.getcockpit.com/u/pasu)\
**Post date:** [August 3, 2025, 3:40pm UTC](https://discourse.getcockpit.com/t/self-made-js-api-wrapper/3229/2 "2025-08-03T15:40:27Z")

</div>

Little update - I was bored and actually packed my little client into its own package and published it to npm (with its own [repository](https://github.com/pascalstockert/cockpit-js))!

I’ll continue implementing the remaining features and updating the documentation.