Skip to content

Common Integration Workflows

This guide covers two fundamental approaches for integrating GraFx into your application. Both approaches give you full control over the end-user experience—the key difference is where your documents are stored.

Which Workflow Is Right for You?

GraFx-Managed Documents Self-Managed Documents
Document storage GraFx platform Your own system
Asset storage GraFx platform (or custom connector) Your asset management system (via custom connector)
Best for Teams who want to leverage GraFx infrastructure Teams with existing storage systems, require data analytics, or strict data residency requirements
Setup effort Lower Higher (requires custom connector)

Workflow 1: GraFx-Managed Documents

Choose this if you want to store documents on GraFx while managing the end-user experience in your own application.

In this workflow, end-users log into your application (not chiligrafx.com). Your application communicates with GraFx via the Environment API, and documents are stored on GraFx while you manage their lifecycle through your own database using document IDs.

What You Will Need

  • Fonts stored on your GraFx environment
  • Integration client credentials with all permissions (for output and document management)
  • Integration client credentials with read-only permissions (for the editor)
  • A custom UI
  • A database to manage document references

Optional

  • Custom Media Connector to your asset management system

Phase 1: Setup

  1. Register your integrations in GraFx to obtain two sets of client credentials:
  2. One with all permissions (for output operations)
  3. One with read-only permissions (for the editor)

  4. See Integration Permissions

  5. Create a template registration workflow for your designers. When a designer creates a Template in GraFx Studio, they register it in your application by storing its ID in your database. Optionally, allow them to register specific output settings as well.

Phase 2: End-User Flow

When an end-user selects a product in your application:

  1. Generate tokens for both integrations:

  2. POST https://integration-login.chiligrafx.com/oauth/token

  3. Create a Project from the Template using the all-permissions token:

  4. POST /api/v1/environment/{environment}/projects
  5. Store the new Project ID in your database

  6. See Understanding Templates and Projects

  7. Download the Project JSON:

  8. GET /api/v1/environment/{environment}/projects/{projectId}/document

  9. Load the editor in your custom UI using the read-only token:

  10. See Studio SDK Quickstart

  11. See Studio UI

  12. Save the document when the user is done using the all-permissions token:

  13. PUT /api/v1/environment/{environment}/projects/{projectId}

  14. Generate a preview (optional) either:

  15. In the browser via Studio SDK: layout.getSelectedSnapshot()
  16. Via the REST API: GET /api/v1/environment/{environment}/projects/{projectId}/preview/{previewType}

Phase 3: Output Generation

When your application is ready to produce final output:

  1. Download the Output Settings:

  2. GET /api/v1/environment/{environment}/output/settings

  3. Download the Project JSON:

  4. GET /api/v1/environment/{environment}/projects/{projectId}/document

  5. Generate output using the all-permissions token (match the endpoint to your desired format):

  6. POST /api/v1/environment/{environment}/output/pdf
  7. POST /api/v1/environment/{environment}/output/jpg
  8. POST /api/v1/environment/{environment}/output/png
  9. POST /api/v1/environment/{environment}/output/gif
  10. POST /api/v1/environment/{environment}/output/mp4

Workflow 2: Self-Managed Documents

Choose this if you want to store documents in your own system and only use GraFx for editing and output rendering.

In this workflow, assets are stored externally via Connectors, documents are stored in your own system, and the Environment API is used only for editing and generating output. This minimizes your dependency on the GraFx platform.

What You Will Need

  • Custom Media Connector to your asset management system
  • Fonts stored on your GraFx environment (until Font Connectors are released)
  • Integration client credentials with all permissions (for output)
  • Integration client credentials with read-only permissions (for the editor)
  • A custom UI
  • Storage for document JSON (your own system)

Phase 1: Setup

  1. Create and register a Custom Media Connector for your asset management system:

  2. See Build a Simple Media Connector

  3. Register your integrations in GraFx to obtain two sets of client credentials:

  4. One with all permissions (for output operations)
  5. One with read-only permissions (for the editor)

  6. See Integration Permissions

  7. Create a template registration workflow for your designers. When a designer creates a Template in GraFx Studio, download and store the JSON in your own system:

  8. GET /api/v1/environment/{environment}/templates/{templateId}/download

Phase 2: End-User Flow

Your application controls the entire user experience. GraFx is only involved when the user opens the editor:

  1. Generate a token with read-only permissions:

  2. POST https://integration-login.chiligrafx.com/oauth/token

  3. Load your custom UI with the document JSON (from your storage) and the token:

  4. See Studio SDK Quickstart

  5. See Studio UI

  6. Save the document when the user is done by storing the JSON back to your system.

  7. Generate a preview (optional) either:

  8. In the browser via Studio SDK: layout.getSelectedSnapshot()
  9. Via the REST API: GET /api/v1/environment/{environment}/projects/{projectId}/preview/{previewType}

Phase 3: Output Generation

When your application is ready to produce final output:

  1. Generate a token with all permissions:

  2. POST https://integration-login.chiligrafx.com/oauth/token

  3. Download the Output Settings:

  4. GET /api/v1/environment/{environment}/output/settings

  5. Generate output using the all-permissions token (match the endpoint to your desired format):

  6. POST /api/v1/environment/{environment}/output/pdf
  7. POST /api/v1/environment/{environment}/output/jpg
  8. POST /api/v1/environment/{environment}/output/png
  9. POST /api/v1/environment/{environment}/output/gif
  10. POST /api/v1/environment/{environment}/output/mp4