Skip to main content
The experimental_useWorkspaceSettings() hook provides real-time access to your app’s workspace settings. It automatically subscribes to settings updates, so your components will always reflect the current configuration.
The Workspace Settings API is experimental and may change in the future. Please don’t use it in production versions of your app.

​
Parameters

This hook takes no parameters. The return type is automatically inferred from your workspace settings schema defined in src/app.settings.ts.

​
Returns

Returns an object containing all workspace settings values as defined in your schema. The returned object is fully typed based on your schema definition.

​
Example

widget.tsx
import React from "react";
import { experimental_useWorkspaceSettings, Widget } from "attio/client";
import type { App } from "attio";

export const statusWidget: App.Record.Widget = {
  id: "sync-status",
  label: "Sync Status",
  Widget: ({ recordId }) => {
    const settings = experimental_useWorkspaceSettings();
    
    // Access settings values with full type safety
    // This automatically updates when settings change
    if (!settings.auto_sync_enabled) {
      return (
        <Widget.TextWidget>
          <Widget.Title>Sync Disabled</Widget.Title>
          <Widget.Text.Primary>
            Enable auto-sync in workspace settings
          </Widget.Text.Primary>
        </Widget.TextWidget>
      );
    }
    
    return (
      <Widget.TextWidget>
        <Widget.Title>Sync Active</Widget.Title>
        <Widget.Text.Primary>
          Syncing every {settings.sync_interval_minutes} minutes
        </Widget.Text.Primary>
      </Widget.TextWidget>
    );
  },
};

​
Type Safety

The hook’s return type is automatically inferred from your schema:
app.settings.ts
import { Settings, type SettingsSchema } from "attio";

const appSettingsSchema = {
  workspace: {
    team_name: Settings.string(),
    auto_sync_enabled: Settings.boolean(),
    sync_interval_minutes: Settings.number(),
  },
} satisfies SettingsSchema;

export default appSettingsSchema;

// TypeScript knows the exact shape of settings
const settings = experimental_useWorkspaceSettings();

settings.team_name // string
settings.auto_sync_enabled // boolean
settings.sync_interval_minutes // number
settings.nonexistent // TypeScript error!