Integrations And Frameworks

These recipes keep transport and framework ownership in your application. Inject fetch, state, database clients, DOM targets, and file readers/writers from your host app.

import {
  ProjectSnapshotGraphqlAdapter,
  ProjectSnapshotRestAdapter,
  ProjectSnapshotSupabaseAdapter,
  buildCreateProjectSnapshotTableSql,
  buildLoadProjectSnapshotSql,
  buildSaveProjectSnapshotSql,
  cloneProjectSnapshot,
  createJsonSnapshotRecipe,
  createPrintPdfExportRecipe,
  exportProjectSnapshot,
  parseProjectSnapshotJson,
  printGanttContainer,
} from '@revolist/revogrid-enterprise';

JSON Snapshot Helpers

Use JSON helpers for local import/export, file handoff, tests, undo buffers, or backend payloads.

const draft = cloneProjectSnapshot(project);
const json = exportProjectSnapshot(draft, { space: 2 });
const parsed = parseProjectSnapshotJson(json);

if (parsed.ok) {
  applyProject(parsed.project);
}

For file picker flows:

const recipe = createJsonSnapshotRecipe({
  readText: () => fileInputText,
  writeText: (_fileName, contents) => saveTextFile(contents),
});

await recipe.save(project, 2);
const imported = await recipe.load();

REST Persistence

ProjectSnapshotRestAdapter loads and saves serialized project snapshots through an injected fetchImpl.

const adapter = new ProjectSnapshotRestAdapter({
  url: '/api/gantt/project/demo',
  headers: { authorization: 'Bearer token' },
  fetchImpl,
  space: 2,
});

const project = await adapter.load();
await adapter.save(project);

GraphQL Persistence

Use the GraphQL adapter when the backend exposes project snapshots through operations.

const adapter = new ProjectSnapshotGraphqlAdapter({
  url: '/graphql',
  fetchImpl,
  loadQuery: 'query LoadProject($id: ID!) { projectSnapshot(id: $id) }',
  saveMutation: 'mutation SaveProject($id: ID!, $snapshot: String!) { saveProjectSnapshot(id: $id, snapshot: $snapshot) }',
});

const project = await adapter.load({ variables: { id: 'demo' } });
await adapter.save(project, { variables: { id: 'demo' } });

Supabase And PostgreSQL

Use SQL builders with any PostgreSQL executor, or the Supabase-like adapter with a compatible client shape.

await executor.query(buildCreateProjectSnapshotTableSql());
await executor.query(buildSaveProjectSnapshotSql(project));

const result = await executor.query(
  buildLoadProjectSnapshotSql(project.id),
);

const adapter = new ProjectSnapshotSupabaseAdapter(supabaseLikeClient);

await adapter.save(project);
const restored = await adapter.load(project.id);

Print And Save As PDF

The print recipe prepares a Gantt container for browser printing. Users can choose Print or Save as PDF in the native dialog.

const result = printGanttContainer(host, {
  document,
  window,
  metadata: {
    title: project.name,
    subtitle: `${project.tasks.length} tasks`,
    range: { startDate: '2026-05-01', endDate: '2026-05-31' },
  },
});

For a reusable command:

const printRecipe = createPrintPdfExportRecipe({
  target: host,
  document,
  window,
});

printRecipe.exportProject(project, { label: 'May reporting window' });

Framework Examples

The portal contains concrete framework references:

• Svelte Gantt example uses @revolist/svelte-datagrid in packages/portal/src/components/gantt/GanttSvelteExample.svelte.
• Resource Planning demo shows resource planning; packages/portal/src/components/gantt/GanttResourceFilterExample.ts demonstrates a host-owned resource filter UI.

Resource filtering updates grid.gantt.resourceFilterIds:

import { createFilteredGanttConfig } from '@revolist/revogrid-examples/components/gantt/GanttResourceFilterExample.ts';

grid.gantt = createFilteredGanttConfig(
  baseConfig,
  selectedResourceIds,
  allResourceIds,
);