Skip to content

Extension setup

Project setup

Installation

bash
npm install @archilogic/extension-sdk

Basic example

ts
import { createHostConnection } from '@archilogic/extension-sdk'

export async function runPlugin() {
  const hostApi = createHostConnection()

  const largeMeetingRooms = await hostApi.getSpaces({
    where: { area: { gte: 50 }, category: 'meet' }
  })
  await hostApi.zoomToNode({ nodeId: largeMeetingRooms[0]?.id })
}

Manifest

Extensions require a manifest.json to be packaged with the /dist folder

jsonc
{
  "name": "My extension",
  // id of the extension, will be generated after initial deployment
  // required for updates
  "id": null,
  // version of your extension
  // updating an extension requires bumping the version
  "version": "0.9.0",
  // version of the extension-sdk that is used
  "sdkVersion": "0.4.0",
  // relative path to the bundled extension
  "entry": "./dist/index.js",
  "host": ["editor"],
  // whether the extension loads in a side 'panel', a 'popup' or 'none'
  "ui": "panel"
}

Template Coming soon

Use the template creation to get started.

bash
npm create @archilogic/extension-sdk@latest

Local Development

Editor supports loading extensions from localhost.

Make sure Developer Preview features are enabled for your account by the Archilogic Team. With that in place a 'Plugin sandbox' entry appears in the Editor's plugins menu.

You can use vite for previewing and bundling.

bash
npx vite

This will make your extension available at http://localhost:5173/src/index.ts

Copy paste the URL in the 'Load extension' dialog.

Deployment

Extensions can be created and updated via the Dashboard UI or via API

Package the extension

Create a zip that includes the dist folder and manifest.json. When using vite make sure to configure lib build pointing to your index.ts.

bash
npx vite build

Dashboard UI

Visit the extensions page

  • Click 'Add extension'
  • Provide a name
  • Upload the zip
  • Click 'Create'

API

Check out the API endpoints