1. Get an SDK app running

Option 1

We have a repo with several examples. If you want to develop an app, this is the best place to start.

Option 2

If you’d prefer to start from scratch,

Install @gi-nx/iframe-sdk (ie yarn add @gi-nx/iframe-sdk) so that your SDK app can interact with Giraffe

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

If you use React hooks, install @gi-nx/iframe-sdk-react. useGiraffeState provides a convenient method to access the data from giraffeState within React components.

Option 3

If you’d just like to play around, you can even dev in the browser using https://codesandbox.io/ .

1. Open https://codesandbox.io/p/sandbox/icy-https-xtmx83?file=%2Fsrc%2FApp.tsx%3A1%2C1

2. Open a project in Giraffe

3. Point Giraffe to the Codesandbox app url. The one that looks like *https://xtmx83-5173.csb.app/*

   

   See step 3 below for where to enter the url into Giraffe

2. Add the iframe app to your Giraffe project

3. Point Giraffe to your app

1. Navigate to ☰Main menu → Advanced → Json editor

   

2. Set the Iframe App Data to point to your SDK App’s URL