Counters

Overview

The counter is the main feature of Voux. It simply counts views.

You can create a counter either from the main page (if the instance is public) or from the dashboard if you are logged in.

When creating a counter, you can choose between 2 modes:

Unique visitors

This mode counts only one visit per IP.

If the same IP visits the page again, it will not increase the counter. This is useful if you want something closer to "real" visitors.

Every-visit

This mode counts every page load and stores the visitor IP.

Refreshing the page will increase the counter each time, depending on the throttle setting. By default, the throttle is 0s, meaning every refresh counts. The IP is only used for throttling and stats, not to prevent counting.

You can think of this like an old-school hit counter from early web days.

After creating a counter, Voux gives you both an embed script and an SVG embed. Once you place it on your website, views will start counting automatically.

Styling script embeds

Styling your counter with Voux is super simple.
All you need to do is wrap the embed inside an element.

Here is a basic example using a <span>:

<span class="counter-widget">
  <!-- replace this with your counter script -->
  <script async src="https://your-domain/embed/abc123.js"></script>
</span>

Once that is in place, you can style it however you want using normal CSS.

Here is a simple example that centers the counter on the screen and makes the text black:

.counter-widget {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: black;
  font-weight: 600;
  font-size: 3rem;
  font-family: system-ui, sans-serif;
}

That is it. Your counter is now styled and ready to use. You can change the font, colors, size, or layout however you like.

Styling SVGs embeds

Voux also provides an SVG embed for cases where you cannot use JavaScript, such as READMEs, Markdown files, or restricted platforms.

<img src="https://your-domain/embed/abc123.svg" alt="Voux counter">

You can also customize the SVG by passing parameters in the URL query string:

<img src="https://your-domain/embed/abc123.svg?bg=F54927&color=ffffff" alt="Voux counter">

SVGs in documentation

Some documentation pages do not allow JavaScript, for example when writing in MDX or other restricted formats. In these cases, SVG embeds are used instead.

Because documentation pages are served without image proxy caching, Voux can access real visitor IPs, so Unique Visitor mode works correctly.

Mode	Behavior	Example
👤 Unique visitors	Supported
🔁 Every visit	Supported and updates on refresh (reload the page to see it update)

And... On GitHub, Unique Visitors are not available due to image proxy caching. :(