1. Get an app running

One easy way to make your first app is to use vite. Following their docs first create a new project

npm create vite@latest

Then install the Giraffe SDK

npm install @gi-nx/iframe-sdk @gi-nx/iframe-sdk-react

Any other JS framework should work and you can even dev in the browser using https://codesandbox.io/ . We have a repo with several examples if you’d prefer to start there.

Once the app is running (ie you can access it from a browser at eg http://localhost:5173/), proceed.

2. Add the iframe app to your Giraffe project

3. Point Giraffe to your app

Navigate to **☰**Main menu → Advanced → Json editor

Then select your <app name> in the dropdown and make sure that url, logo and iframe are set in the private field.

{
  "id": "<project id>-<app id>",
  "app": "<app id>",
  "appName": "<app name>",
  **"private": {
    "url": "<url for iframe>",
    "logo": "<url for logo",
    "iframe": true,
  },**
  "project": "<project id>"
}

4. Integrate

Now you are ready to integrate the two apps. Install @gi-nx/iframe-sdk (ie yarn add @gi-nx/iframe-sdk) and then you can use the SDK within your iframe eg

import { giraffeState, rpc } from '@gi-nx/iframe-sdk';

If you like React hooks, please install @gi-nx/iframe-sdk-react and useGiraffeState will provide reactive access to the same data as in giraffeState.

See the SDK type docs for more details.