# Integrations And Frameworks
URL: https://pro.rv-grid.com/guides/gantt/features/integrations-and-frameworks/
Source: src/content/docs/guides/gantt/features/integrations-and-frameworks.mdx
Description: Persist, import, export, print, and embed Gantt projects with framework-neutral recipes.
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.

```ts
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.

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

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

For file picker flows:

```ts
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`.

```ts
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.

```ts
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.

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

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

```ts
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.

```ts
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:

```ts
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](https://demo.rv-grid.com/gantt-basic/ts) uses `@revolist/svelte-datagrid` in `apps/portal/src/components/gantt/GanttSvelteExample.svelte`.
- [Resource Planning demo](https://demo.rv-grid.com/gantt-resource-planning/ts) shows resource planning; `apps/portal/src/components/gantt/GanttResourceFilterExample.ts` demonstrates a host-owned resource filter UI.

Resource filtering updates `grid.gantt.resourceFilterIds`:

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

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