Fix issues in readme examples.

README.md

@@ -4,9 +4,16 @@ This is a collection of libraries that make working with JavaScript and data.
 
 Each component is available in it's own file, and example/default stylesheets are available in separate files.
 
-## date.js
+## Installing
 
-**WORK IN PROGRESS!**
+For now, clone this somewhere and copy the files to your project. Hopefully [Symfony Issue #53999](https://github.com/symfony/symfony/issues/53999) will be completed soon, in which case you will hopefully be able to import JSL using the AssetMapper CLI commands.
+
+## Components
+
+### date.js
+
+> [!WARNING]
+> **WORK IN PROGRESS! MOSTLY NOT WORKING!**
 
 This component makes working with dates less of a pain.
 
@@ -31,7 +38,7 @@ const custom = date("2025-09-01 15:00:42 +02:00");
 let ts = now.format("Y-m-d H:i:s P");
 ```
 
-## dialog.js
+### dialog.js
 
 This component creates dialogs on the fly, and resolves a promise when the dialog is accepted.
 
@@ -60,9 +67,9 @@ dialog.msgbox("Ready!").then(
 dialog.select("Put in warehouse", "Select", { "none":"None", "1":"WH1", "2":"WH2" }).then(...)
 ```
 
-## dom.js
+### dom.js
 
-This file offers `dom` and `el` that can be used to manipulate the DOM.
+This component offers `dom` and `el` that can be used to manipulate the DOM.
 
 ```javascript
 import { dom, el } from "./dom.js";
@@ -83,7 +90,7 @@ dom.append(myDiv, [
 ]);
 ```
 
-## json.js
+### json.js
 
 This component contains tools to query and update data structures using simplified JSON paths.
 
@@ -109,7 +116,7 @@ jsonQuery(items, "[].name") // → [ "cheese", "wine" ]
 
 ```
 
-## jsonform.js
+### jsonform.js
 
 This component not only builds forms and allow you to map it against paths in a model dataset, but it also allows you to do inline editing of your data, with type mapping.
 
@@ -117,9 +124,9 @@ This component not only builds forms and allow you to map it against paths in a
 import { JsonForm, TextField } from "./jsonform.js";
 
 const productForm = new JsonForm();
-productForm.addRow()
-  .append(new TextField({ label:"Product name", path:".product.name", width:70 })
-  .append({ label:"Price", path:".price" });
+productForm.layout.addRow()
+  .append(new TextField({ label:"Product name", path:".product.name", width:70 }))
+  .append(new TextField({ label:"Price", path:".price" }));
 
 myTargetEl.appendChild(productForm.dom());
 
@@ -129,4 +136,11 @@ productForm.model = {
   },
   price: "9.99"
 };
+
+// make it possible to edit the form
+productForm.editable = true;
+
+// when the user is done editing set editable = false and access the updated model
+productForm.editable = false;
+const newModel = productForm.model; // → { product:{ name:"Swedish Fish" }, price:"8.99" }
 ```