diff --git a/package.json b/package.json
index cceb4663..c04856fa 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
     "./precompiler": "./src/lib/precompiler/precompiler.js",
     "./plugins": "./src/plugins/index.js",
     "./symbols": "./src/lib/symbols.js",
-    "./blitsFileConverter": "./src/lib/blitsfileconverter/blitsfileconverter.js"
+    "./blitsFileConverter": "./src/lib/blitsfileconverter/blitsfileconverter.js",
+    "./components": "./src/components/FPScounter.js"
   },
   "scripts": {
     "test": "c8 node scripts/runTests.js",
diff --git a/src/components/FPScounter.js b/src/components/FPScounter.js
index e01d6f08..b55a0fd9 100644
--- a/src/components/FPScounter.js
+++ b/src/components/FPScounter.js
@@ -15,107 +15,106 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import Component from '../component.js'
+import Blits from '../../index.js'
 import { renderer } from '../launch.js'
 import fps_sprite from '../../public/assets/fps_sprite.base64.js'
 
-export default () =>
-  Component('FPScounter', {
-    template: `
-      <Element>
-        <Element y="15" x="20">
-          <Element>
-            <Sprite image="$image" w="43" h="25" map="$sprite" frame="fps" />
-            <Element x="58" y="2">
-              <Sprite image="$image" x="0" h="20" w="20" map="$sprite" :frame="$fps[0]" />
-              <Sprite image="$image" x="18" h="20" w="20" map="$sprite" :frame="$fps[1]" />
-              <Sprite image="$image" x="36" h="20" w="20" map="$sprite" :frame="$fps[2]" />
-            </Element>
+// exporting as named export to allow selective importing
+export const FPScounter = Blits.Component('FPScounter', {
+  template: `
+    <Element>
+      <Element y="15" x="20">
+        <Element>
+          <Sprite image="$image" w="43" h="25" map="$sprite" frame="fps" />
+          <Element x="58" y="2">
+            <Sprite image="$image" x="0" h="20" w="20" map="$sprite" :frame="$fps[0]" />
+            <Sprite image="$image" x="18" h="20" w="20" map="$sprite" :frame="$fps[1]" />
+            <Sprite image="$image" x="36" h="20" w="20" map="$sprite" :frame="$fps[2]" />
           </Element>
+        </Element>
 
-          <Element x="150">
-            <Sprite image="$image" y="2" w="48" h="25" map="$sprite" frame="avg" />
-            <Element x="63" y="2">
-              <Sprite image="$image" x="0" h="20" w="20" map="$sprite" :frame="$avgFps[0]" />
-              <Sprite image="$image" x="18" h="20" w="20" map="$sprite" :frame="$avgFps[1]" />
-              <Sprite image="$image" x="36" h="20" w="20" map="$sprite" :frame="$avgFps[2]" />
-            </Element>
+        <Element x="150">
+          <Sprite image="$image" y="2" w="48" h="25" map="$sprite" frame="avg" />
+          <Element x="63" y="2">
+            <Sprite image="$image" x="0" h="20" w="20" map="$sprite" :frame="$avgFps[0]" />
+            <Sprite image="$image" x="18" h="20" w="20" map="$sprite" :frame="$avgFps[1]" />
+            <Sprite image="$image" x="36" h="20" w="20" map="$sprite" :frame="$avgFps[2]" />
           </Element>
+        </Element>
 
-          <Element x="0" y="40" >
-            <Sprite image="$image" x="-2" w="47" h="25" map="$sprite" frame="min" />
-            <Element x="58" y="2">
-              <Sprite image="$image" x="0" h="20" w="20" map="$sprite" :frame="$minFps[0]" />
-              <Sprite image="$image" x="18" h="20" w="20" map="$sprite" :frame="$minFps[1]" />
-              <Sprite image="$image" x="36" h="20" w="20" map="$sprite" :frame="$minFps[2]" />
-            </Element>
+        <Element x="0" y="40">
+          <Sprite image="$image" x="-2" w="47" h="25" map="$sprite" frame="min" />
+          <Element x="58" y="2">
+            <Sprite image="$image" x="0" h="20" w="20" map="$sprite" :frame="$minFps[0]" />
+            <Sprite image="$image" x="18" h="20" w="20" map="$sprite" :frame="$minFps[1]" />
+            <Sprite image="$image" x="36" h="20" w="20" map="$sprite" :frame="$minFps[2]" />
           </Element>
+        </Element>
 
-          <Element x="150" y="40">
-            <Sprite image="$image" w="53" h="25" map="$sprite" frame="max" />
-            <Element x="63" y="2">
-              <Sprite image="$image" x="0" h="20" w="20" map="$sprite" :frame="$maxFps[0]" />
-              <Sprite image="$image" x="18" h="20" w="20" map="$sprite" :frame="$maxFps[1]" />
-              <Sprite image="$image" x="36" h="20" w="20" map="$sprite" :frame="$maxFps[2]" />
-            </Element>
+        <Element x="150" y="40">
+          <Sprite image="$image" w="53" h="25" map="$sprite" frame="max" />
+          <Element x="63" y="2">
+            <Sprite image="$image" x="0" h="20" w="20" map="$sprite" :frame="$maxFps[0]" />
+            <Sprite image="$image" x="18" h="20" w="20" map="$sprite" :frame="$maxFps[1]" />
+            <Sprite image="$image" x="36" h="20" w="20" map="$sprite" :frame="$maxFps[2]" />
           </Element>
         </Element>
       </Element>
-    `,
-    state() {
-      return {
-        image: fps_sprite,
-        sprite: {
-          defaults: {
-            y: 1,
-            w: 20,
-            h: 20,
-          },
-          frames: {
-            '-': { x: -1000 },
-            0: { x: 1 },
-            1: { x: 23 },
-            2: { x: 45 },
-            3: { x: 67 },
-            4: { x: 89 },
-            5: { x: 111 },
-            6: { x: 133 },
-            7: { x: 155 },
-            8: { x: 177 },
-            9: { x: 199 },
-            avg: { x: 221, w: 48, h: 25 },
-            fps: { x: 271, w: 43, h: 25 },
-            max: { x: 316, w: 53, h: 25 },
-            min: { x: 371, w: 47, h: 25 },
-          },
+    </Element>
+  `,
+  state() {
+    return {
+      image: fps_sprite,
+      sprite: {
+        defaults: {
+          y: 1,
+          w: 20,
+          h: 20,
         },
-        fps: '---',
-        avgFps: '---',
-        minFps: '---',
-        maxFps: '---',
-      }
-    },
-    hooks: {
-      ready() {
-        let minFps = 10000
-        let maxFps = 0
-        let avgFps = 0
-        let totalFps = 0
-        let fpsUpdateCounter = 0
+        frames: {
+          '-': { x: -1000 },
+          0: { x: 1 },
+          1: { x: 23 },
+          2: { x: 45 },
+          3: { x: 67 },
+          4: { x: 89 },
+          5: { x: 111 },
+          6: { x: 133 },
+          7: { x: 155 },
+          8: { x: 177 },
+          9: { x: 199 },
+          avg: { x: 221, w: 48, h: 25 },
+          fps: { x: 271, w: 43, h: 25 },
+          max: { x: 316, w: 53, h: 25 },
+          min: { x: 371, w: 47, h: 25 },
+        },
+      },
+      fps: '---',
+      avgFps: '---',
+      minFps: '---',
+      maxFps: '---',
+    }
+  },
+  hooks: {
+    ready() {
+      let minFps = 10000
+      let maxFps = 0
+      let avgFps = 0
+      let totalFps = 0
+      let fpsUpdateCounter = 0
 
-        // This leaks - might be L3 SubTexture issue
-        // renderer.on('fpsUpdate', (rM, { fps }) => {
-        //   minFps = Math.min(fps, minFps)
-        //   maxFps = Math.max(fps, maxFps)
-        //   totalFps += fps
-        //   fpsUpdateCounter++
-        //   avgFps = Math.round(totalFps / fpsUpdateCounter)
+      renderer.on('fpsUpdate', (rM, { fps }) => {
+        minFps = Math.min(fps, minFps)
+        maxFps = Math.max(fps, maxFps)
+        totalFps += fps
+        fpsUpdateCounter++
+        avgFps = Math.round(totalFps / fpsUpdateCounter)
 
-        //   this.fps = fps.toString().padStart(3, '0')
-        //   this.avgFps = avgFps.toString().padStart(3, '0')
-        //   this.minFps = minFps.toString().padStart(3, '0')
-        //   this.maxFps = maxFps.toString().padStart(3, '0')
-        // })
-      },
+        this.fps = fps.toString().padStart(3, '0')
+        this.avgFps = avgFps.toString().padStart(3, '0')
+        this.minFps = minFps.toString().padStart(3, '0')
+        this.maxFps = maxFps.toString().padStart(3, '0')
+      })
     },
-  })
+  },
+})
diff --git a/src/components/index.js b/src/components/index.js
index 3533f10b..f52cc3a6 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -18,11 +18,9 @@
 import Circle from './Circle.js'
 import RouterView from './RouterView.js'
 import Sprite from './Sprite.js'
-import FPScounter from './FPScounter.js'
 
 export default () => ({
   Circle: Circle(),
   RouterView: RouterView(),
   Sprite: Sprite(),
-  FPScounter: FPScounter(),
 })