GreyCat Web

Appearance

Getting Started ​

Install ​

Add the dependency to your project:

sh
pnpm install https://get.greycat.io/files/sdk/web/6.4/6.4.10-dev.tgz
pnpm install https://get.greycat.io/files/sdk/web/6.4/6.4.10-dev.tgz

Update with the latest version

Minimal setup ​

ts
import { GreyCat } from '@greycat/web';
import '@greycat/web/css/greycat.css';

globalThis.greycat.default = await GreyCat.init();
import { GreyCat } from '@greycat/web';
import '@greycat/web/css/greycat.css';

globalThis.greycat.default = await GreyCat.init();

Templates ​

We provide two different Git repositories template to get started:

sh
git clone git@hub.datathings.com:greycat/template/web.git template-web
git clone git@hub.datathings.com:greycat/template/web.git template-web
sh
git clone git@hub.datathings.com:greycat/template/react.git template-react
git clone git@hub.datathings.com:greycat/template/react.git template-react

Vite.js ​

A minimal example:

html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello GreyCat</title>
</head>

<body>
  <div id="app"></div>
  <script type="module" src="./src/index.ts"></script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello GreyCat</title>
</head>

<body>
  <div id="app"></div>
  <script type="module" src="./src/index.ts"></script>
</body>

</html>
ts
import { GreyCat } from '@greycat/web';
// for the default styling
import '@greycat/web/css/greycat.css';

const app = document.getElementById('app')!;

try {
  globalThis.greycat.default = await GreyCat.init({
    cache: new IndexedDbCache('greycat.default'),
  });

  const el = document.querySelector('gui-value')!;
  app.appendChild(el);

  el.value = await greycat.call('project::hello', ['world!']);
} catch (err) {
  app.textContent = 'Something went wrong';
}
import { GreyCat } from '@greycat/web';
// for the default styling
import '@greycat/web/css/greycat.css';

const app = document.getElementById('app')!;

try {
  globalThis.greycat.default = await GreyCat.init({
    cache: new IndexedDbCache('greycat.default'),
  });

  const el = document.querySelector('gui-value')!;
  app.appendChild(el);

  el.value = await greycat.call('project::hello', ['world!']);
} catch (err) {
  app.textContent = 'Something went wrong';
}
gcl
@expose
fn hello(name: String): String {
  return "Hello, ${name}";
}
json
{
  "name": "greycat-example",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "devDependencies": {
    "vite": "4.4.9",
    "@greycat/web": "https://get.greycat.io/files/sdk/web/6.4/6.4.10-dev.tgz",
    "typescript": "5.2.2"
  }
}
{
  "name": "greycat-example",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "devDependencies": {
    "vite": "4.4.9",
    "@greycat/web": "https://get.greycat.io/files/sdk/web/6.4/6.4.10-dev.tgz",
    "typescript": "5.2.2"
  }
}

Start this with:

sh
greycat serve --user=1
greycat serve --user=1
sh
pnpm dev
pnpm dev

Vanilla ​

html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://get.greycat.io/files/sdk/web/dev/6.4/6.4.10-dev.css">
  <script src="https://get.greycat.io/files/sdk/web/dev/6.4/6.4.10-dev.js"></script>
  <title>Hello GreyCat</title>
</head>

<body>
  <div id="app"></div>

  <script type="module">
    const app = document.getElementById('app');

    try {
      greycat.default = await greycat.GreyCat.init();

      const el = document.querySelector('gui-value');
      app.appendChild(el);

      el.value = await greycat.default.call('project::hello', ['world!']);
    } catch (err) {
      app.textContent = 'Something went wrong';
    }
  </script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://get.greycat.io/files/sdk/web/dev/6.4/6.4.10-dev.css">
  <script src="https://get.greycat.io/files/sdk/web/dev/6.4/6.4.10-dev.js"></script>
  <title>Hello GreyCat</title>
</head>

<body>
  <div id="app"></div>

  <script type="module">
    const app = document.getElementById('app');

    try {
      greycat.default = await greycat.GreyCat.init();

      const el = document.querySelector('gui-value');
      app.appendChild(el);

      el.value = await greycat.default.call('project::hello', ['world!']);
    } catch (err) {
      app.textContent = 'Something went wrong';
    }
  </script>
</body>

</html>
gcl
@expose
fn hello(name: String): String {
  return "Hello, ${name}";
}