Keystatic Cloud

Keystatic Cloud simplifies authentication (GitHub) with your projects. No need to deal with environment variables and a custom GitHub app.

Keystatic Cloud also offers opt-in products such as Cloud Images (an image storage, optimisation and delivery service) or multi-player editing.

Keystatic Cloud lets you connect to GitHub and authenticate for one or multiple Keystatic projects.

It skips the more complicated process of setting up GitHub mode, while also allowing team members to edit content without needing a GitHub account.

Keystatic cloud organises projects into teams. Each team can have multiple projects, and each project is be connected to a specific GitHub repository.

User access is set at the team level, so every user in team will have access to all projects within that team.

Creating a Keystatic Cloud account is free. You can create as many teams and projects as needed.

The free plan allows for up to 3 users per team.

If you need more than 3 users on a given team, you'll need to upgrade that specific team to Pro. You can do so from the "billing" tab for that team.

Keystatic Cloud Pro starts at $10/month. Adding beyond 3 users to a team costs $5/month per user.

A Pro plan only affects the one team it's applied to.

Besides allowing you to add more than 3 users to a team, Keystatic Cloud Pro also offers the following features:

• Multi-player editing (experimental): collaborate with other editors in real-time on the same document.
• Cloud Images: upload, transform and serve optimized images without cluttering your GitHub repository.

Once subscribed to Pro, you'll be able to enable these features on the settings tab of a given team.

Cloud Images is an opt-in image storage and delivery service that optimises your images for the web.

Each Keystatic Cloud project can have its own Image Library, where you can upload images and copy the URL to use in your content.

When using Keystatic Cloude image URLs, you can pass the following optional query parameters to drastically improve the performance of your images:

• fit — how the image should be resized to fit the dimensions you specify. Possible values are scale-down, contain, cover and crop.
• format (f) — the image format to use. Possible values are png, avif, webp and jpeg. If no format is provided, Keystatic Cloud will auto-detect browser capabilities and serve the most optimal format.
• quality (q) — the quality of the image. A number between 1 and 100.
• height (h) — the height of the image. A number between 1 and 10240.
• width (w) — the width of the image. A number between 1 and 10240.

You can provide one or both of height and width, which will have a different effect based on the fit.

Here's an example URL with image transform query parameters:

https://[IMAGE_URL]?width=240&height=480&fit=crop

Keystatic provides a cloudImage field, which can be used instead of the regular image field if Keystatic is running in cloud mode, and the Image Library is enabled for the project.

Keystatic also provides a CloudImage component block, which can be used within the flow of a document field.

Again, you'll need Keystatic running in cloud mode, and have the Image Library enabled for the project.

In your Keystatic config, you'll need to set the storage option to cloud.

You'll also need to add the cloud.project property with the name of the team and project from your Keystatic Cloud account:

import { config } from '@keystatic/core'

export default config({
  storage: {
    kind: 'cloud',
  },
  cloud: {
    project: '[TEAM_NAME]/[PROJECT_NAME]',
  },
  ...
})

Each project in Keystatic Cloud has a settings page where you'll find a ready-to-paste code snippet in your config file.

This segment of the Keystatic Mini-Course on YouTube may help understand how Keystatic Cloud works: