Skip to content
Graphics Kit publisher

Building pages

The publisher can work with almost any page builder as long as it outputs files in a pattern the publisher can match to editions for the graphics server. (See Config > Pack locations.)

Directory-based pages

After being built, each page must reside in its own folder and be named index.html. For example, you cannot have about.html; instead, you should have about/index.html.

  • Directorydist
    • about.html ❌ Not allowed!
  • Directorydist
    • Directoryabout
      • index.html ✅ OK

Base paths

You’ll likely want to specify a base path for your pages in your page builder, which will let you build canonical link elements and fully specified paths to your static asses.

<html>
  <head>
    <link rel="canonical" href="https://www.reuters.com/graphics/.../" />
    <link href="https://www.reuters.com/.../styles.css" rel="stylesheet" />
  </head>
  <body></body>
</html>

You can use the getBasePath utility to get the appropriate base path from URLs saved to your package.json by the publisher. The util takes a mode parameter you can use to get different base paths depending on the verion of the project you’re building, either dev, test, preview or prod.

svelte.config.js
import { getBasePath } from '@reuters-graphics/graphics-kit-publisher';


const mode =
  process.env.PREVIEW ? 'preview'
  : process.env.NODE_ENV === 'production' ? 'prod'
  : 'dev';


const basePath = getBasePath(mode, {
  trailingSlash: false,
  rootRelative: true,
});
// e.g., "/graphics/ROOT-SLUG/WILD/asdjuspodfg"
const assetsPath = getBasePath(mode, 'cdn', {
  trailingSlash: false,
  rootRelative: false,
});
// e.g., "https://www.reuters.com/graphics/ROOT-SLUG/WILD/asdjuspodfg/cdn"


/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    paths: {
      base: basePath,
      assets: assetsPath,
    },
  },
};


export default config;

Preview pages

Before calling your preview build script, the publisher generates a unique URL and saves it to your package.json, which you can then use to satisfy page builders’ base path requirements:

package.json
{
  "scripts": {
    "build:preview": "PREVIEW=true vite build"
  },
  "reuters": {
    "graphic": {
      "preview": "https://graphics.thomsonreuters.com/testfiles/2025/your-project/"
    }
  }
}
import { getBasePath } from '@reuters-graphics/graphics-kit-publisher';


const basePath = getBasePath('preview');
// '/testfiles/2025/your-project'

Production pages

You’ll get base URLs from the graphics server for production pages.

The publisher saves these URLs with other pack metadata in your project’s package.json after uploading archives to the graphics server.

But the publisher also needs to see your built files to know which archives to upload — and each archive gets a different URL.

So the publisher builds your project once, against a placeholder base URL, and then swaps that placeholder for the real URL in each archive’s own copy of your built files. Every archive ends up pointing at itself.

In short, the uploading process looks like this:

  1. The publisher builds your project once, using a placeholder base URL.

  2. Scans the built files to determine what archives should be uploaded, and asks you anything it needs to know.

  3. Uploads dummy files for any archives found to get a URL from the graphics server and saves those URLs to package.json.

  4. Packs each archive, replacing the placeholder with that archive’s own URL — in its pages, its assets and its canonical links.

  5. Updates the dummy archives in the graphics server with the real files.

One embed, one page

Only an embed’s own page travels with it into its archive, so don’t link from an embed to another page in your project. A link to a sibling page has nothing to land on.

It may look like it works while you’re testing, because the whole of your app ships with every embed and your page builder can render other routes in the browser. But a refresh or a shared link goes straight to the server, where that page doesn’t exist.

Preview images

Interactive edition pages must have an image to represent them in the graphics server and on Reuters Connect.

If your image is included in the assets generated by your page builder (i.e., is not hosted somewhere else), you can include an og:image tag directly in the page:

<html>
  <head>
    <link rel="canonical" href="https://www.reuters.com/graphics/.../" />
    <meta
      property="og:image"
      content="https://www.reuters.com/graphics/.../share.jpg"
    />
  </head>
  <body></body>
</html>

Alternatively, your page builder can output the image in the same directory as your page and name it either _gfxpreview.png or _gfxpreview.jpg.

  • Directorydist
    • Directoryembeds
      • Directoryen
        • Directorypage
          • index.html
          • _gfxpreview.jpg