How can I get an XML feed in Webflow and style it?
TL;DR
- Convert the XML feed to JSON using a service like rss2json or middleware tools.
- Use custom JavaScript in Webflow to fetch the JSON and dynamically inject content into placeholder elements.
- Alternatively, automate importing feed data into Webflow CMS using Zapier or Make for native styling via Collection Lists.
Webflow does not natively support consuming or styling an external XML feed, but you can achieve this by using an external tool or custom code to fetch, convert, and display the data within your Webflow site.
1. Convert the XML Feed to JSON
- Webflow’s native CMS and front-end JavaScript work best with JSON data, not raw XML.
- Use a service like https://rss2json.com/ or set up your own middleware (e.g. Google Apps Script, Node.js, Integromat/Make, or Zapier) to:
- Fetch the XML feed
- Convert it to JSON
- Expose it via a URL endpoint
2. Embed Custom JavaScript in Webflow
- In Webflow Designer, go to the Page Settings, scroll down to the Before </body> tag section, and paste custom JavaScript.
- Use
fetch()to retrieve the converted JSON data from your endpoint. - Loop over the JSON and inject it into Webflow elements using
document.querySelector()or similar methods.
Example (simplified concept):
- Fetch the feed via
fetch('https://api.rss2json.com/v1/api.json?rss_url=your-xml-url') - Parse and output results into elements you've created in your Webflow layout (e.g.
<div class="feed-item">)
3. Style the Output Using Webflow Elements
- In Webflow Designer, create a static container with dummy placeholder elements for the feed items (e.g. title, description).
- Target these containers in your custom script and populate them dynamically.
- Then style these containers using Webflow’s visual Editor.
4. Optional: Use Webflow CMS via Automation
- If you need full Webflow-native control (dynamic CMS collections), use Zapier or Make (Integromat):
- Set up a workflow to parse the XML feed.
- Use Webflow’s CMS API or built-in Make modules to create/update CMS items.
- You can then use Collection Lists in Webflow to style the data natively.
Summary
To display and style an XML feed in Webflow: (1) convert the XML feed to JSON using an external service, (2) use custom JavaScript to fetch and inject the data into your Webflow elements, or (3) automate feed imports into Webflow CMS using Zapier or Make for native styling with Collection Lists.
