Raster SDK
The Raster SDK connects your own app to your users' Raster libraries. It comes as two npm packages that run in the browser or Node.js: @raster-app/react for React apps, and @raster-app/sdk, the framework-free core.
A complete picker in one component
RasterPicker handles sign-in, browsing, search, upload, and picking. Your users choose an organization and library, open an asset to see it large with its variants, and pick it. Your app receives the asset in onPick.
npm install @raster-app/reactimport {
RasterPicker,
RasterProvider,
getFullSizeUrl,
localStorageCredentialStore,
} from '@raster-app/react'
import '@raster-app/react/styles.css'
export function Picker({ onImage }: { onImage: (url: string) => void }) {
return (
<RasterProvider
config={{
host: {
name: 'My App',
openExternal: (url) => window.open(url, '_blank'),
},
credentials: localStorageCredentialStore(),
}}
>
<RasterPicker
onPick={(asset) => onImage(getFullSizeUrl(asset) ?? '')}
/>
</RasterProvider>
)
}Sign in with a code
Users sign in on Raster and approve a code your app shows them. They can revoke your app at any time under Profile settings → Connected apps.
import {
createRasterClient,
localStorageCredentialStore,
signInWithDevice,
} from '@raster-app/sdk'
const raster = createRasterClient({
host: {
name: 'My App',
openExternal: (url) => window.open(url, '_blank'),
},
credentials: localStorageCredentialStore(),
})
const controller = new AbortController()
await signInWithDevice(raster, {
onCode: (device) => console.log(`Approve ${device.userCode}`),
signal: controller.signal,
})Or share one API key
To let every user of your app browse without signing in, connect an organization API key your app holds. The key stays in memory only, so connect it on each load. In RasterPicker, pass it as apiKey.
import { connectSharedApiKey } from '@raster-app/sdk'
await connectSharedApiKey(raster, {
apiKey: 'your-shared-api-key',
organizationId: 'acme',
})Every user can read a shared key, so give it Read access to only the libraries they need.
Build your own UI
In React, RasterProvider and hooks like useSession, useSignIn, useAssets, and useAssetSearch give your own components the same sign-in and data the picker uses.