diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
index 792abb76..54637b46 100644
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -2,9 +2,9 @@ name: 'CodeQL'
 
 on:
   push:
-    branches: [main]
+    branches: ['main']
   pull_request:
-    branches: [main]
+    branches: ['main']
   schedule:
     - cron: '45 23 * * 2'
 
@@ -20,19 +20,22 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: ['javascript']
+        language: [javascript]
 
     steps:
-      - name: Checkout repository
+      - name: Checkout
         uses: actions/checkout@v3
 
       - name: Initialize CodeQL
         uses: github/codeql-action/init@v2
         with:
           languages: ${{ matrix.language }}
+          queries: +security-and-quality
 
       - name: Autobuild
         uses: github/codeql-action/autobuild@v2
 
       - name: Perform CodeQL Analysis
         uses: github/codeql-action/analyze@v2
+        with:
+          category: '/language:${{ matrix.language }}'
diff --git a/example/package-lock.json b/example/package-lock.json
index dfb97769..6e51420a 100644
--- a/example/package-lock.json
+++ b/example/package-lock.json
@@ -8,8 +8,11 @@
       "name": "@vinayakkulkarni/v-tweakpane-example",
       "version": "0.0.0",
       "dependencies": {
+        "@tweakpane/plugin-camerakit": "^0.2.2",
+        "@tweakpane/plugin-essentials": "^0.1.5",
+        "tweakpane": "^3.1.0",
         "v-github-icon": "^3.0.2",
-        "v-tweakpane": "^0.1.1",
+        "v-tweakpane": "^0.2.0",
         "vue": "^3.2.41"
       },
       "devDependencies": {
@@ -109,6 +112,14 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@tweakpane/plugin-camerakit": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@tweakpane/plugin-camerakit/-/plugin-camerakit-0.2.2.tgz",
+      "integrity": "sha512-NxZ8xnfTRqKF94WA8Wp2WDHFXgSGNo/akAxPmkfSuqn5mQ4CnlTJcMpTkCnSJvmJ9H5tUn5tTgMFNxts8b0N3w==",
+      "peerDependencies": {
+        "tweakpane": "^3.0.5"
+      }
+    },
     "node_modules/@tweakpane/plugin-essentials": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/@tweakpane/plugin-essentials/-/plugin-essentials-0.1.5.tgz",
@@ -1280,9 +1291,9 @@
       }
     },
     "node_modules/v-tweakpane": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/v-tweakpane/-/v-tweakpane-0.1.1.tgz",
-      "integrity": "sha512-ohsBmppfajsFMLlEPKaXTOaVQPZtd64B8GKPp1gS1eM0dr+l9ZQaSDB31BxGefo1mbXUMz0/QhPcydr21gBPtQ==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/v-tweakpane/-/v-tweakpane-0.2.0.tgz",
+      "integrity": "sha512-/mXwVgGS4442OesjM/HIWShl7M94nGjFOZQDE0fnRFIhygHWR4qKhxWH2ajCQJbOKKeRmVQOUSiY5Bod/3Knbw==",
       "dependencies": {
         "@tweakpane/plugin-essentials": "^0.1.5",
         "tweakpane": "^3.1.0"
@@ -1467,6 +1478,12 @@
         "fastq": "^1.6.0"
       }
     },
+    "@tweakpane/plugin-camerakit": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@tweakpane/plugin-camerakit/-/plugin-camerakit-0.2.2.tgz",
+      "integrity": "sha512-NxZ8xnfTRqKF94WA8Wp2WDHFXgSGNo/akAxPmkfSuqn5mQ4CnlTJcMpTkCnSJvmJ9H5tUn5tTgMFNxts8b0N3w==",
+      "requires": {}
+    },
     "@tweakpane/plugin-essentials": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/@tweakpane/plugin-essentials/-/plugin-essentials-0.1.5.tgz",
@@ -2248,9 +2265,9 @@
       "integrity": "sha512-orXPGT9ZnULV6oQ3jlDA7BEGRfLsC09TS7asFokrxFcZwWNcsxFOTkWZe1C9Z4lfSDIREpIWYAO+qwz1QqrRbg=="
     },
     "v-tweakpane": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/v-tweakpane/-/v-tweakpane-0.1.1.tgz",
-      "integrity": "sha512-ohsBmppfajsFMLlEPKaXTOaVQPZtd64B8GKPp1gS1eM0dr+l9ZQaSDB31BxGefo1mbXUMz0/QhPcydr21gBPtQ==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/v-tweakpane/-/v-tweakpane-0.2.0.tgz",
+      "integrity": "sha512-/mXwVgGS4442OesjM/HIWShl7M94nGjFOZQDE0fnRFIhygHWR4qKhxWH2ajCQJbOKKeRmVQOUSiY5Bod/3Knbw==",
       "requires": {
         "@tweakpane/plugin-essentials": "^0.1.5",
         "tweakpane": "^3.1.0"
diff --git a/example/package.json b/example/package.json
index ff1ba91f..003e7983 100644
--- a/example/package.json
+++ b/example/package.json
@@ -9,8 +9,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tweakpane/plugin-camerakit": "^0.2.2",
+    "@tweakpane/plugin-essentials": "^0.1.5",
+    "tweakpane": "^3.1.0",
     "v-github-icon": "^3.0.2",
-    "v-tweakpane": "^0.1.1",
+    "v-tweakpane": "^0.2.0",
     "vue": "^3.2.41"
   },
   "devDependencies": {
diff --git a/example/src/App.vue b/example/src/App.vue
index 2d70875d..8be1d359 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -1,10 +1,26 @@
 <template>
   <v-github-icon url="https://github.com/vinayakkulkarni/v-tweakpane" />
   <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
-    <v-tweakpane class="p-4" :pane="state.pane" />
-    <v-tweakpane class="p-4" :pane="state.pane" />
-    <v-tweakpane class="p-4" :pane="state.pane" />
-    <v-tweakpane class="p-4" :pane="state.pane" />
+    <v-tweakpane
+      class="p-4"
+      :pane="{ title: 'Simple Interval / Range Slider Example' }"
+      @on-pane-created="onPaneOneCreated"
+    />
+    <v-tweakpane
+      class="p-4"
+      :pane="{ title: 'Camera Kit Plugin Example' }"
+      @on-pane-created="onPaneTwoCreated"
+    />
+    <v-tweakpane
+      class="p-4"
+      :pane="{ title: 'Blade Example' }"
+      @on-pane-created="onPaneThreeCreated"
+    />
+    <v-tweakpane
+      class="p-4"
+      :pane="{ title: 'Colorpicker Example' }"
+      @on-pane-created="onPaneFourCreated"
+    />
   </section>
   <div class="absolute bottom-4 right-4">
     <a
@@ -23,9 +39,11 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
+  import { defineComponent } from 'vue';
   import { VGithubIcon } from 'v-github-icon';
   import { VTweakpane } from 'v-tweakpane';
+  import type { Pane } from 'tweakpane';
+  import * as CamerakitPlugin from '@tweakpane/plugin-camerakit';
 
   export default defineComponent({
     components: {
@@ -33,20 +51,64 @@
       VGithubIcon,
     },
     setup() {
-      const state = ref({
-        pane: {
-          title: 'My Awesome Pane',
-          inputs: [
-            {
-              factor: 123,
-              title: 'hello',
-              color: '#0f0',
-            },
-          ],
-        },
-      });
+      const onPaneOneCreated = (pane: Pane) => {
+        const PARAMS = {
+          interval: { min: 16, max: 48 },
+        };
+        pane.addInput(PARAMS, 'interval', {
+          min: 0,
+          max: 100,
+          step: 1,
+        });
+      };
+      const onPaneTwoCreated = (pane: Pane) => {
+        pane.registerPlugin(CamerakitPlugin);
+        const PARAMS = {
+          flen: 55,
+          fnum: 1.8,
+          iso: 100,
+        };
+        pane.addInput(PARAMS, 'flen', {
+          view: 'cameraring',
+          series: 0,
+          unit: { pixels: 50, ticks: 10, value: 0.2 },
+          min: 1,
+          step: 0.02,
+        });
+        pane.addInput(PARAMS, 'fnum', {
+          view: 'cameraring',
+          series: 1,
+          unit: { ticks: 10, pixels: 40, value: 0.2 },
+          wide: true,
+          min: 1.4,
+          step: 0.02,
+        });
+        pane.addInput(PARAMS, 'iso', {
+          view: 'camerawheel',
+          amount: 100,
+        });
+      };
+      const onPaneThreeCreated = (pane: Pane) => {
+        pane.addBlade({
+          view: 'text',
+          label: 'name',
+          parse: (v: number) => String(v),
+          value: 'sketch-01',
+        });
+      };
+      const onPaneFourCreated = (pane: Pane) => {
+        const PARAMS = {
+          background: { r: 255, g: 0, b: 55 },
+          tint: { r: 0, g: 255, b: 214, a: 0.5 },
+        };
+        pane.addInput(PARAMS, 'background');
+        pane.addInput(PARAMS, 'tint');
+      };
       return {
-        state,
+        onPaneOneCreated,
+        onPaneTwoCreated,
+        onPaneThreeCreated,
+        onPaneFourCreated,
       };
     },
   });