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/ .
Open a project in Giraffe
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
Click the Plus sign in the app tool palette to access the app selector.
The App selector displays all of the apps you have available.
Select "iFrame" to add it to your project.
3. Point Giraffe to your app
Navigate to Main menu → Advanced → Json editor
Set the Iframe App Data to point to your SDK App’s URL
You can also add a URL for your app’s logo
4. Develop
The examples repo uses a lot (but not all) of the available functionality.