Live Demos: Google Sheets, WooCommerce, WordPress Posts, YouTube and RSS on Any Website
Last updated: October 2026
Every grid on this page is live. The cards are not copied into the page: they come from a WordPress site running the Swiffle Grid plugin, through a single embed code. The same code works on Webflow, Wix, Shopify, Squarespace or a plain HTML page. Click a card to flip it, switch the layout (wrap, swipe, row), or open the settings to change sizes and colors and copy your own embed code.
How it works: 1. a WordPress site with the Swiffle Grid plugin holds the data (posts, products, a Google Sheet, a feed or an API). 2. You design the grid in a Swiffle Grid block and copy its embed code. 3. You paste that code on any website, and the grid stays in sync with WordPress. No code, no API key.
- Playground: every data source in one grid
- Google Sheet to website PRO
- WooCommerce products on any website PRO
- Display WordPress posts on another website FREE
- Embed a YouTube channel on your website FREE
- RSS feed to website FREE
- REST API data as website cards PRO
Playground: every data source in one grid
One web component, six data sources. Pick a source in the Data source menu and the same grid shows a Google Sheet, a WooCommerce shop, WordPress posts, a YouTube channel, an RSS feed or a REST API. Open Customize this grid to try the layouts, card sizes, colors and feed title.
Live demo, served by a WordPress site running Swiffle Grid. Open it on CodePen.
Google Sheet to Website: Live Cards, No API Key PRO
Use a Google Sheet as a simple database for your website. Each row becomes a card with picture, text, video, gallery or map on its back. Edit a cell and every site showing the grid updates, with no Google API key and no CORS errors. Step by step tutorial.
Live demo, served by a WordPress site running Swiffle Grid. Open it on CodePen.
WooCommerce Products on Any Website, Cart Included PRO
Add your WooCommerce store to an existing website that does not run WordPress. Products show as flip and swipe cards with prices, a mini cart and a wishlist, and checkout happens on your WordPress shop. Step by step tutorial.
Live demo, served by a WordPress site running Swiffle Grid. Open it on CodePen.
Display WordPress Posts on Another Website FREE
Show the posts of a WordPress category on another website as a post grid with flip cards: text, video, photo gallery and map on the back of each card. New posts appear on every site automatically. Step by step tutorial.
Live demo, served by a WordPress site running Swiffle Grid. Open it on CodePen.
Embed a YouTube Channel on Your Website FREE
Turn a YouTube channel feed into a video grid that updates itself: every new upload appears as a card, and the video plays inline on the back of the card. Step by step tutorial.
Live demo, served by a WordPress site running Swiffle Grid. Open it on CodePen.
RSS Feed to Website: News Cards FREE
Display any RSS feed as swipeable news cards, refreshed automatically. A news site, a blog or a podcast feed becomes a news widget for any website. Getting started with the free plugin.
Live demo, served by a WordPress site running Swiffle Grid. Open it on CodePen.
REST API Data as Website Cards (PokeAPI Demo) PRO
Connect any REST API to WordPress with a small PHP connector, then show the JSON data as cards on any website, with no front-end code. This demo reads the public PokeAPI. Step by step tutorial.
Live demo, served by a WordPress site running Swiffle Grid. Open it on CodePen.
Get the Same Grid on Your Site
- Have a WordPress site. It holds your data and serves the grid. Any host works.
- Install the free Swiffle Grid plugin from WordPress.org. Google Sheets, WooCommerce and custom API connectors need Swiffle Grid PRO.
- Design your grid in a Swiffle Grid block. Add the block to any page (a draft is fine), choose the data source, then adjust the layout and colors with a live preview.
- Put it where you want. On your WordPress site, simply publish the page. On any other website, copy the block’s embed code and paste it there, then add that site’s address under URLs allowed to embed in the plugin settings. All the settings travel inside the embed code, so the draft never needs to be published and can even be deleted.
All demos are also gathered in a CodePen collection.
