svelte-webflow-cms

A config-driven CMS table editor for managing Webflow collections with SvelteKit.

Features

- Config-driven: Define your table structure with a simple configuration object
- Change Tracking: Tracks all modifications and only enables save when changes exist
- Batched Operations: Nothing is sent to Webflow until explicit "Save changes" click
- Drag & Drop Sorting: Reorder items with automatic sort field updates
- Direct Webflow Upload: Images and files upload directly to Webflow assets (no intermediate storage needed)
- Hosting Agnostic: Works with any hosting platform (Cloudflare, Vercel, Netlify, etc.)
- Field Validation: Required fields, length constraints, and numeric ranges with error feedback

Installation

``bash
bun add svelte-webflow-cms


or

Add a @source directive in your CSS file:

`css
@import "tailwindcss";
@source "../node_modules/svelte-webflow-cms";
`

Quick Start

$3

`typescript
// src/routes/members/config.ts
import type { TableConfig } from "svelte-webflow-cms";

export const config: TableConfig = {
pageTitle: "Team Members",
itemSingular: "Member",
itemPlural: "Members",
siteId: "your-site-id",
collectionId: "your-collection-id",
assetFolderId: "optional-folder-id", // Optional: organize uploads in a Webflow folder
createDeleteEnabled: true,
draftEnabled: true,
fields: [
{
visible: true,
editable: true,
required: true,
schema: {
name: "Name",
slug: "name",
type: "PlainText",
validations: { maxLength: 100 },
},
},
{
visible: true,
editable: true,
schema: {
name: "Photo",
slug: "photo",
type: "Image",
imageSettings: { width: 400, height: 400 },
},
},
{
visible: true,
editable: true,
schema: {
name: "Resume",
slug: "resume",
type: "File",
fileSettings: { maxSizeBytes: 10 1024 1024 }, // 10MB max
},
},
],
};
`

$3

`typescript
// src/routes/members/+page.server.ts
import { createCmsActions, loadCmsItems } from "svelte-webflow-cms/server";
import { config } from "./config";

export async function load({ platform }) {
const token = platform?.env?.WEBFLOW_TOKEN;
if (!token) return { items: [], error: "Token not found" };

const { items, error } = await loadCmsItems(token, config);
return { items, error };
}

export const actions = createCmsActions(config, {
getToken: (_, platform) => platform?.env?.WEBFLOW_TOKEN ?? null,
});
`

$3

`svelte











`

Composable API

The CmsTable components follow a composable pattern (similar to shadcn-svelte), allowing you to customize and extend the table easily.

$3

`svelte










`

$3

| Component | Description |
| ------------------ | ---------------------------------------------- |
| CmsTable.Root | Root wrapper - provides context and state |
| CmsTable.Toolbar | Title and add button |
| CmsTable.SaveBar | Save/cancel controls with validation display |
| CmsTable.Table | Table container |
| CmsTable.Header | Table header row with field names |
| CmsTable.Body | Table body with drag-and-drop support |
| CmsTable.Row | Individual row (used in custom row templates) |
| CmsTable.Actions | Actions column (live toggle and delete button) |
| CmsTable.Cell | Field cell with input (used in custom rows) |

$3

#### Custom Toolbar with Badge

`svelte


{#snippet afterTitle()}
{data.items.length} items
{/snippet}







`

#### Custom Actions Placement

`svelte



`svelte


{#snippet afterColumns()}
Custom Column
{/snippet}



`

#### Custom Row Template

`svelte

{#snippet row({ item, index, isNew })}

{#snippet afterColumns()}

{item.status}

{/snippet}

{/snippet}

`

#### Styling with Classes

All components accept a class prop for custom styling:

`svelte








`

Image & File Uploads

Images and files are uploaded directly to Webflow's asset storage using their Assets API. No intermediate storage (R2, S3, etc.) is required.

$3

1. Images: Client-side compression and cropping based on imageSettings, then uploaded to Webflow
2. Files: Validated for type and size, then uploaded to Webflow on save
3. The returned Webflow asset URL is used in the CMS item

$3

`typescript
{
schema: {
name: "Photo",
slug: "photo",
type: "Image",
imageSettings: {
width: 400, // Target width in pixels
height: 400, // Target height in pixels
},
},
}
`

$3

`typescript
{
schema: {
name: "Document",
slug: "document",
type: "File",
fileSettings: {
maxSizeBytes: 10 1024 1024, // 10MB max file size
},
},
}
`

$3

The following file types are supported for file uploads:

| Category | Extensions |
| ------------- | ---------------------------------- |
| Images | PNG, JPEG/JPG, GIF, BMP, SVG, WebP |
| Documents | PDF, DOC/DOCX, TXT |
| Spreadsheets | XLS/XLSX, CSV, ODS |
| Presentations | PPT/PPTX, ODP |
| Other | ODT |

$3

Optionally specify an assetFolderId in your config to organize uploads:

`typescript
const config: TableConfig = {
siteId: "your-site-id",
collectionId: "your-collection-id",
assetFolderId: "your-folder-id", // Optional
// ...
};
`

To find your folder ID, use the Webflow API or check the URL when viewing a folder in the Webflow dashboard.

Token Configuration

The getToken function receives the request and platform at runtime:

`typescript
// Cloudflare Pages
getToken: (_, platform) => platform?.env?.WEBFLOW_TOKEN ?? null;

// Node.js
getToken: () => process.env.WEBFLOW_TOKEN ?? null;

// SvelteKit $env
import { env } from "$env/dynamic/private";
getToken: () => env.WEBFLOW_TOKEN ?? null;
`

Supported Field Types

| Type | Input Component | Notes |
| ---------------- | ------------------- | --------------------------------------- |
| PlainText | TextInput | Supports maxLength/minLength validation |
| RichText | TextInput | Supports maxLength/minLength validation |
| Link | LinkInput | URL input |
| Email | EmailInput | Email input |
| Phone | PhoneInput | Phone input |
| Number | NumberInput | Numeric input with range validation |
| Switch | SwitchInput | Boolean toggle |
| Option | OptionInput | Dropdown select |
| Color | ColorInput | Color picker |
| DateTime | DateInput | Calendar picker with date selection |
| Image | ImageInput | Image upload with processing |
| File | FileInput | File upload with type/size validation |
| Reference | ReferenceInput | Single collection reference |
| MultiReference | MultiReferenceInput | Multiple collection refs |

Field Configuration Options

$3

`typescript
interface Field {
visible: boolean; // Show in table
editable?: boolean; // Allow editing
required?: boolean; // Field is required
styles?: FieldStyles; // Custom styling
schema: FieldSchema; // Field schema
}
`

$3

`typescript
interface Validations {
minLength?: number; // Minimum string length
maxLength?: number; // Maximum string length
min?: number; // Minimum numeric value
max?: number; // Maximum numeric value
}
`

$3

Sort fields now support DateTime type in addition to Number:

`typescript
interface SortField extends Field {
direction?: "asc" | "desc"; // Sort direction
schema: SortFieldSchema;
}

interface SortFieldSchema extends FieldSchema {
type: "Number" | "DateTime"; // Number or DateTime
}
`

API Reference

$3

CmsTable Components:

- CmsTable.Root - Root wrapper that provides context and state management
- CmsTable.Toolbar - Title and add button with customizable slots
- CmsTable.SaveBar - Save/cancel controls with validation error display
- CmsTable.Table - Table container with styling
- CmsTable.Header - Table header row with field names and tooltips
- CmsTable.Body - Table body with drag-and-drop support
- CmsTable.Row - Individual row component (for custom row templates)
- CmsTable.Actions - Actions column with live toggle and delete button
- CmsTable.Cell - Field cell with appropriate input component

Input Components (can be used independently):

- TextInput - Plain text and rich text input
- NumberInput - Numeric input with validation
- LinkInput - URL input
- EmailInput - Email input
- PhoneInput - Phone input
- ColorInput - Color picker
- SwitchInput - Boolean toggle
- OptionInput - Dropdown select
- DateInput - Calendar date picker
- ImageInput - Image upload with compression
- FileInput - File upload with type/size validation
- ReferenceInput - Single collection reference selector
- MultiReferenceInput - Multiple collection reference selector

$3

- createCmsActions(config, options) - Create all CMS actions
- loadCmsItems(token, config) - Load items from Webflow
- loadReferenceData(token, config) - Load referenced collection data
- createWebflowClient(token) - Create Webflow API client

$3

- TableConfig - Table configuration
- Field - Field configuration
- ImageSettings - Image upload settings (width, height)
- FileSettings - File upload settings (maxSizeBytes)
- TokenGetter` - Token retrieval function type

License

MIT