First import the SDK libraries. Below are some snippets covering some common use cases.

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

Subscribe to changes in user draw geometries

// in a react component
const rawSections = useGiraffeState('rawSections');

// or in vanilla JS
giraffeState.addListener(['rawSections'], () => {
     console.log(giraffeState.get('rawSections'));
});

Save GeoJSON as a layer

rpc.invoke('updateTempLayerGeoJSON', [
    'My Layer Name',
    { type: 'FeatureCollection', features: [...] }
]);

This will create a new layer if one with the provided name does not already exist. Layer is temporary in that it won’t persist on refresh.

Get the contents of a layer as GeoJSON

const layerContents = await rpc.invoke('getLayerContents', [
    'Some Layer Name'
]);

Layer name as it appears in left hand layer menu.

Save app specific unstructured data

const setData = changes => {
  // every "app" has access to an unstructured JSON store called "public"
  // note: it's "public" to other apps the user has added to that Giraffe project
  const activePa = giraffeState.get('selectedProjectApp');
  rpc.invoke('updateProjectApp', [
    activePa.app,
    {
      ...activePa,
      public: {
        ...activePa.public,
        ...changes
      }
    }
  ]);
};

Load app specific unstructured data

const data = useGiraffeState("selectedProjectApp")?.public;

Get user info

const user = useGiraffeState('giraffe_user');