SDK Web

Introduction

GreyCat’s Web SDK is available here @greycat/web and features:

Built on top of the Web Component standards and Shoelace
Tight integration with GreyCat std library
Provides several production-ready components for: charting, forms, virtual tables, etc.

How it works

When importing @greycat/web every Web Component that it defines will then be registered globally as Custom Elements.

Because some of those components communicate with GreyCat internally we need to tell them where to find the current instance. For this, the @greycat/sdk and more generally @greycat/web leverages global scope. All the functions and components that needs to communicate directly with GreyCat will look for a GreyCat instance at globalThis.greycat.default.

This implies that the only “initialization” that is needed is the following:

import '@greycat/web';

await gc.sdk.init();

// here you can safely use all of @greycat/web

Components

We offer a range of web components within the web SDK. Please check the Web Components section for further details or use the list below to jump directly to the various components.

Shoelace

By default @greycat/web also comes with all shoelace components already imported, you don’t require any extra configuration, once our library imported you are free to use any of shoelaces components.

You can access shoelace by importing sl from @greycat/web, in case you need to change internal configuration, for example to set a custom Icon LIbrary.

import { sl } from '@greycat/web';

sl.registerIconLibrary('default', {
  resolver: (name) => `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.0.0/icons/${name}.svg`,
});

d3

The d3.js library is also exposed

import { d3 } from '@greycat/web';