HopCounter: Build a Retro Page View Counter with Bunny Edge Scripting

If you've ever wanted to relive the glory days of the internet—back when guestbooks, under-construction GIFs, and visit counters reigned supreme—this one's for you.

In this tutorial, we're building HopCounter: a bunny-themed, edge-powered page view counter that runs globally, updates instantly, and doesn't need a single origin server. It's a nostalgic nod to the web's past, rebuilt for the modern CDN.

And we're doing it all with Bunny.net Edge Scripting—no backend server to build, no complex deploy pipelines. Just you, a browser, and some delightful JavaScript in the Bunny admin console.

Why build a view counter at the edge?

You might be thinking, "Okay, but why?" Fair question. Besides satisfying your inner 90s kid, here are real reasons you might want to build this:

• Fun dynamic content to add interactivity on JAMstack sites
• Landing page analytics without third-party scripts or trackers
• Time- or rate-limited content to control access to dynamic content

Traditional counters rely on backend services or analytics platforms. Edge Scripting lets you skip the backend entirely, run logic closer to users, and maintain control over what happens when someone visits your page.

Requirements

Before we start hopping, you'll need the following:

• A Bunny.net account (sign up for a FREE trial)
• A page where you want to show the counter
• Access to a key-value store, external API, or in-memory edge-compatible service (we'll simulate this)

We'll use JavaScript to build a GET /view?id={slug} endpoint that:

• Increments a counter for the given id
• Returns the updated count in JSON

Let's hop in!

Step 1: Create a new script in the Bunny dashboard

The first step is to add a new script to your Bunny account. You will deploy the script directly from your Bunny dashboard, but you can also deploy scripts using a GitHub repository or GitHub Actions!

1. Log in to your Bunny Dashboard
2. Navigate to Edge Platform → Scripting
3. Click Add Script

4. Click Deploy with Bunny.net

5. For Script Name enter "HopCounter"
6. Make sure the script Type is set to Standalone
7. Under Script Template choose Return simple JSON (although any template will work)
8. Click Add Script

Step 2: Replace the default script

Here's a super basic example that simulates incrementing a view counter. It uses an in-memory counter for demonstration.

import * as BunnySDK from "https://esm.sh/@bunny.net/edgescript-sdk@0.11.2";

// This object simulates a data store (it resets on each cold start!)
const counters = new Map();

BunnySDK.net.http.serve(async (request) => {
  const url = new URL(request.url);
  const id = url.searchParams.get("id");

  if (!id) {
    return new Response("Missing `id` query parameter", { status: 400 });
  }

  const current = counters.get(id) ?? 0;
  const updated = current + 1;
  counters.set(id, updated);
  const data = JSON.stringify({id, count: updated});

  return new Response(data, {
    headers: {
      "content-type": "application/json"
    }
  });
});

Note: Edge Scripting is built on Deno, so you can use TypeScript or just good ol' JavaScript.

Step 3: Test it in the preview pane

The Bunny dashboard includes a preview pane for testing your script. You can:

• Update the URL parameters such as ?id=test
• Click the run button and see the JSON response
• View logs in real time

This can be a great tool to debug and tweak your script without leaving your browser.

Step 4: Add it to your website

Let's display the counter on your webpage with some basic JavaScript:

<div id="counter">Loading view count...</div>
<script>
  fetch("https://<your-hopcounter-url>.bunnycdn.run/view?id=homepage")
    .then(res => res.json())
    .then(data => {
      const padded = String(data.count).padStart(5, "0");
      document.getElementById("counter").textContent = `You are visitor #${padded} 🐇`;
    });
</script>

Replace <your-hopcounter-url> with your unique script name. You can find this at the top of the Code Editor. You can reuse this snippet for any page by changing the id=homepage parameter. Each slug (e.g., "homepage," "about," and "contact") gets its own counter.

Bonus enhancements for extra credit carrots

Once you've got the basics running, here's how to level it up:

• Add persistent storage: To persist data across restarts and deployments, you'll want to connect this to a real data store, such as Turso, Redis, Couchbase, or any number of cloud database providers. Bunny's own Edge Database Lite is coming soon! You can set environment variables for your database credentials and connection string and import the database client library into your script using esm.sh.
• Style it retro: Use pixel fonts, counters that look like odometers, an animated GIF, or make it blink like it's 1999!
• Add daily/weekly limits: Store counts with timestamps for limited-access content.
• Track per-user visits: Use headers or tokens to enforce custom logic.

Edge Scripting real-world use cases

HopCounter is just a cute wrapper around a much bigger idea: running lightweight, dynamic logic at the edge without needing a server. If you can build a page view counter, you can build lots of useful features! Here are just a few ideas to keep you hopping!

Because your logic runs at the edge, you can respond instantly and at scale—no latency from centralized APIs or bloated trackers. All from the Bunny dashboard, deployed globally in seconds.

Ready to build your own?

Whether you're building a retro fan site, a fast-loading marketing page, or love the smell of HTML in the morning—Edge Scripting gives you the power to customize behavior without the backend baggage.

Explore what you can build next with Bunny.net Edge Scripting.

• Learn more in the Bunny docs
• Edge scripting just evolved: faster, safer, and even more powerful

Happy hopping!