diff --git a/contents/template.md b/contents/template.md
new file mode 100644
index 0000000..80f121b
--- /dev/null
+++ b/contents/template.md
@@ -0,0 +1,19 @@
+---
+title:
+description:
+date: 13/02/2022
+categories:
+ -
+url:
+git:
+pad:
+links:
+ - title:
+ url:
+cover:
+cover_alt:
+project:
+template:
+script:
+css:
+---
diff --git a/projects/panel/documentation.md b/projects/panel/documentation.md
new file mode 100644
index 0000000..36ee4bf
--- /dev/null
+++ b/projects/panel/documentation.md
@@ -0,0 +1,78 @@
+---
+title: Knob feast & Cables spaghetti hell
+description: Generate interactive synth panel from SVG
+date: 11/04/2022
+categories:
+ - Web
+ - Prototype
+ - Interaction
+url:
+git: https://git.xpub.nl/kamo/panel
+pad: https://pad.xpub.nl/p/modcms
+cover: nutritional-synth.jpg
+cover_alt: Nutritional synth
+---
+
+This is a prototype for generating interactive panels starting from vector drawings of (real) synth. It will be used in the [mod cms](https://pad.xpub.nl/p/modcms), a CMS for storing patch of analog synthetizer in a workbook fashion. In the future maybe also making sounds out of it? Who knows.
+
+ATM the interactive widgets are: knobs and sockets. For the knob we are using the [input-knobs.js](https://g200kg.github.io/input-knobs/) library. It's a small library that turns `` HTML elements into controller of different types (knobs, fader, switch, etc)
+
+The sockets are modelled on the modular idea of connecting things with cables. To see more look at [spaghetti](https://git.xpub.nl/kamo/spaghetti).
+
+The idea of using SVG is borrowed from VCV rack, in this way the synth could be created starting from a drawing.
+
+In the SVG there are two different layers: one is for the design and the other for the parameters. With a precise convention on colors and names in the second, the Panel class can mount the interactive knobs and sockets on the synth.
+
+### Key:
+
+`#FF0000` Red elements in the SVG `params` layer will be turned into knobs. Their ID will be the linked parameter. So for instance an `