Storing data in Webflow Cloud

Webflow Cloud lets you build and deploy modern web applications with built-in support for persistent data storage. Whether you need to store structured records or simple key-value pairs, Webflow Cloud provides flexible options to match your app’s needs.

Storage options in Webflow Cloud

Webflow Cloud offers three storage solutions, each designed for different types of data and use cases:

SQLite

Best for structured, relational data - like user profiles, product catalogs, or transactional records.

Key Value Store

Best for unstructured, dynamic data - like user preferences, session data, or temporary settings.

Object Storage

Best for large files and unstructured data - like images, videos, or PDF files.

Add a database to your app

Ready to add your first database to your app? Jump into the quickstart and start building with real data in minutes.

Start building

How storage works in Webflow Cloud

Webflow Cloud connects your app to storage resources using bindings.

A binding is a configuration that grants your app secure, direct access to a specific resource managed by Webflow Cloud. When you declare a binding in your wrangler.json file and deploy your app, Webflow Cloud automatically creates a resource and grants your app permission to use it.

With bindings, you can:

• Access resources automatically. No secret keys required.
• Reference bindings as environment variables in your app.
• Maintain isolated environments. Each binding is specific to a project’s environment.
• Manage bindings and resources in the Webflow Cloud dashboard.

Bindings combine permission and API access in a single step, so you can read and write data securely and efficiently.

Declaring a binding

Declaring a binding is the first step to using storage in your app. You can declare a binding in the Webflow Cloud dashboard or in your wrangler.json file.

Before you start

Before you can declare a binding, you need to have a project in Webflow Cloud and an environment for your app. If you don’t have a project or an environment, you can create by following the steps in the getting started guide.

Dashboard

wrangler.json

1

Open the environment dashboard

In Webflow Cloud, select your project and the environment where you plan to deploy your app.

2

Go to the storage tab

In the environment dashboard, click the Storage tab to view all storage resources for the selected environment.

3

Add a storage resource

Click the Add Storage button to add a new storage resource. Choose the storage type you want to use from the dropdown menu.

4

Copy the provided snippet to wrangler.json

Copy the provided snippet, and paste it into the wrangler.json file in your project’s root. Replace the placeholder values with values you want to use.

SQLite

Key Value Store

Object Storage

Property	Description
binding	The name of the binding to use in your app.
database_name	The name of the database to create.
database_id	The ID of the database to create. Webflow Cloud will generate a unique ID for you once you deploy your app.
migrations_dir	The directory containing your migration files.

Prepare your database schema

Before deploying your app, you need to prepare your database schema and create a migration file. You can create SQL migration files manually or generate them with a migration tool such as Drizzle ORM. On each deployment, Webflow Cloud will apply the migrations to your database.

5

Generate types for your binding

Generate TypeScript types for your bindings to enable autocomplete and type safety in your code editor:

$
npx wrangler types

This creates/updates a worker-configuration.d.ts file with your binding types.

6

Deploy your app

Deploy your app to Webflow Cloud by committing and pushing your changes to your linked GitHub repository. After deployment, you can view and manage your storage resources in the Webflow Cloud dashboard.

For a complete walkthrough of using storage in your app, see the guides on adding a SQLite database to your app and adding a Key Value Store to your app.

Accessing storage in your app

Once you’ve declared a binding, access the resource in your app using the binding name as an environment variable. Environment variables for bindings are automatically available in your app and don’t need to be manually created in your environment dashboard.

1
import { getCloudflareContext } from "@opennextjs/cloudflare"; // Import the function
2
import { drizzle } from "drizzle-orm/d1";
3
import { cache } from "react";
4
import * as schema from "./schema";
5
6
// Use in a request handler (e.g. API route)
7
export const getDb = cache(() => {
8
  const { env } = getCloudflareContext(); // Access the cloudflare environment
9
  return drizzle(env.DB, { schema }); // Access the DB binding
10
});
11
12
// Use for static routes (i.e. ISR/SSG)
13
export const getDbAsync = cache(async () => {
14
  const { env } = await getCloudflareContext({ async: true });
15
  return drizzle(env.DB, { schema });
16
});

Start working with real data

Ready to add your first database to your app? Jump into the quickstart and start building with real data in minutes.

Start building

Managing storage in the Webflow Cloud dashboard

Once you’ve deployed your app with the declared bindings, you can view and manage your storage resources directly in the Webflow Cloud dashboard:

1

Open the environment dashboard

In Webflow Cloud, select your project and environment where your app is deployed with storage bindings configured in wrangler.json.

2

Go to the storage tab

In the environment dashboard, click the Storage tab to view all storage resources for the selected environment. Each storage binding shows its name, type, and creation date.

3

View and manage data

Click a binding to open the database viewer. You can: - Create, read, update, and delete records (CRUD) - Search and sort data

Next steps

• Learn more about SQLite
• Learn more about Key Value Store
• See how to configure storage bindings in your project
• Learn about storage limits in Webflow Cloud

FAQs

Where can I see my storage resources?

Once you’ve deployed your app with the declared bindings, you can view and manage your storage resources directly in the Webflow Cloud dashboard.

I declared a binding in my wrangler.json file, but I can't see it in the dashboard.

If you have an existing Webflow Cloud project, you may need to edit your project settings to enable storage

1. Go to your project in the Webflow Cloud dashboard.
2. Select the ”…” icon in the “Actions” section of the menu.
3. Select “Edit” (you don’t actually need to edit anything).
4. Press “Save Changes” to update your project.

Save the changes and redeploy your app. Once your app deploys you should see the storage tab in the dashboard.

$
wrangler types