FeaturesTemplatesShowcaseTownie
AI
BlogDocsPricing
Log inSign up
triptych
triptychhitCounter
Public
Like
1
hitCounter
Home
Code
2
README.md
H
main.tsx
Branches
1
Pull requests
Remixes
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in miliseconds.
Sign up now
Code
/
Code
/
Search
Open in new tab
README.md

Create a simple hit counter that you can attach to any website via fetch .

I created a web component to use this :


export class HitCounter extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
      this.count = 0;
      this.fetchCount();
    }
  
    fetchCount() {
      fetch('https://triptych-hitcounter.web.val.run/')
        .then(response => response.json())
        .then(data => {
          this.count = data.siteCount;
          this.render();
        })
        .catch(error => console.error('Error fetching count:', error));
    }
  
    render() {
      const container = document.createElement('div');
      container.style.backgroundColor = 'black';
      container.style.color = 'white';
      container.style.border = '1px solid white';
      container.style.padding = '10px';
      container.style.display = 'inline-block'; // Add this line
      container.textContent = `hit count: ${this.count}`;
  
      this.shadowRoot.appendChild(container);
    }
  }
  
  customElements.define('hit-counter', HitCounter);

Code
README.md
H
main.tsx
Go to top
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Product
FeaturesPricing
Developers
DocsStatusAPI ExamplesNPM Package Examples
Explore
ShowcaseTemplatesNewest ValsTrending ValsNewsletter
Company
AboutBlogCareersBrandhi@val.town
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.