What We’ll Build

This guide will walk you through using a Data Client App to interact with Webflow’s CMS APIs. The Data Client App allows you to make calls to Webflow’s backend data APIs, and through this guide, you’ll learn how use the API to:

1. Create Collections and Fields
2. Create, Read, Update, and Delete Items
3. Publish and Unpublish Items

To make visualizing your Collections and Items easier, we’ll also build a simple frontend using React.

Prerequisites

• A Webflow site. If you’re not sure where to start, clone our Astral Fund site with defined CMS collections.
• A registered Webflow App or a Site Token with the following scopes: sites:read, cms:read, and cms:write
• An Ngrok account and an authentication token
• Node.js and an IDE of your choice
• Additionally, you should have basic knowledge of Node.js and Express

Conclusion

Congratulations! You’ve successfully navigated through the process of setting up and using the Webflow API with a fully functional backend and frontend application. Here’s a quick recap of what you’ve accomplished:

1. Webflow Client and Backend Configuration: You configured the WebflowClient, set up middleware, and created routes and controllers for managing collections and items.
2. Working with Collections: You learned how to create, retrieve, and delete collections, including handling different field types.
3. Working with Items: You explored how to create, retrieve, update, and delete items within a collection, managing various item states and field types.
4. Publishing and Unpublishing: You learned how to publish and unpublish items, and how the isDraft property affects the publishing state of items.

Next Steps

• Extend Functionality: Enhance your application by adding new endpoints - try updating an item - or incorporating additional data processing logic.
• Explore Localization: Managing content localization is a crucial part of working with the Webflow CMS. Check out our localization guide for more details on how to localize your content effectively.