Skip to content
RevoGrid [Pro]

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/gantt';

JSON Snapshot Helpers

Section titled “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

Section titled “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

Section titled “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

Section titled “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);
Section titled “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

Section titled “Framework Examples”

Use the complete public-package workflow for your primary wrapper:

Svelte remains a secondary integration recipe. Use the custom-element approach from the Vanilla guide until its packaged wrapper and support contract match the four primary framework paths.

The Resource Planning demo shows a host-owned resource filter UI. Filtering updates grid.gantt.resourceFilterIds without reading rendered cells.

Resource filtering updates grid.gantt.resourceFilterIds:

grid.gantt = {
  ...project,
  resourceFilterIds: selectedResourceIds.length === allResourceIds.length
    ? undefined
    : selectedResourceIds,
};