diff --git a/corsscripts/stackjsxgraph.js b/corsscripts/stackjsxgraph.js
index e7bddefccfc..072144b24a6 100644
--- a/corsscripts/stackjsxgraph.js
+++ b/corsscripts/stackjsxgraph.js
@@ -254,6 +254,10 @@ export const stack_jxg = {
         } else {
             objectinput[object.id] = [input];
         }
+        if (!(input in serializers)) {
+            /* If someone does registrations before other bindings to that input. */
+            _commonsetup(input);
+        }
         serializers[input][object.id] = serializer;
 
         registerobject(object);
diff --git a/corsscripts/stackjsxgraph.min.js b/corsscripts/stackjsxgraph.min.js
index 54671d72c61..98cc63e2323 100644
--- a/corsscripts/stackjsxgraph.min.js
+++ b/corsscripts/stackjsxgraph.min.js
@@ -1 +1 @@
-"use strict";var serializers={},deserializers={},initials={},objectgroups=[],objectinput={},registeredobjects={},active=!1;function _commonsetup(e){var i;e in serializers||(serializers[e]={},deserializers[e]=[],(i=document.getElementById(e)).addEventListener("input",()=>generalinputupdatehandler(e)),i.addEventListener("change",()=>generalinputupdatehandler(e)))}function registerobject(e){e.id in registeredobjects||(e.board.on("update",()=>generalobjectupdatehandlerid(e.id)),registeredobjects[e.id]=e)}function pointserializer(e){return JSON.stringify([e.X(),e.Y()])}function pointdeserializer(e,i){try{var t=JSON.parse(i);"number"==typeof t[0]&&"number"==typeof t[1]&&(e.setPosition(JXG.COORDS_BY_USER,t),e.board.update(),e.update())}catch(e){}}function pointdeserializerparsed(e,i){try{"number"==typeof i[0]&&"number"==typeof i[1]&&(e.setPosition(JXG.COORDS_BY_USER,i),e.board.update(),e.update())}catch(e){}}function sliderserializer(e){return JSON.stringify(e.Value())}function sliderdeserializer(e,i){try{e.setValue(JSON.parse(i)),e.board.update(),e.update()}catch(e){}}function generalobjectupdatehandler(e){generalobjectupdatehandlerid(e.id)}function generalobjectupdatehandlerid(e){if(!active){active=!0;try{var i=[];if(e in objectinput)for(var t=0;t<objectinput[e].length;t++){var r=objectinput[e][t];if(-1===i.indexOf(r)){i.push(r);var n=document.getElementById(r),a=serializers[r][e]();if(a===initials[r])return void(active=!1);initials[r]=null,n.value=a}}for(var s=0;s<objectgroups.length;s++){var o=objectgroups[s];if(-1!==o.indexOf(e))for(var d=0;d<o.length;d++){var u=o[d];if(u!==e&&u in objectinput)for(t=0;t<objectinput[u].length;t++){r=objectinput[u][t];-1===i.indexOf(r)&&(initials[r]=null,i.push(r),(n=document.getElementById(r)).value=serializers[r][u]())}}}for(t=0;t<i.length;t++){var n=document.getElementById(i[t]),l=new Event("change");n.dispatchEvent(l)}}catch(e){}active=!1}}function generalinputupdatehandler(e){if(e in deserializers){for(var i=document.getElementById(e),t=Object.keys(serializers[e]),r=!1,n=0;n<t.length;n++)serializers[e][t[n]]()!==i.value&&(r=!0,n=t.length+1);if(r)for(n=0;n<deserializers[e].length;n++)deserializers[e][n](i.value)}}const stack_jxg={define_group:function(e){for(var i=[],t=0;t<e.length;t++)-1===i.indexOf(e[t].id)&&i.push(e[t].id);objectgroups.push(i)},starts_moved:function(e){if(e.id in objectinput){for(var i=0;i<objectinput[e.id].length;i++)initials[objectinput[e.id][i]]=null;generalobjectupdatehandler(e)}},custom_bind:function(e,i,t,r){_commonsetup(e),initials[e]=i();var n=document.getElementById(e);n.value&&""!=n.value&&t(n.value),deserializers[e].push(t);for(var a=0;a<r.length;a++)this.register_object(e,r[a],i)},register_object:function(e,i,t){i.id in objectinput?e in objectinput[i.id]||objectinput[i.id].push(e):objectinput[i.id]=[e],serializers[e][i.id]=t,registerobject(i)},bind_point:function(e,i){this.custom_bind(e,()=>pointserializer(i),e=>pointdeserializer(i,e),[i])},bind_point_dual:function(e,i,t){this.custom_bind(e,()=>JSON.stringify([[i.X(),i.Y()],[t.X(),t.Y()]]),e=>{e=JSON.parse(e);pointdeserializerparsed(i,e[0]),pointdeserializerparsed(t,e[1])},[i,t])},bind_point_relative:function(e,i,t){this.custom_bind(e,()=>JSON.stringify([[i.X(),i.Y()],[t.X()-i.X(),t.Y()-i.Y()]]),e=>{e=JSON.parse(e);pointdeserializerparsed(i,e[0]),e[1][0]=e[1][0]+e[0][0],e[1][1]=e[1][1]+e[0][1],pointdeserializerparsed(t,e[1])},[i,t])},bind_point_direction:function(e,r,n){this.custom_bind(e,()=>JSON.stringify([[r.X(),r.Y()],[Math.atan2(n.Y()-r.Y(),n.X()-r.X()),Math.sqrt((n.X()-r.X())*(n.X()-r.X())+(n.Y()-r.Y())*(n.Y()-r.Y()))]]),e=>{var e=JSON.parse(e),i=(pointdeserializerparsed(r,e[0]),e[1][0]),t=e[1][1];e[1][0]=e[0][0]+t*Math.cos(i),e[1][1]=e[0][1]+t*Math.sin(i),pointdeserializerparsed(n,e[1])},[r,n])},bind_slider:function(e,i){this.custom_bind(e,()=>sliderserializer(i),e=>sliderdeserializer(i,e),[i])},bind_list_of:function(e,n){this.custom_bind(e,()=>{for(var e="[",i=0;i<n.length;i++)var t=n[i],e="slider"===t.getType()?e+JSON.stringify(t.Value())+",":e+pointserializer(t)+",";return(e=e.substring(0,e.length-1))+"]"},e=>{for(var i=JSON.parse(e),t=0;t<n.length&&t<i.length;t++){var r=n[t];"slider"===r.getType()?r.setValue(i[t]):pointdeserializerparsed(r,i[t])}},n)}};export default stack_jxg;export{stack_jxg};
+"use strict";var serializers={};var deserializers={};var initials={};var objectgroups=[];var objectinput={};var registeredobjects={};var active=false;function _commonsetup(inputname){if(!(inputname in serializers)){serializers[inputname]={};deserializers[inputname]=[];var input=document.getElementById(inputname);input.addEventListener("input",()=>generalinputupdatehandler(inputname));input.addEventListener("change",()=>generalinputupdatehandler(inputname))}}function registerobject(object){if(!(object.id in registeredobjects)){object.board.on("update",()=>generalobjectupdatehandlerid(object.id));registeredobjects[object.id]=object}}function pointserializer(point){return JSON.stringify([point.X(),point.Y()])}function pointdeserializer(point,data){try{var tmp=JSON.parse(data);if(typeof tmp[0]=="number"&&typeof tmp[1]=="number"){point.setPosition(JXG.COORDS_BY_USER,tmp);point.board.update();point.update()}}catch(err){}}function pointdeserializerparsed(point,data){try{if(typeof data[0]=="number"&&typeof data[1]=="number"){point.setPosition(JXG.COORDS_BY_USER,data);point.board.update();point.update()}}catch(err){}}function sliderserializer(slider){return JSON.stringify(slider.Value())}function sliderdeserializer(slider,data){try{slider.setValue(JSON.parse(data));slider.board.update();slider.update()}catch(err){}}function generalobjectupdatehandler(object){generalobjectupdatehandlerid(object.id)}function generalobjectupdatehandlerid(id){if(!active){active=true;try{var handledinputs=[];if(id in objectinput){for(var i=0;i<objectinput[id].length;i++){var inputname=objectinput[id][i];if(handledinputs.indexOf(inputname)===-1){handledinputs.push(inputname);var input=document.getElementById(inputname);var val=serializers[inputname][id]();if(val!==initials[inputname]){initials[inputname]=null;input.value=val}else{active=false;return}}}}for(var gi=0;gi<objectgroups.length;gi++){var group=objectgroups[gi];if(group.indexOf(id)!==-1){for(var gt=0;gt<group.length;gt++){var obj=group[gt];if(obj!==id){if(obj in objectinput){for(var i=0;i<objectinput[obj].length;i++){var inputname=objectinput[obj][i];if(handledinputs.indexOf(inputname)===-1){initials[inputname]=null;handledinputs.push(inputname);var input=document.getElementById(inputname);input.value=serializers[inputname][obj]()}}}}}}}for(var i=0;i<handledinputs.length;i++){var input=document.getElementById(handledinputs[i]);var e=new Event("change");input.dispatchEvent(e)}}catch(err){}active=false}}function generalinputupdatehandler(inputname){if(inputname in deserializers){var input=document.getElementById(inputname);var keys=Object.keys(serializers[inputname]);var ok=false;for(var i=0;i<keys.length;i++){var old=serializers[inputname][keys[i]]();if(old!==input.value){ok=true;i=keys.length+1}}if(ok){for(var i=0;i<deserializers[inputname].length;i++){deserializers[inputname][i](input.value)}}}}export const stack_jxg={define_group:function(list){var l=[];for(var i=0;i<list.length;i++){if(l.indexOf(list[i].id)===-1){l.push(list[i].id)}}objectgroups.push(l)},starts_moved:function(obj){if(obj.id in objectinput){for(var i=0;i<objectinput[obj.id].length;i++){initials[objectinput[obj.id][i]]=null}generalobjectupdatehandler(obj)}},custom_bind:function(input,serializer,deserializer,objects){_commonsetup(input);initials[input]=serializer();var theInput=document.getElementById(input);if(theInput.value&&theInput.value!=""){deserializer(theInput.value)}deserializers[input].push(deserializer);for(var i=0;i<objects.length;i++){this.register_object(input,objects[i],serializer)}},register_object:function(input,object,serializer){if(object.id in objectinput){if(!(input in objectinput[object.id])){objectinput[object.id].push(input)}}else{objectinput[object.id]=[input]}if(!(input in serializers)){_commonsetup(input)}serializers[input][object.id]=serializer;registerobject(object)},bind_point:function(inputRef,point){var serializer=()=>pointserializer(point);var deserializer=value=>pointdeserializer(point,value);this.custom_bind(inputRef,serializer,deserializer,[point])},bind_point_dual:function(inputRef,p1,p2){var serializer=()=>{return JSON.stringify([[p1.X(),p1.Y()],[p2.X(),p2.Y()]])};var deserializer=value=>{var tmp=JSON.parse(value);pointdeserializerparsed(p1,tmp[0]);pointdeserializerparsed(p2,tmp[1])};this.custom_bind(inputRef,serializer,deserializer,[p1,p2])},bind_point_relative:function(inputRef,p1,p2){var serializer=()=>{return JSON.stringify([[p1.X(),p1.Y()],[p2.X()-p1.X(),p2.Y()-p1.Y()]])};var deserializer=value=>{var tmp=JSON.parse(value);pointdeserializerparsed(p1,tmp[0]);tmp[1][0]=tmp[1][0]+tmp[0][0];tmp[1][1]=tmp[1][1]+tmp[0][1];pointdeserializerparsed(p2,tmp[1])};this.custom_bind(inputRef,serializer,deserializer,[p1,p2])},bind_point_direction:function(inputRef,p1,p2){var serializer=()=>{return JSON.stringify([[p1.X(),p1.Y()],[Math.atan2(p2.Y()-p1.Y(),p2.X()-p1.X()),Math.sqrt((p2.X()-p1.X())*(p2.X()-p1.X())+(p2.Y()-p1.Y())*(p2.Y()-p1.Y()))]])};var deserializer=value=>{var tmp=JSON.parse(value);pointdeserializerparsed(p1,tmp[0]);var angle=tmp[1][0];var len=tmp[1][1];tmp[1][0]=tmp[0][0]+len*Math.cos(angle);tmp[1][1]=tmp[0][1]+len*Math.sin(angle);pointdeserializerparsed(p2,tmp[1])};this.custom_bind(inputRef,serializer,deserializer,[p1,p2])},bind_slider:function(inputRef,slider){var serializer=()=>sliderserializer(slider);var deserializer=value=>sliderdeserializer(slider,value);this.custom_bind(inputRef,serializer,deserializer,[slider])},bind_list_of:function(inputRef,list_of_objects){var serializer=()=>{var r="[";for(var i=0;i<list_of_objects.length;i++){var obj=list_of_objects[i];if(obj.getType()==="slider"){r=r+JSON.stringify(obj.Value())+","}else{r=r+pointserializer(obj)+","}}r=r.substring(0,r.length-1);return r+"]"};var deserializer=value=>{var tmp=JSON.parse(value);for(var i=0;i<list_of_objects.length&&i<tmp.length;i++){var obj=list_of_objects[i];if(obj.getType()==="slider"){obj.setValue(tmp[i])}else{pointdeserializerparsed(obj,tmp[i])}}};this.custom_bind(inputRef,serializer,deserializer,list_of_objects)}};export default stack_jxg;
diff --git a/doc/en/Authoring/Advanced_JSXGraph.md b/doc/en/Authoring/Advanced_JSXGraph.md
new file mode 100644
index 00000000000..d80b983d572
--- /dev/null
+++ b/doc/en/Authoring/Advanced_JSXGraph.md
@@ -0,0 +1,349 @@
+# Advanced JSXGraph: `stack_jxg.custom_bind`
+
+As stated in the general [JSXGraph-block docs](JSXGraph.md#manual_binding) binding together 
+STACK inputs and the state of the graph consists of three important things:
+
+ 1. We need to turn the state we wish to store into a string when it needs to be stored.
+ 2. We need to be able to restore the state from a string when need be, typically on page
+    load or during two-way binding style usage.
+ 3. We need to know when those things need to happen, i.e. what interractions with the graph
+    trigger the first point and when to trigger the second.
+
+As this is almost always the same for all bindings the `stack_jxg` library provides a general
+function called `custom_bind` which when given four things will ensure that those things
+happen at the correct times. The arguments of that function are as follows:
+
+ 1. Reference to the input that will be used to store the value and which will be watched
+    for external changes, i.e. for two-way binding and for the initial value.
+ 2. A serialiser-function, something that when called will generate a string representation
+    of the relevant state of the graph. It will be called without any arguments, and will most
+    likely not be a generally useful function.
+ 3. A deserialiser-function, something that will modify the state of the graph to match
+    the string given to the function. Again this is probably not a generally useful function.
+ 4. A list of JSXGraph elements, points etc. that when updated should trigger serialisation.
+    Note that this might be a static value during the time of the call of the `custom_bind`
+    function but one can extend this list later, as we will see in an example soon. Also note
+    that if your state is not directly tied to objects that the user interracts with you may
+    use a hidden point here and simply trigger `"update"`-events for that point.
+
+Basically, if you can turn the state into a string and back and know the objects you should
+be able to construct any binding you want.
+
+## Some special notes
+
+There are things that may not be obvious, here are some that are worth noting:
+
+ 1. The serialisation string may contain much more than is necessary to restore the state
+    during deserialisation. For example, if the state is defined by the position of points
+    that is enough to restore it, but the serialisation could still contain various angles
+    or other helpful details in addition to those points so that you do not need to calculate
+    them in Maxima.
+ 2. The countter point to that is that you should never trust anything coming from
+    the browser and nothing grading related should be calculated in the browser. However,
+    it is pretty rare to see a student modifying the serialised state stored in the input
+    so that it would contain wrong grading details, so do what feels natural. What is likely
+    though is for the student to read the code that generates those grading related details
+    and if it for example generates boolean values the student may get some hints on what is
+    required from the code.
+
+
+## A complicated example
+
+Lets construct a custom binding that demonstrates some advanced concepts. For an example lets
+build a graph construction tool where one can create nodes (i.e. points) and connect and
+disconnect edges (line segments) between them. We will additionally want to store all of this
+state into a singular input field, thus mixing two very different things in the same input.
+The tricky bit here will be the fact that the sets of edges and nodes will not be statically
+sized and thus the deserialiser-logic will need to be able to recreate and destroy objects if
+the numbers of default configuration objects and stored state objects do not match.
+
+Our objective is to generate the following style of a JSON string, for use on the Maxima side:
+```
+{
+	"nodes": [
+		[1.0,2.0],
+		[0.0,2.0],
+		[1.0,1.0]
+	],
+	"edges": [
+		[1,2],
+		[1,3],
+		[2,3]
+	]
+}
+```
+The graph will not be directed and we will sort the edge listing for ease of use. We will also use
+1-based indexing in the edge listing, and do some padding to keep our JavaScript side indexing of
+points 1-based as well.
+
+For user interface we will use a logic where dragging nodes into a particular area will 
+connect/disconnect them from other nodes within that area. There will also be an area from which
+one can drag new nodes out of or into which one can drop extra nodes for destruction.
+
+Here is the whole code, the comments will include numbering and some parts will have extra details
+after the code.
+
+```
+[[jsxgraph input-ref-ans1="state"]]
+/* A perfectly normal board. */
+const board = JXG.JSXGraph.initBoard(divid, {boundingbox: [-10, 10, 10, -10]});
+
+/* With some circles representing the UI. */
+const source = board.create('circle',[board.create('point',[-8,-8],{visible: false}),1.5], {  strokeColor:'black',frozen:true, fixed:true, method:'pointRadius',hasInnerPoints:true, label:'Add/remove nodes'});
+const connector = board.create('circle',[board.create('point',[-4,-8],{visible: false}),1.5], {  strokeColor:'black',frozen:true, fixed:true, method:'pointRadius',hasInnerPoints:true, label:'Connect nodes'});
+const disconnector = board.create('circle',[board.create('point',[0,-8],{visible: false}),1.5], {  strokeColor:'black',frozen:true, fixed:true, method:'pointRadius',hasInnerPoints:true, label:'Disconnect nodes'});
+
+/* These represent the graph state. */
+let nodes = [board.create('point',[0,0], {visible:false})]; /* hidden point as a padding, so that we start indexing nodes from 1. */
+let edges = {}; /* A map from node to map of node to linesegment
+
+/* A convenience function for finding a node by id. */
+function get_node_index(id) {
+	return nodes.findIndex((node) => node !== null && node.id == id);
+}
+
+/* Common UI-logic bits. */
+function is_node_within(node, circle) {
+	return JXG.Math.Geometry.distance([node.X(),node.Y()],[circle.center.X(),circle.center.Y()]) < circle.Radius();
+}
+
+function get_nodes_within(circle) {
+	return nodes.filter((node) => node !== null && is_node_within(node, circle));
+}
+
+
+/* 1. The serialiser function. */
+const serialiser = () => {
+	let R = {'nodes': [], 'edges': []};
+	for (let i = 1; i < nodes.length; i++) {
+		R.nodes.push([nodes[i].X(), nodes[i].Y()]);
+	}
+	
+	for (const [from, others] of Object.entries(edges)) {
+		for (const [to, edge] of Object.entries(others)) {
+		  	R.edges.push([get_node_index(from), get_node_index(to)]);
+		}
+	}
+	/* Sort that list, for the Maxima side use. */
+	R.edges.sort((a,b) => {
+		let c = a[0] - b[0];
+		if (c === 0) {
+			c = a[1] - b[1];
+		}
+		return c;
+		});
+
+	return JSON.stringify(R);
+};
+
+/* Before the deserialiser we really need to have the tools for manipulation of
+   the state. The deserialiser may create or delete nodes and edges, and we will
+   be doing that elsewhere as well.
+
+   So here are some basic functions.
+*/
+function create_edge(pointA, pointB) {
+	/* This one uses JSXGraph point objects. */
+	/* For consistency we always draw the edges from the node earlier in the node list. */
+	let lowerIndex = get_node_index(pointA.id) < get_node_index(pointB.id) ? pointA : pointB;
+	let higherIndex = lowerIndex === pointA ? pointB : pointA;
+
+	if (!(lowerIndex.id in edges)) {
+		edges[lowerIndex.id] = {};
+	}
+	if (higherIndex.id in (edges[lowerIndex.id])) {
+		/* That edge already exists do not recreate. */
+		return;
+	}
+	/* Create the segment and update the books... */
+	/* Note to keep UI logic easy we disable dragging by the edge. If you want
+	   to use this UI logic you would need an `up`-handler also for edges. */
+	let edge = board.create('segment', [lowerIndex, higherIndex], {fixed: true});
+	edges[lowerIndex.id][higherIndex.id] = edge;
+
+	/* Ensure update. The edge was added after any points last moved. */
+	pointA.trigger(['update']);
+}
+
+function delete_edge(pointA, pointB) {
+	/* This one uses JSXGraph point objects. */
+	/* For consistency we always draw the edges from the node earlier in the node list. */
+	let lowerIndex = get_node_index(pointA.id) < get_node_index(pointB.id) ? pointA : pointB;
+	let higherIndex = lowerIndex === pointA ? pointB : pointA;	
+
+	if (!(lowerIndex.id in edges)) {
+		/* No such edge. */
+		return;
+	}
+	if (higherIndex.id in (edges[lowerIndex.id])) {
+		/* Remove the edge from the board. */
+		board.removeObject(edges[lowerIndex.id][higherIndex.id]);
+		/* And from the books. */
+		delete edges[lowerIndex.id][higherIndex.id];
+	}
+
+	/* Ensure update. Don't use the ends, they might not exist. */
+	nodes[0].trigger(['update']);
+}
+
+function delete_node(point) {
+	const i = get_node_index(point.id);
+	if (i === -1) {
+		return; /* Should not happen */
+	}
+	
+	/* Delete edges starting from this node. */
+	if (point.id in edges) {
+		for (const [to, edge] of Object.entries(edges[point.id])) {
+			board.removeObject(edge);  	
+		}
+		delete edges[point.id];
+	}
+
+	/* Delete edges ending to this node. */
+	for (const [from, others] of Object.entries(edges)) {
+		for (const [to, edge] of Object.entries(others)) {
+			if (to === point.id) {
+				board.removeObject(edge);
+				delete edges[from][to];
+			}
+		}
+	}
+
+	/* Remove from board. */
+	board.removeObject(point);
+	delete nodes[i];
+
+	/* Ensure update. Note that might have been the last bound node we just removed. */
+	nodes[0].trigger(['update']);
+}
+
+function create_node(x,y) {
+	var node = board.create('point',[x,y],{name:''});
+	/* We need to add some UI logic to this node. */
+	node.on('up', () => {
+		if (is_node_within(node, source)) {
+			/* Returned to source, delete it. */
+			delete_node(node);
+		} else if (is_node_within(node, connector)) {
+			/* In the connector area, connect to all others in the area. */
+			for (let n of get_nodes_within(connector)) {
+				if (n !== node) {
+					create_edge(n, node);
+				}
+			}
+		}  else if (is_node_within(node, disconnector)) {
+			/* In the disconnector area, disconnect from all others in the area. */
+			for (let n of get_nodes_within(disconnector)) {
+				if (n !== node) {
+					delete_edge(n, node);
+				}
+			}
+		}
+	});
+	nodes.push(node);
+	/* 2. As this is a new node that we need to track in the binding we need to register it. */
+	stack_jxg.register_object(state, node, serialiser);
+
+	/* Ensure update. Also trigger the up-handler. */
+	node.trigger(['up', 'update']);
+}
+
+/* 3. The deserialiser, i.e. the hard part when we can create elements. */
+const deserialiser = (value) => {
+	let newState = JSON.parse(value);
+
+	/* First sync the nodes. That null padding is the reason for the +1. */
+	while (newState.nodes.length + 1 < nodes.length) {
+		/* We have extra nodes present in the current state, delete them. */
+		delete_node(nodes[nodes.length - 1]);
+	}
+	for (let i = 0; i < newState.nodes.length; i++) {
+		if (i+1 < nodes.length) {
+			/* Reposition existing node. */
+			nodes[i+1].setPosition(JXG.COORDS_BY_USER, newState.nodes[i]);
+		} else {
+			/* Create new node. */
+			create_node(newState.nodes[i][0], newState.nodes[i][1]);
+		}
+	}
+
+	/* Then the edges. We basically need to check each existing for deletion
+	   and each new for creation. The easy way to get the list of edges in
+	   the same format is to get it through the `serialiser`. */
+	const newEdges = newState.edges;
+	const oldEdges = JSON.parse(serialiser()).edges;
+	for (let edge of oldEdges) {
+		if (newEdges.indexOf(edge) < 0) {
+			delete_edge(nodes[edge[0]], nodes[edge[1]]);
+		}
+	}
+	for (let edge of newEdges) {
+		if (oldEdges.indexOf(edge) < 0) {
+			create_edge(nodes[edge[0]], nodes[edge[1]]);
+		}	
+	}
+	board.update();
+};
+
+/* Then lets add a magical point for creating new nodes. If one drags it outside 
+   the circle it will create a new node at that place before returning back. */
+const magicPoint = board.create('point', [source.center.X(), source.center.Y()], {name: 'Place me to create a new node.', size: 0.2, sizeUnit: 'user'});
+magicPoint.on('up', () => {
+	if (!is_node_within(magicPoint, source)) {
+		create_node(magicPoint.X(), magicPoint.Y());
+	}
+	/* Always return to the source. */
+	magicPoint.setPosition(JXG.COORDS_BY_USER, [source.center.X(), source.center.Y()]);
+	board.update();
+});
+
+/* 4. In the end lets create the default state, like with all the binding functions
+   we must call the function after the default has been set. */
+create_node(1.0,2.0);
+create_node(0.0,2.0);
+create_node(1.0,1.0);
+create_edge(nodes[1], nodes[2]);
+create_edge(nodes[1], nodes[3]);
+create_edge(nodes[2], nodes[3]);
+
+/* 5. Now in our example the `create_node`-function already registered those points for binding.
+   so the only object we give it is the padding point that we also use as a handle for triggering
+   sync if all other elements have been eliminated. */
+stack_jxg.custom_bind(state, serialiser, deserialiser, [nodes[0]]);
+
+/* After that many changes it may make sense to call board update... */
+board.update();
+[[/jsxgraph]]
+```
+
+
+### Specific comments
+
+At 1. the serialiser is rather simple, if yours is not consider whether the way represent your
+state is clear enough. Typically, well constructed state is easy to serialise.
+
+At 2. the key thing to note is that when we create new elements that need to be bound we need
+to register them, unregistering is not possible and one should probably not care about that, as
+extra registered items, while taking room and time during evaluation of logic are not that
+common and will be dropped during page refresh. Typically, users do not do so many actions that
+the lag would be noticeable.
+
+At 3. like serialisers deserialisers are simpler if the state is formulated suitably. Here we
+can often use the serialiser-function to our advantage when comparing the current state and
+incoming state and then do the minimal set of updates. Alternatively, simply throwing
+everything away and rebuilding from scratch is a valid tactic, maybe not efficient but this is
+a place where premature optimisation is often pointless.
+
+At 4. always do the default state building before binding anything, as the binding function call
+will at that moment read the current value from the input and if it find something from there it
+will deserialise it on top of the current state.
+
+At 5. Do note the use of that extra point that is hidden. It has two uses, first the padding in
+the list to help with mapping indices so that they work better in Maxima. But the more important
+bit is the use as a handle to the binding-logic. In this code we often build extra state, i.e.,
+those edges after the serialisation has already dealt with the movement of points and we thus
+need to trigger an update for these elements that have not been bound. It is also the backup for
+a situation where all nodes get removed, in that situation the removal of tha last node would
+basically be impossible to update to the input as the node would no longer be there to notify
+about its own demise.
diff --git a/doc/en/Authoring/JSXGraph.md b/doc/en/Authoring/JSXGraph.md
index 6bb6c4edf67..fa0536ecb4a 100644
--- a/doc/en/Authoring/JSXGraph.md
+++ b/doc/en/Authoring/JSXGraph.md
@@ -88,7 +88,7 @@ In this example we provide a simple slider.  Notice in this example we use the J
       board.unsuspendUpdate();
     [[/jsxgraph]]
 
-## General considerations when building interactive graphs
+## General considerations when building interactive graphs {#manual_binding}
 
 In general you should pay attention on how your graph reacts to the student returning to the page/question later. For example, will your graph 
 reset to display the original situation or will it at least move all movable things to the positions the student last left them? If