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. Learn more about bindings in the Cloudflare Workers documentation.

Declaring a binding

Declaring a binding is the first step to using storage in your app.

1
{
2
"d1_databases": [
3
    {
4
    "binding": "DB",
5
    "database_name": "MY_DATABASE",
6
    "database_id": "1234567890" // Webflow Cloud will assign a unique ID for each resource on deployment
7
    }
8
]
9
}

$
npx wrangler types

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 the environment where your app is deployed with storage bindings configured in wrangler.json.

2

Go to the bindings tab

In the environment dashboard, click the Bindings tab to view all storage resources for the selected environment. Each 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 bindings tab in the dashboard.

$
wrangler types