> For the complete documentation index, see [llms.txt](https://docs.overflowcms.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.overflowcms.com/demo-showcase.md).

# Demo Showcase

**demo.overflowcms.com** is a live, public demo site — no login required. It's a real Webflow site wired up to a real OverflowCMS workspace, showing both ways content gets onto a page — the client-side embed script and server-rendered SEO Engine pages — side by side, on the same site. Click around it directly, or use this page as a guided tour of what each part demonstrates.

| Page         | URL                                                                                                                                            | Rendering         | Powered by |
| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ---------- |
| Blog listing | [/blog-page](https://demo.overflowcms.com/blog-page)                                                                                           | Client-side       | embed.js   |
| Blog post    | [/blog/the-complete-guide-to-managing-freelance-finances](https://demo.overflowcms.com/blog/the-complete-guide-to-managing-freelance-finances) | Server-side (SSR) | SEO Engine |
| Changelog    | [/changelog](https://demo.overflowcms.com/changelog)                                                                                           | Client-side       | embed.js   |

### Blog listing — client-side rendering with embed.js

`/blog-page` is a plain Webflow page with embed.js's list widget dropped onto it:

```html
<div data-oc-list="blog" data-oc-sort="-publishedDate" data-oc-limit="6" class="blog-wrapper">
  <!-- item template lives inside; embed.js clones it once per item -->
</div>
<a data-oc-load-more href="#" class="button-2 w-button">Load more posts</a>
```

On page load, embed.js fetches the `blog` collection's published items from the CDN, clones the item template once per result, and binds each item's fields into it — six at a time (`data-oc-limit="6"`), newest first (`data-oc-sort="-publishedDate"`).

![Blog listing, first 6 items](https://overflowcms.com/images/docs-screenshots/demo-blog-listing.png)

Clicking **Load more posts** (`data-oc-load-more`) fetches and appends the next page in place, without a full navigation — the button hides itself once every item's loaded (this demo collection has 10 posts total, so one click loads the rest):

![Blog listing after clicking Load more posts — 10 of 10 items shown, button gone](https://overflowcms.com/images/docs-screenshots/demo-blog-listing-loaded-more.png)

{% hint style="info" %}
Because this list renders client-side, "View Source" on `/blog-page` shows an empty template — the real content only appears after embed.js runs. That's expected, and it's exactly the tradeoff the next section exists to solve. See [Embed Script Basics](/webflow-integration/embed-script-basics.md) and [Filtering & Sorting](/webflow-integration/filtering-and-sorting.md) under Webflow Integration for the full attribute reference.
{% endhint %}

### Blog post — server-rendered by SEO Engine

Each **Read more** link on the listing goes to that item's own page, e.g. `/blog/the-complete-guide-to-managing-freelance-finances` — and this one isn't client-rendered at all. It's captured and served by [SEO Engine](/seo-engine.md): OverflowCMS captured this exact Webflow page design once, and now renders it on the server for every request, injecting that item's real fields before the response ever reaches the browser.

![Blog post page, server-rendered](https://overflowcms.com/images/docs-screenshots/demo-blog-post-ssr.png)

Unlike the listing above, `curl`-ing this URL (no JavaScript involved at all) already returns the real title, meta description, canonical link, Open Graph/Twitter tags, and `Article` + `BreadcrumbList` JSON-LD:

```bash
$ curl -s https://demo.overflowcms.com/blog/the-complete-guide-to-managing-freelance-finances | grep -oE '<title>.*</title>|<meta[^>]*name="description"[^>]*>|<link[^>]*rel="canonical"[^>]*>'

<title>The Complete Guide to Managing Freelance Finances</title>
<meta content="Invoicing, taxes, and cash flow tips every independent freelancer needs to stay financially healthy." name="description">
<link href="https://demo.overflowcms.com/blog/the-complete-guide-to-managing-freelance-finances" rel="canonical">
```

That's the actual point of SEO Engine — a crawler that never executes JavaScript sees the same real content a visitor does. See [SEO Engine](/seo-engine.md) for how capture, rendering, and routing work, and its Verify step for this exact `curl` technique applied to your own pages.

### Changelog — client-side rendering with a live filter

`/changelog` is the same embed.js pattern as the blog listing, pointed at a different collection:

```html
<div data-oc-list="changelog" data-oc-sort="-date" class="changelog-wrapper">
  <select data-oc-filter="type">
    <option value="">All categories</option>
    <option value="improved">Improved</option>
    <option value="added">Added</option>
  </select>
  <!-- item template -->
</div>
```

![Changelog, unfiltered](https://overflowcms.com/images/docs-screenshots/demo-changelog.png)

{% hint style="warning" %}
The **"Sort by:"** label next to the dropdown is a bit of a misnomer inherited from the original Webflow template — the `<select>` it labels is wired to `data-oc-filter="type"`, so it actually **filters** the list by category (All / Improved / Added), it doesn't change the sort order. The real sort order is fixed on the container itself via `data-oc-sort="-date"` (newest first) — that's a separate attribute from any visible control on this page.
{% endhint %}

Picking **Improved** re-runs the query client-side and re-renders just the matching items:

![Changelog filtered to "Improved"](https://overflowcms.com/images/docs-screenshots/demo-changelog-filtered.png)

### Poke around yourself

{% hint style="success" icon="arrow-pointer" %}
It's a public demo — nothing to sign in to, nothing you can break. Open your browser's dev tools on each page and compare: **View Source** on the blog listing and changelog (empty template, embed.js fills it in) versus the blog post (real content already in the HTML). That difference is the whole reason SEO Engine exists.
{% endhint %}

Related pages: [Embed Script Basics](/webflow-integration/embed-script-basics.md), [Filtering & Sorting](/webflow-integration/filtering-and-sorting.md), and [Rendering Events & Animations](/webflow-integration/rendering-events-and-animations.md) (Webflow Integration) cover the client-side attributes used on the listing and changelog; [SEO Engine](/seo-engine.md) covers the server-rendered blog post in full, including how to set the same thing up on your own domain.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.overflowcms.com/demo-showcase.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.