Save pagination, filters, and search in URL parameters

I got something that works, see it on this page: https://heydesign.co/our-work?filter0=Prospecting&filter1=Static+Image&filter2=Testimonial

How:

1. Create a new code file with this:

// code starts

import * as React from "react";
import { useEffect } from "react";
import { Override } from "framer";

export function UrlFiltersSync(): Override {
useEffect(() => {
const SELECTOR = "select.superfields-dropdown";
const paramName = (index: number) => filter${index}; // ?filter0=..., ?filter1=...

const getSelects = () =>
Array.from(
document.querySelectorAll<HTMLSelectElement>(SELECTOR)
);

// --- STEP 1: URL -> dropdowns (run slightly later so Superfields is ready) ---
const applyFromUrl = () => {
const selects = getSelects();
if (!selects.length) return;

const params = new URLSearchParams(window.location.search);

selects.forEach((select, index) => {
const valueFromUrl = params.get(paramName(index));
if (valueFromUrl !== null) {
select.value = valueFromUrl;

// Fire both input & change so Superfields definitely hears it
const evtOptions = { bubbles: true };
select.dispatchEvent(new Event("input", evtOptions));
select.dispatchEvent(new Event("change", evtOptions));
}
});
};

// Delay a bit so Superfields can attach its listeners
const initialTimeout = window.setTimeout(applyFromUrl, 500);

// --- STEP 2: dropdowns -> URL on user change ---
const updateUrl = () => {
const selects = getSelects();
const newParams = new URLSearchParams();

selects.forEach((select, index) => {
const val = select.value;
if (val && val !== "{{ALL}}") {
newParams.set(paramName(index), val);
}
});

const qs = newParams.toString();
const newUrl =
window.location.pathname +
(qs ? ?${qs} : "") +
window.location.hash;

window.history.replaceState({}, "", newUrl);
};

const selectsNow = getSelects();
selectsNow.forEach((select) => {
select.addEventListener("change", updateUrl);
});

// Cleanup
return () => {
window.clearTimeout(initialTimeout);
selectsNow.forEach((select) =>
select.removeEventListener("change", updateUrl)
);
};
}, []);

return {};
}

// code end

2. Select any element that’s always on the page like any top-level page container, the filter bar wrapper or even the Desktop frame.

In the right sidebar, find the Code Overrides section at the bottom right:

File: select the file you created
Override: choose UrlFiltersSync

That is the solution working for me, thanks to ChatGPT.