Getting Started with FlowCMS

Every FlowCMS project begins with a workspace. Workspaces are isolated environments where you manage content models, users, and environments.

• Log in to your FlowCMS Dashboard
• Click + New Workspace in the top-right corner
• Name your workspace (e.g., my-first-app)
• Select Sandbox as the initial environment

Once created, you'll be redirected to the workspace overview where you can find your Project ID.

The FlowCMS CLI helps you authenticate locally, sync models, and manage environments from your terminal.

npm install -g @flowcms/cli
flow auth login

After running flow auth login, a browser window will open to authorize the CLI. Once authenticated, your machine is ready to interact with your workspace.

FlowCMS uses two types of keys: Preview Keys (read-only, for frontend) and Admin Keys (read/write, for backend or CLI).

FLOW_PREVIEW_KEY=pk_live_8f3a9c2b...
FLOW_ADMIN_KEY=ak_live_x7d2m9p1...
FLOW_PROJECT_ID=proj_abc123

Generate keys from Settings → API Keys in your dashboard. Copy them into your project's environment file.

Content models in FlowCMS are schema-defined using flow.json or the visual builder. Let's create a Blog Post model.

{
  "models": [
    {
      "name": "BlogPost",
      "fields": [
        { "name": "title", "type": "text" },
        { "name": "slug", "type": "slug", "source": "title" },
        { "name": "body", "type": "markdown" },
        { "name": "author", "type": "text" },
        { "name": "publishedAt", "type": "datetime" }
      ]
    }
  ]
}

Sync your model to the workspace:

flow models sync

Now that your model is live, let's fetch a post using the FlowCMS JavaScript SDK.

import { createClient } from '@flowcms/js-sdk';

const client = createClient({
  projectId: process.env.FLOW_PROJECT_ID,
  previewKey: process.env.FLOW_PREVIEW_KEY,
});

async function getBlogPost(slug) {
  const post = await client.get('BlogPost', {
    filter: { slug },
    populate: ['author'],
  });
  return post;
}

Render it in your framework of choice. FlowCMS SDKs automatically handle caching, validation, and type safety when using TypeScript.

Track your progress. Check off each item as you complete it.

• ✓
  Created a new workspace
• ✓
  Installed and authenticated the CLI
• ✓
  Configured API keys in environment variables
• ✓
  Defined and synced a content model
• ✓
  Fetched and rendered your first content item