Key Value Store
Fast, edge-cached storage for unstructured data
Fast, edge-cached storage for unstructured data
Key Value Store is a globally distributed, low-latency data store for unstructured or semi-structured data in Webflow Cloud. It enables Webflow Cloud apps to store and retrieve data at the edge, close to users, for instant access.
Use Key Value Store when you need to quickly read or write individual values by key, rather than perform complex queries or transactions. It complements structured storage solutions like SQLite by providing fast, scalable access to unstructured data. This enables:
Key Value Store is best suited for:
Use Key Value Store for read-heavy workloads that can tolerate eventual consistency. Avoid Key Value Store for workloads that require strong consistency, transactional guarantees, or advanced querying.
Create a Key Value Store by declaring bindings in your wrangler.json file in the root of your app.
A namespace is a logical container for key-value pairs. Think of it as a separate bucket or database for your app’s data. For each Key Value Store you want to use, add a binding in the kv_namespaces array to define a unique namespace.
Once declared and deployed, Webflow Cloud automatically connects your app to the namespace, allowing you to store and retrieve data by key.
Add a binding to your wrangler.json file
In your wrangler.json file, add a kv_namespaces array. Declare a binding for each Key Value Store you want to use inside the array.
Note: Webflow Cloud will assign a unique ID for each resource on deployment.
Generate TypeScript types for your bindings to enable autocomplete and type safety in your code editor:
This creates/updates a worker-configuration.d.ts file with your binding types. Note: in Next.js you’ll also need to update the types for the cloudflare-env.d.ts file to avoid type errors.
Deploy your app to Webflow Cloud. After deployment, you can view and manage your namespaces in the Webflow Cloud dashboard.
Webflow Cloud exposes your Key Value Store to your app as an environment variable, known as a binding, allowing you to interact with it directly from your application code.
Always access the environment variable in your app’s runtime environment. This variable exposes methods from the Cloudflare’s KV Bindings API, allowing you to run data operations directly from your code.
In Astro, access the binding in your code using the locals object.
After accessing the binding, you can use the it to read and write data to your Key Value Store with the Cloudflare KV API methods.
To list all keys in a namespace, call the list() method of the binding. This method returns a promise you can await on to get the list of keys for the namespace.
For all parameters and options for the list() method, see the Cloudflare KV API documentation.
To create or update a key-value pair in a namespace, use the .put() method on your binding.
How it works:
.put(key, value) stores or updates the value for the given key in the namespace.For all parameters and options for the .put() method, see the Cloudflare KV API documentation.
The .put() method does not support bulk operations. To write multiple pairs in your app, call .put() in a loop or with Promise.all.
To retrieve values from your Key Value Store, use the .get() method on your binding. You can read a single key or an array of keys in one call.
How it works:
null if not found).null.text, json, etc.) as an option.For all parameters, options, and advanced usage, see the Cloudflare KV API documentation.
To delete a key-value pair from your namespace, use the .delete() method on your binding. This method removes the key and its value from the namespace.
How it works:
.delete() method only deletes one key at a time. To delete multiple keys, call .delete() for each key.For all parameters and options for the .delete() method, see the Cloudflare KV API documentation.
Key Value Store is eventually consistent: when you write or delete a key, the change is visible immediately in the same region, but may take up to 60 seconds to propagate globally.
What this means for Webflow Cloud apps
.put(), .delete(), etc.Best practices
For more information, see the Cloudflare KV API documentation.