diff --git a/index.js b/index.js
index 4666af6..ab331b5 100644
--- a/index.js
+++ b/index.js
@@ -12,7 +12,7 @@ app.use(store)
 app.use(languageStore)
 app.use(extensionStore)
 app.route('/', mainView)
-app.route('/hydra-backup', mainView)
+app.route('/dev', mainView)
 app.mount('body')
 
 
diff --git a/public/extensions/arithmetics.png b/public/extensions/arithmetics.png
new file mode 100644
index 0000000..c7db28e
Binary files /dev/null and b/public/extensions/arithmetics.png differ
diff --git a/public/extensions/config.json b/public/extensions/config.json
new file mode 100644
index 0000000..19d029d
--- /dev/null
+++ b/public/extensions/config.json
@@ -0,0 +1,16 @@
+{
+    "categories": [
+        {
+            "title": "extensions",
+            "id": "extensions"
+        },
+        {
+            "title": "external libraries",
+            "id": "external-libraries"
+        },
+        {
+            "title": "examples",
+            "id": "examples"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/public/extensions/examples.json b/public/extensions/examples.json
new file mode 100644
index 0000000..58c55e7
--- /dev/null
+++ b/public/extensions/examples.json
@@ -0,0 +1,14 @@
+[
+    {
+        "name": "webcam",
+        "description": "use the camera as a source",
+        "documentation": "",
+        "author": "",
+        "thumbnail": "op-art.png",
+        "load": null,
+        "examples": [
+            "https://hydra.ojack.xyz/?code=czAuaW5pdENhbSgpJTIwJTJGJTJGaW5pdGlhbGl6ZSUyMHdlYmNhbSUyMGFzJTIwZXh0ZXJuYWwlMjBzb3VyY2UlMjAnczAnJTBBc3JjKHMwKS5vdXQoKSUyMCUyRiUyRiUyMHVzZSUyMGV4dGVybmFsJTIwc291cmNlJTIwJ3MwJyUyMGluc2lkZSUyMEh5ZHJh",
+            "https://hydra.ojack.xyz/?code=czAuaW5pdENhbSgpJTBBc3JjKHMwKS5jb2xvcigtMSUyQyUyMDEpLm91dCgp"
+        ]
+    }
+]
\ No newline at end of file
diff --git a/public/extensions/extensions.json b/public/extensions/extensions.json
new file mode 100644
index 0000000..ef9e1e5
--- /dev/null
+++ b/public/extensions/extensions.json
@@ -0,0 +1,59 @@
+[
+    {
+        "name": "Op-art patterns",
+        "description": "Additional fragment shaders inspired by op-art patterns",
+        "documentation": "https://gitlab.com/metagrowing/extra-shaders-for-hydra#op-art-patterns",
+        "author": "Thomas Jourdan",
+        "thumbnail": "op-art.png",
+        "load": "await loadScript(\\\"https://cdn.statically.io/gl/metagrowing/extra-shaders-for-hydra/main/lib/lib-pattern.js\\\")",
+        "examples": [
+            "https://hydra.ojack.xyz/?code=JTJGJTJGJTIwbGljZW5zZWQlMjB3aXRoJTIwQ0MlMjBCWS1OQy1TQSUyMDQuMCUyMGh0dHBzJTNBJTJGJTJGY3JlYXRpdmVjb21tb25zLm9yZyUyRmxpY2Vuc2VzJTJGYnktbmMtc2ElMkY0LjAlMkYlMEFhd2FpdCUyMGxvYWRTY3JpcHQoJTIyaHR0cHMlM0ElMkYlMkZjZG4uc3RhdGljYWxseS5pbyUyRmdsJTJGbWV0YWdyb3dpbmclMkZleHRyYS1zaGFkZXJzLWZvci1oeWRyYSUyRm1haW4lMkZsaWIlMkZsaWItcGF0dGVybi5qcyUyMiklMEElMEFhJTIwJTNEJTIwKCklMjAlM0QlM0UlMjAwLjEzNyUyMColMjB0aW1lJTNCJTBBc3BpcmFsKDIuMCUyQyUyMDUuMCUyQyUyMDAuMykucm90YXRlKCgpJTIwJTNEJTNFJTIwLTIuMCUyMColMjBhKCkpLm91dChvMCklMEFzcGlyYWwoMi4wJTJDJTIwNS4wJTJDJTIwMC4zKS5yb3RhdGUoYSkuZGlmZihjb25jZW50cmljKDEwMC4wJTJDMC4yNSUyQzAuMjUpKS5vdXQobzEpJTBBc3BpcmFsKDIuMCUyQyUyMDUuMCUyQyUyMDAuMykucm90YXRlKGEpLm11bHQoc3BpcmFsKDEuMCUyQyUyMDMuMCUyQyUyMDAuMykpLm91dChvMiklMEFzcGlyYWwoMS4wJTJDJTIwNS4wJTJDJTIwMC4xKS5yb3RhdGUoYSkuZGlmZihicmljaygpKS5vdXQobzMpJTBBcmVuZGVyKCklMEElMEElMEE%3D"
+        ]
+    },
+    {
+        "name": "hydra-arithmetics",
+        "description": "Adds many functions related to visual arithmetics.",
+        "documentation": "https://gitlab.com/metagrowing/extra-shaders-for-hydra/-/blob/main/gallery/pattern/README.md",
+        "author": "ritchse",
+        "thumbnail": "arithmetics.png",
+        "load": "await loadScript(\\\"https://hydra-extensions.glitch.me/hydra-arithmetics.js\\\")",
+        "examples": [
+            "https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlkcmEtZXh0ZW5zaW9ucy5nbGl0Y2gubWUlMkZoeWRyYS1hcml0aG1ldGljcy5qcyUyMiklMEElMEFvc2MoMTAlMkMuMSUyQzIpJTBBJTA5Lm1vZChncmFkaWVudCgpLmFzaW4oKS5jb3MoKSklMEElMDkuc3RlcChub2lzZSgyKS51bmlwb2xhcigpLmRpdihvMCkpJTBBJTA5LmJsZW5kKG8wJTJDLjIpJTBBJTA5Lm91dCgp"
+        ]
+    },
+    {
+        "name": "hydrated-gradient",
+        "description": "make gradients with specified colors",
+        "documentation": "https://hydrated.savamala.top/",
+        "author": "Joan Queralt",
+        "thumbnail": "gradient.png",
+        "load": "await loadScript(\\\"https://hydrated.savamala.top/hydra-gradient.js\\\")",
+        "examples": [
+           "https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlkcmF0ZWQuc2F2YW1hbGEudG9wJTJGaHlkcmEtZ3JhZGllbnQuanMlMjIpJTBBJTBBJTJGJTJGJTIwVXNlJTIwZ3JhZGllbnQyJTIwdG8lMjBjcmVhdGUlMjBhJTIwZ3JhZGllbnQlMjBiZXR3ZWVuJTIwdHdvJTIwY29sb3JzJTNBJTBBJTJGJTJGJTIwZ3JhZGllbnQyKHIwJTNEMSUyQ2cwJTNEMCUyQ2IwJTNEJTJDcjElM0QwJTJDZzElM0QwJTJDYjElM0QxJTJDc3BlZWQlM0QwKSUwQSUwQWdyYWRpZW50MigxJTJDMCUyQzAlMkMwLjglMkMwJTJDMC44JTJDMC4yKS5vdXQoKSUwQSUwQXJlbmRlcihvMCk%3D"
+        ]
+    },
+    {
+        "name": "hydra-shaderpark",
+        "description": "extension to use hydra with Shader Park - A JavaScript library for creating interactive procedural 2D and 3D shaders.",
+        "www": "https://shaderpark.com/",
+        "documentation": "https://shaderpark.com/",
+        "author": "emptyflash, Torin Blankensmith and Peter Whidden",
+        "thumbnail": "shader-park.png",
+        "load": "const { sculptToHydraRenderer } = await import(\\\"https://livecode.emptyfla.sh/hydra/all.js\\\")",
+        "examples": [
+           "https://hydra.ojack.xyz/?code=JTJGJTJGJTIwbGljZW5zZWQlMjB3aXRoJTIwQ0MlMjBCWS1OQy1TQSUyMDQuMCUyMGh0dHBzJTNBJTJGJTJGY3JlYXRpdmVjb21tb25zLm9yZyUyRmxpY2Vuc2VzJTJGYnktbmMtc2ElMkY0LjAlMkYlMEFjb25zdCUyMCU3QiUyMHNjdWxwdFRvSHlkcmFSZW5kZXJlciUyMCU3RCUyMCUzRCUyMGF3YWl0JTIwaW1wb3J0KCUyMmh0dHBzJTNBJTJGJTJGbGl2ZWNvZGUuZW1wdHlmbGEuc2glMkZoeWRyYSUyRmFsbC5qcyUyMiklMEElMEFzY3VscHRUb0h5ZHJhUmVuZGVyZXIoKCklMjAlM0QlM0UlMjAlN0IlMEElMDklMDlyb3RhdGVYKHRpbWUlMjAlMkYlMjA1KSUwQSUwOSUwOXJvdGF0ZVoodGltZSUyMCUyRiUyMDMpJTBBJTA5JTA5ZGlzcGxhY2Uoc2luKHRpbWUpJTJDJTIwMSUyQyUyMDApJTBBJTA5JTA5bWlycm9yTigzJTJDJTIwMyklMEElMDklMDl0b3J1cygwLjglMkMlMjAwLjM4JTIwJTJCJTIwMC4xJTIwKiUyMHNpbih0aW1lKSklMEElMDklN0QpJTBBJTA5Lm91dChvMCklMEElMEFyZW5kZXIobzApJTBB"
+        ]
+    },
+    {
+        "name": "hydra-midi",
+        "description": "midi in hydra",
+        "www": "https://github.com/arnoson/hydra-midi",
+        "documentation": "https://github.com/arnoson/hydra-midi",
+        "author": "Arno Schlipf",
+        "thumbnail": "shader-park.png",
+        "load": "await loadScript(\\\"https://cdn.jsdelivr.net/npm/hydra-midi@latest/dist/index.js\\\")",
+        "examples": [
+           "https://hydra.ojack.xyz/?code=JTJGJTJGJTIwWW91JTIwY2FuJTIwZWl0aGVyJTIwdXNlJTIwJTYwJTQwbGF0ZXN0JTYwJTIwb3IlMjBsb2FkJTIwYSUyMHNwZWNpZmljJTIwdmVyc2lvbiUyMHdpdGglMkMlMjBmb3IlMjBleGFtcGxlJTJDJTIwJTYwJTQwMC40LjAlNjAuJTBBYXdhaXQlMjBsb2FkU2NyaXB0KCUwQSUyMCUyMCdodHRwcyUzQSUyRiUyRmNkbi5qc2RlbGl2ci5uZXQlMkZucG0lMkZoeWRyYS1taWRpJTQwbGF0ZXN0JTJGZGlzdCUyRmluZGV4LmpzJyUwQSklMEElMEElMkYlMkYlMjBVc2UlMjBtaWRpJTIwbWVzc2FnZXMlMjBmcm9tJTIwYWxsJTIwY2hhbm5lbHMlMjBvZiUyMGFsbCUyMGlucHV0cy4lMEFhd2FpdCUyMG1pZGkuc3RhcnQoJTdCJTIwY2hhbm5lbCUzQSUyMCcqJyUyQyUyMGlucHV0JTNBJTIwJyonJTIwJTdEKSUwQSUyRiUyRiUyMFNob3clMjBhJTIwc21hbGwlMjBtaWRpJTIwbW9uaXRvciUyMChzaW1pbGFyJTIwdG8lMjBoeWRyYSdzJTIwJTYwYS5zaG93KCklNjApLiUwQW1pZGkuc2hvdygpJTBBJTBBJTJGJTJGJTIwVXNlJTIwYW55JTIwbm90ZSUyMHRvJTIwY29udHJvbCUyMHRoZSUyMHJlZCUyMGFtb3VudCUyMG9mJTIwaHlkcmEncyUyMCU2MHNvbGlkKCklNjAlMjBmdW5jdGlvbi4lMEFzb2xpZChub3RlKCcqJyklMkMlMjAwJTJDJTIwMSkub3V0KCklMEElMEElMkYlMkYlMjBPciUyQyUyMGlmJTIweW91JTIwYXJlJTIwdXNpbmclMjBhJTIwbWlkaSUyMGNvbnRyb2xsZXIlMjBhbmQlMjBub3QlMjBhJTIwa2V5Ym9hcmQlM0ElMEElMkYlMkYlMjBVc2UlMjBhJTIwY29udHJvbCUyMGNoYW5nZSUyMHZhbHVlJTIwdG8lMjBjb250cm9sJTIwdGhlJTIwcmVkJTIwYW1vdW50LiUwQSUyRiUyRiUyMHNvbGlkKGNjKDc0KSUyQyUyMDAlMkMlMjAxKS5vdXQoKQ%3D%3D"
+        ]
+    }
+]
\ No newline at end of file
diff --git a/public/extensions/external-libraries.json b/public/extensions/external-libraries.json
new file mode 100644
index 0000000..9fdd0db
--- /dev/null
+++ b/public/extensions/external-libraries.json
@@ -0,0 +1,38 @@
+[
+    {
+        "name": "p5.js",
+        "description": "JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! (automatically loaded into hydra editor)",
+        "www": "https://p5js.org/",
+        "documentation": "https://github.com/hydra-synth/hydra#using-p5js-with-hydra",
+        "author": "Lauren Lee McCarthy + community",
+        "thumbnail": "op-art.png",
+        "load": "",
+        "examples": [
+            "https://hydra.ojack.xyz/?code=JTJGJTJGJTIwSW5pdGlhbGl6ZSUyMGElMjBuZXclMjBwNSUyMGluc3RhbmNlJTIwSXQlMjBpcyUyMG9ubHklMjBuZWNlc3NhcnklMjB0byUyMGNhbGwlMjB0aGlzJTIwb25jZSUwQXA1JTIwJTNEJTIwbmV3JTIwUDUoKSUyMCUyRiUyRiUyMCU3QndpZHRoJTNBJTIwd2luZG93LmlubmVyV2lkdGglMkMlMjBoZWlnaHQlM0F3aW5kb3cuaW5uZXJIZWlnaHQlMkMlMjBtb2RlJTNBJTIwJ1AyRCclN0QlMEElMEElMkYlMkYlMjBkcmF3JTIwYSUyMHJlY3RhbmdsZSUyMGF0JTIwcG9pbnQlMjAzMDAlMkMlMjAxMDAlMEFwNS5yZWN0KDMwMCUyQyUyMDEwMCUyQyUyMDEwMCUyQyUyMDEwMCklMEElMEElMkYlMkYlMjBOb3RlJTIwdGhhdCUyMFA1JTIwcnVucyUyMGluJTIwaW5zdGFuY2UlMjBtb2RlJTJDJTIwc28lMjBhbGwlMjBmdW5jdGlvbnMlMjBuZWVkJTIwdG8lMjBzdGFydCUyMHdpdGglMjB0aGUlMjB2YXJpYWJsZSUyMHdoZXJlJTIwUDUlMjB3YXMlMjBpbml0aWFsaXplZCUyMChpbiUyMHRoaXMlMjBjYXNlJTIwcDUpJTBBJTJGJTJGJTIwcmVmZXJlbmNlJTIwZm9yJTIwUDUlM0ElMjBodHRwcyUzQSUyRiUyRlA1anMub3JnJTJGcmVmZXJlbmNlJTJGJTBBJTJGJTJGJTIwZXhwbGFuYXRpb24lMjBvZiUyMGluc3RhbmNlJTIwbW9kZSUzQSUyMGh0dHBzJTNBJTJGJTJGZ2l0aHViLmNvbSUyRnByb2Nlc3NpbmclMkZQNS5qcyUyRndpa2klMkZHbG9iYWwtYW5kLWluc3RhbmNlLW1vZGUlMEElMEElMkYlMkYlMjBXaGVuJTIwbGl2ZSUyMGNvZGluZyUyQyUyMHRoZSUyMCUyMnNldHVwKCklMjIlMjBmdW5jdGlvbiUyMG9mJTIwUDUuanMlMjBoYXMlMjBiYXNpY2FsbHklMjBubyUyMHVzZSUzQiUyMGFueXRoaW5nJTIwdGhhdCUyMHlvdSUyMHdvdWxkJTIwaGF2ZSUyMGNhbGxlZCUyMGluJTIwc2V0dXAlMjB5b3UlMjBjYW4lMjBqdXN0JTIwY2FsbCUyMG91dHNpZGUlMjBvZiUyMGFueSUyMGZ1bmN0aW9uLiUwQSUwQXA1LmNsZWFyKCklMEElMEFmb3IodmFyJTIwaSUyMCUzRCUyMDAlM0IlMjBpJTIwJTNDJTIwMTAwJTNCJTIwaSUyQiUyQiklN0IlMEElMjAlMjBwNS5maWxsKGkqMTAlMkMlMjBpJTI1MzAlMkMlMjAyNTUpJTBBJTIwJTIwcDUucmVjdChpKjIwJTJDJTIwMjAwJTJDJTIwMTAlMkMyMDApJTBBJTdEJTBBJTBBJTJGJTJGJTIwVG8lMjBsaXZlJTIwY29kZSUyMGFuaW1hdGlvbnMlMkMlMjB5b3UlMjBjYW4lMjByZWRlZmluZSUyMHRoZSUyMGRyYXclMjBmdW5jdGlvbiUyMG9mJTIwUDUlMjBhcyUyMGZvbGxvd3MlM0ElMEElMkYlMkYlMjAoYSUyMHJlY3RhbmdsZSUyMHRoYXQlMjBmb2xsb3dzJTIwdGhlJTIwbW91c2UpJTBBcDUuZHJhdyUyMCUzRCUyMCgpJTIwJTNEJTNFJTIwJTdCJTBBJTIwJTIwcDUuZmlsbChwNS5tb3VzZVglMkY1JTJDJTIwcDUubW91c2VZJTJGNSUyQyUyMDI1NSUyQyUyMDEwMCklMEElMjAlMjBwNS5yZWN0KHA1Lm1vdXNlWCUyQyUyMHA1Lm1vdXNlWSUyQyUyMDMwJTJDJTIwMTUwKSUwQSU3RCUwQSUwQSUyRiUyRiUyMFRvJTIwdXNlJTIwUDUlMjBhcyUyMGFuJTIwaW5wdXQlMjB0byUyMGh5ZHJhJTJDJTIwc2ltcGx5JTIwdXNlJTIwdGhlJTIwY2FudmFzJTIwYXMlMjBhJTIwc291cmNlJTNBJTBBczAuaW5pdCglN0JzcmMlM0ElMjBwNS5jYW52YXMlN0QpJTBBJTBBJTJGJTJGJTIwVGhlbiUyMHJlbmRlciUyMHRoZSUyMGNhbnZhcyUwQXNyYyhzMCkucmVwZWF0KCkub3V0KCk%3D"
+        ]
+    },
+    {
+        "name": "Tone.js",
+        "description": "Web Audio framework for creating interactive music in the browser",
+        "www": "https://tonejs.github.io/",
+        "documentation": "https://tonejs.github.io/docs/14.7.77/index.html",
+        "author": "Yotam Mann",
+        "thumbnail": "arithmetics.png",
+        "load": "await loadScript(\\\"https://unpkg.com/tone\\\")",
+        "examples": [
+            "https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGdW5wa2cuY29tJTJGdG9uZSUyMiklMEElMEFzeW50aCUyMCUzRCUyMG5ldyUyMFRvbmUuU3ludGgoKS50b0Rlc3RpbmF0aW9uKCklM0IlMEFzeW50aC50cmlnZ2VyQXR0YWNrUmVsZWFzZSglMjJDNCUyMiUyQyUyMCUyMjhuJTIyKSUzQg%3D%3D"
+        ]
+    },
+    {
+        "name": "Three.js",
+        "description": "JavaScript 3D library",
+        "documentation": "https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene",
+        "www": "",
+        "author": "mr.doob",
+        "thumbnail": "gradient.png",
+        "load": "await loadScript(\\\"https://threejs.org/build/three.js\\\")",
+        "examples": [
+           "https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGdGhyZWVqcy5vcmclMkZidWlsZCUyRnRocmVlLmpzJTIyKSUwQSUwQXNjZW5lJTIwJTNEJTIwbmV3JTIwVEhSRUUuU2NlbmUoKSUwQWNhbWVyYSUyMCUzRCUyMG5ldyUyMFRIUkVFLlBlcnNwZWN0aXZlQ2FtZXJhKDc1JTJDJTIwd2luZG93LmlubmVyV2lkdGglMjAlMkYlMjB3aW5kb3cuaW5uZXJIZWlnaHQlMkMlMjAwLjElMkMlMjAxMDAwKSUwQSUwQXJlbmRlcmVyJTIwJTNEJTIwbmV3JTIwVEhSRUUuV2ViR0xSZW5kZXJlcigpJTBBcmVuZGVyZXIuc2V0U2l6ZSh3aWR0aCUyQyUyMGhlaWdodCklMEFnZW9tZXRyeSUyMCUzRCUyMG5ldyUyMFRIUkVFLkJveEdlb21ldHJ5KCklMEFtYXRlcmlhbCUyMCUzRCUyMG5ldyUyMFRIUkVFLk1lc2hCYXNpY01hdGVyaWFsKCU3QmNvbG9yJTNBJTIwMHgwMGZmMDAlN0QpJTBBY3ViZSUyMCUzRCUyMG5ldyUyMFRIUkVFLk1lc2goZ2VvbWV0cnklMkMlMjBtYXRlcmlhbCklM0IlMEFzY2VuZS5hZGQoY3ViZSklMEFjYW1lcmEucG9zaXRpb24ueiUyMCUzRCUyMDEuNSUwQSUwQSUyRiUyRiUyMCd1cGRhdGUnJTIwaXMlMjBhJTIwcmVzZXJ2ZWQlMjBmdW5jdGlvbiUyMHRoYXQlMjB3aWxsJTIwYmUlMjBydW4lMjBldmVyeSUyMHRpbWUlMjB0aGUlMjBtYWluJTIwaHlkcmElMjByZW5kZXJpbmclMjBjb250ZXh0JTIwaXMlMjB1cGRhdGVkJTBBdXBkYXRlJTIwJTNEJTIwKCklMjAlM0QlM0UlMjAlN0IlMEElMjAlMjBjdWJlLnJvdGF0aW9uLnglMjAlMkIlM0QlMjAwLjAxJTNCJTBBJTIwJTIwY3ViZS5yb3RhdGlvbi55JTIwJTJCJTNEJTIwMC4wMSUzQiUwQSUyMCUyMHJlbmRlcmVyLnJlbmRlciglMjBzY2VuZSUyQyUyMGNhbWVyYSUyMCklM0IlMEElN0QlMEElMEFzMC5pbml0KCU3QiUyMHNyYyUzQSUyMHJlbmRlcmVyLmRvbUVsZW1lbnQlMjAlN0QpJTBBJTBBc3JjKHMwKS5yZXBlYXQoKS5vdXQoKSUwQSUwQQ%3D%3D"
+        ]
+    }
+]
\ No newline at end of file
diff --git a/public/extensions/gradient.png b/public/extensions/gradient.png
new file mode 100644
index 0000000..12aba3c
Binary files /dev/null and b/public/extensions/gradient.png differ
diff --git a/public/extensions/op-art.png b/public/extensions/op-art.png
new file mode 100644
index 0000000..c904935
Binary files /dev/null and b/public/extensions/op-art.png differ
diff --git a/public/extensions/shader-park.png b/public/extensions/shader-park.png
new file mode 100644
index 0000000..4f01b84
Binary files /dev/null and b/public/extensions/shader-park.png differ
diff --git a/src/stores/extension-store.js b/src/stores/extension-store.js
index f6b2cce..7e8f695 100644
--- a/src/stores/extension-store.js
+++ b/src/stores/extension-store.js
@@ -1,21 +1,85 @@
-import extensions from './hydra-extensions.json'
+// import extensions from './÷extensions/hydra-extensions.json'
+
+// const CATEGORIES = ['extensions', 'external libraries', 'examples']
+const CONFIG_PATH = '/extensions/config.json'
 
 
-export default function store(state, emitter) {
+export default async function store(state, emitter) {
+    // old / deprecated
+    // state.extensions = {
+    //     categories: ['extensions', 'external libraries', 'examples'],
+    //     selectedCategoryIndex: 0,
+    //     //extensions: extensions,
+    //     extensions: [],
+    //     selectedExtension: null,
+    //     baseURL: '/extensions/'
+    // }
+
+    // new
     state.extensions = {
-        categories: ['extensions', 'external libraries', 'examples'],
+        baseURL: '/extensions/',
         selectedCategoryIndex: 0,
-        extensions: extensions,
-        selectedExtension: null
+        categories: [
+            {
+                name: 'extensions',
+                slug: 'extensions',
+                entries: [],
+                hasLoaded: false
+            },
+            {
+                name: 'external libraries',
+                slug: 'external-libraries',
+                entries: [],
+                hasLoaded: false
+            },
+            {
+                name: 'examples',
+                slug: 'examples',
+                entries: [],
+                hasLoaded: false
+            }
+        ]
     }
 
-    emitter.on('extensions: select category', (index) => {
+
+
+    // const config = await import('./extensions/config.json', {
+    //     assert: {
+    //         type: 'json'
+    //     }
+    // });
+    // fetch(CONFIG_PATH)
+    // .then((response => response.json())).then( d => {
+    //         console.log('loaded d', d)
+    //     })
+
+    // config.then( d => {
+    //     console.log('loaded d', d)
+    // })
+    
+
+    // state.extensions.extensions.forEach((ext) => { ext.thumbnail = state.extensions.baseURL + ext.thumbnail })
+
+    emitter.on('extensions: select category', (index = state.extensions.selectedCategoryIndex) => {
         state.extensions.selectedCategoryIndex = index
         emitter.emit('render')
+        const currCategory = state.extensions.categories[index]
+        if(!currCategory.hasLoaded) {
+            const extensionPath = state.extensions.baseURL + currCategory.slug + '.json'
+
+            fetch(extensionPath)
+    .then((response => response.json())).then( d => {
+            console.log('loaded d', d)
+            d.forEach((ext) => { ext.thumbnail = state.extensions.baseURL + ext.thumbnail })
+            currCategory.entries = d
+            emitter.emit('render')
+        })
+        }
     })
 
-    emitter.on('extensions: add to editor', (index) => {
-        const code = extensions[index].load
+    emitter.on('extensions: add to editor', (extensionIndex) => {
+        const {categories, selectedCategoryIndex } = state.extensions
+        const code = categories[selectedCategoryIndex].entries[extensionIndex].load
         emitter.emit('editor: add code to top', code)
     })
 
@@ -28,7 +92,8 @@ export default function store(state, emitter) {
     // })
 
     emitter.on('extensions: load example', (extensionIndex, exampleIndex) => {
-        const path = state.extensions.extensions[extensionIndex].examples[exampleIndex]
+        const {categories, selectedCategoryIndex } = state.extensions
+        const path = categories[selectedCategoryIndex].entries[extensionIndex].examples[exampleIndex]
         const url = new URL(path);
         console.log(url)
 
diff --git a/src/stores/hydra-extensions.json b/src/stores/hydra-extensions.json
deleted file mode 100644
index 58d2ad9..0000000
--- a/src/stores/hydra-extensions.json
+++ /dev/null
@@ -1,35 +0,0 @@
-[
-    {
-        "name": "Op-art patterns",
-        "description": "Additional fragment shaders inspired by op-art patterns",
-        "documentation": "https://gitlab.com/metagrowing/extra-shaders-for-hydra#op-art-patterns",
-        "author": "Thomas Jourdan",
-        "thumbnail": "",
-        "load": "await loadScript(\\\"https://cdn.statically.io/gl/metagrowing/extra-shaders-for-hydra/main/lib/lib-pattern.js\\\")",
-        "examples": [
-            "https://hydra.ojack.xyz/?code=JTJGJTJGJTIwbGljZW5zZWQlMjB3aXRoJTIwQ0MlMjBCWS1OQy1TQSUyMDQuMCUyMGh0dHBzJTNBJTJGJTJGY3JlYXRpdmVjb21tb25zLm9yZyUyRmxpY2Vuc2VzJTJGYnktbmMtc2ElMkY0LjAlMkYlMEFhd2FpdCUyMGxvYWRTY3JpcHQoJTIyaHR0cHMlM0ElMkYlMkZjZG4uc3RhdGljYWxseS5pbyUyRmdsJTJGbWV0YWdyb3dpbmclMkZleHRyYS1zaGFkZXJzLWZvci1oeWRyYSUyRm1haW4lMkZsaWIlMkZsaWItcGF0dGVybi5qcyUyMiklMEElMEFhJTIwJTNEJTIwKCklMjAlM0QlM0UlMjAwLjEzNyUyMColMjB0aW1lJTNCJTBBc3BpcmFsKDIuMCUyQyUyMDUuMCUyQyUyMDAuMykucm90YXRlKCgpJTIwJTNEJTNFJTIwLTIuMCUyMColMjBhKCkpLm91dChvMCklMEFzcGlyYWwoMi4wJTJDJTIwNS4wJTJDJTIwMC4zKS5yb3RhdGUoYSkuZGlmZihjb25jZW50cmljKDEwMC4wJTJDMC4yNSUyQzAuMjUpKS5vdXQobzEpJTBBc3BpcmFsKDIuMCUyQyUyMDUuMCUyQyUyMDAuMykucm90YXRlKGEpLm11bHQoc3BpcmFsKDEuMCUyQyUyMDMuMCUyQyUyMDAuMykpLm91dChvMiklMEFzcGlyYWwoMS4wJTJDJTIwNS4wJTJDJTIwMC4xKS5yb3RhdGUoYSkuZGlmZihicmljaygpKS5vdXQobzMpJTBBcmVuZGVyKCklMEElMEElMEE%3D"
-        ]
-    },
-    {
-        "name": "hydra-arithmetics",
-        "description": "Adds many functions related to visual arithmetics.",
-        "documentation": "https://gitlab.com/metagrowing/extra-shaders-for-hydra/-/blob/main/gallery/pattern/README.md",
-        "author": "ritchse",
-        "thumbnail": "",
-        "load": "await loadScript(\\\"https://hydra-extensions.glitch.me/hydra-arithmetics.js\\\")",
-        "examples": [
-            "https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlkcmEtZXh0ZW5zaW9ucy5nbGl0Y2gubWUlMkZoeWRyYS1hcml0aG1ldGljcy5qcyUyMiklMEElMEFvc2MoMTAlMkMuMSUyQzIpJTBBJTA5Lm1vZChncmFkaWVudCgpLmFzaW4oKS5jb3MoKSklMEElMDkuc3RlcChub2lzZSgyKS51bmlwb2xhcigpLmRpdihvMCkpJTBBJTA5LmJsZW5kKG8wJTJDLjIpJTBBJTA5Lm91dCgp"
-        ]
-    },
-    {
-        "name": "hydrated-gradient",
-        "description": "make gradients with specified colors",
-        "documentation": "https://hydrated.savamala.top/",
-        "author": "Joan Queralt",
-        "thumbnail": "",
-        "load": "await loadScript(\\\"https://hydrated.savamala.top/hydra-gradient.js\\\")",
-        "examples": [
-           "https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlkcmF0ZWQuc2F2YW1hbGEudG9wJTJGaHlkcmEtZ3JhZGllbnQuanMlMjIpJTBBJTBBJTJGJTJGJTIwVXNlJTIwZ3JhZGllbnQyJTIwdG8lMjBjcmVhdGUlMjBhJTIwZ3JhZGllbnQlMjBiZXR3ZWVuJTIwdHdvJTIwY29sb3JzJTNBJTBBJTJGJTJGJTIwZ3JhZGllbnQyKHIwJTNEMSUyQ2cwJTNEMCUyQ2IwJTNEJTJDcjElM0QwJTJDZzElM0QwJTJDYjElM0QxJTJDc3BlZWQlM0QwKSUwQSUwQWdyYWRpZW50MigxJTJDMCUyQzAlMkMwLjglMkMwJTJDMC44JTJDMC4yKS5vdXQoKSUwQSUwQXJlbmRlcihvMCk%3D"
-        ]
-    }
-]
\ No newline at end of file
diff --git a/src/stores/store.js b/src/stores/store.js
index dd60ccd..2cafcc7 100644
--- a/src/stores/store.js
+++ b/src/stores/store.js
@@ -158,6 +158,7 @@ export default function store(state, emitter) {
   emitter.on('show extensions', () => {
     state.showExtensions = true
     state.showInfo = true
+    emitter.emit('extensions: select category')
     emitter.emit('render')
   })
 
diff --git a/src/stores/text-elements.js b/src/stores/text-elements.js
index ccd792b..decc684 100644
--- a/src/stores/text-elements.js
+++ b/src/stores/text-elements.js
@@ -39,7 +39,7 @@ export default {
                 'support': 'If you enjoy using Hydra, please consider  <a {{open-collective}} >supporting continued development <3 </a>.'
             },
             extensions: {
-                about: 'Extensions and external libraries written in javascript can be loaded into the hydra editor. Click `add to project` to add a library or extension to your existing project. Click `load example` to show an example sketch into the editor.'
+                'about-extensions': 'Load community extensions to hydra-synth.'
             }
         }
     }
diff --git a/src/views/EditorComponent.js b/src/views/EditorComponent.js
index 4ee2b28..6fbb61c 100644
--- a/src/views/EditorComponent.js
+++ b/src/views/EditorComponent.js
@@ -21,6 +21,7 @@ export default class Editor extends Component {
    })
    // hacky, maybe not necessary
    this.innerText = document.getElementsByClassName('CodeMirror')[0]
+   this.innerText.style.transition = 'opacity 0.5s'
   }
 
   hide() {
diff --git a/src/views/extension-info.js b/src/views/extension-info.js
index 5c896dc..3efea78 100644
--- a/src/views/extension-info.js
+++ b/src/views/extension-info.js
@@ -10,7 +10,9 @@ const icon = (id, className, title, event) => html`
 const detailedInfo = (ext, index, emit) => {
   return html`<div 
      class="extension-list-item selected" style="display:flex;justify-content:space-between">
-     <div >
+     <img src="${ext.thumbnail}" width="40px" height="40px"/>
+
+     <div style="flex:1;padding-left:8px">
      <div><span style="font-weight:900">${ext.name} - </span> <span style="text-overflow:ellipses;overflow:hidden"> ${ext.author} </span></div>
      <div> <span style="">${ext.description}</span></div>
      </div>
@@ -27,11 +29,12 @@ const detailedInfo = (ext, index, emit) => {
 const listInfo = (ext, index, emit) => html`<div onclick="${() => emit('extensions: select extension', index)}" class="extension-list-item"><span style="font-weight:900">${ext.name} - </span> <span style="text-overflow:ellipses;overflow:hidden"> ${ext.description} </span> <span style="float:right">${ext.author}</span></div>`
 
 export default (state, emit) => {
-  const { categories, selectedCategoryIndex,  extensions, selectedExtension} = state.extensions
+  const { categories, selectedCategoryIndex } = state.extensions
+  const extensions = categories[selectedCategoryIndex].entries
   const { t } = state.translation
 //  ${i=== selectedExtension? detailedInfo(ext, i, emit) : listInfo(ext, i, emit)}
   const content = html`<div class="modal-content extensions">
-${raw(t('extensions.about'))}
+${raw(t('extensions.about-extensions'))}
 <div class="extension-list">
 ${extensions.map((ext, i) => detailedInfo(ext, i, emit))}
 </div>
@@ -41,7 +44,7 @@ ${extensions.map((ext, i) => detailedInfo(ext, i, emit))}
   ${categories.map((ex, i) => html`<div 
     class="language-select ${i===selectedCategoryIndex ? 'selected' : ''}" 
     onclick=${() => emit('extensions: select category', i)}
-    >${ex}</div>`)}
+    >${ex.name}</div>`)}
   </div>`
 
   return { content, header }