Quick Start
Get up and running with CounterAPI JavaScript client in just a few minutes.
Install
Basic Usage
Browser
<script type="module">
import { Counter } from 'https://cdn.jsdelivr.net/npm/counterapi/dist/counter.esm.min.js';
// Create a counter client (V2 API)
const counter = new Counter({ workspace: 'my-workspace' });
// Increment a page view counter
counter.up('page-views')
.then(result => {
console.log(`Page views: ${result.value}`);
document.getElementById('counter').textContent = result.value;
})
.catch(error => console.error('Counter error:', error.message));
</script>
<div>Views: <span id="counter">Loading...</span></div>
Node.js
import { Counter } from 'counterapi';
// Create a counter client
const counter = new Counter({ workspace: 'my-workspace' });
// Track an event
async function trackEvent() {
try {
const result = await counter.up('api-calls');
console.log(`Total API calls: ${result.value}`);
} catch (error) {
console.error('Failed to track event:', error.message);
}
}
trackEvent();
CommonJS
const { Counter } = require('counterapi');
// Create a counter client
const counter = new Counter({ workspace: 'my-workspace' });
// Get current count
counter.get('downloads')
.then(result => console.log(`Downloads: ${result.value}`))
.catch(err => console.error(err));
CDN Options
UMD Build (global variable)
<script src="https://cdn.jsdelivr.net/npm/counterapi/dist/counter.browser.min.js"></script>
<script>
// Counter is available as a global variable
const counter = new Counter({ workspace: 'my-workspace' });
counter.up('visits')
.then(result => console.log(`Visits: ${result.value}`))
.catch(err => console.error(err));
</script>
ESM Build (modern browsers)
<script type="module">
import { Counter } from 'https://cdn.jsdelivr.net/npm/counterapi/dist/counter.esm.min.js';
const counter = new Counter({ workspace: 'my-workspace' });
// Use counter methods here
</script>
Next Steps
For more detailed usage information, check out the Get Started guide.