johnformio · johnformio · Jun 4, 2026
diff --git a/.gitignore b/.gitignore
@@ -13,3 +13,6 @@ bower_components
 .ruby-version
 .ruby-gemset
 /.vs
+coverage/
+.nyc_output
+resources/latest.json
diff --git a/.nyc_output/0cbb1b9c-be20-4143-b7e3-e12e201b46c1.json b/.nyc_output/0cbb1b9c-be20-4143-b7e3-e12e201b46c1.json
diff --git a/.nyc_output/59b65179-e54a-4977-a0fe-95c317a48e17.json b/.nyc_output/59b65179-e54a-4977-a0fe-95c317a48e17.json
diff --git a/.nyc_output/668790e7-6ada-46c0-a3c5-50f255c5e21f.json b/.nyc_output/668790e7-6ada-46c0-a3c5-50f255c5e21f.json
diff --git a/.nyc_output/6c31f843-3f2e-418f-89fc-0658c1c1880b.json b/.nyc_output/6c31f843-3f2e-418f-89fc-0658c1c1880b.json
diff --git a/.nyc_output/7887e92f-e9d4-4ca1-a4ac-476833a0aa04.json b/.nyc_output/7887e92f-e9d4-4ca1-a4ac-476833a0aa04.json
diff --git a/.nyc_output/8e8bfffa-18f0-4014-bb01-df78c8200d80.json b/.nyc_output/8e8bfffa-18f0-4014-bb01-df78c8200d80.json
diff --git a/.nyc_output/processinfo/0cbb1b9c-be20-4143-b7e3-e12e201b46c1.json b/.nyc_output/processinfo/0cbb1b9c-be20-4143-b7e3-e12e201b46c1.json
diff --git a/.nyc_output/processinfo/59b65179-e54a-4977-a0fe-95c317a48e17.json b/.nyc_output/processinfo/59b65179-e54a-4977-a0fe-95c317a48e17.json
diff --git a/.nyc_output/processinfo/668790e7-6ada-46c0-a3c5-50f255c5e21f.json b/.nyc_output/processinfo/668790e7-6ada-46c0-a3c5-50f255c5e21f.json
diff --git a/.nyc_output/processinfo/6c31f843-3f2e-418f-89fc-0658c1c1880b.json b/.nyc_output/processinfo/6c31f843-3f2e-418f-89fc-0658c1c1880b.json
diff --git a/.nyc_output/processinfo/7887e92f-e9d4-4ca1-a4ac-476833a0aa04.json b/.nyc_output/processinfo/7887e92f-e9d4-4ca1-a4ac-476833a0aa04.json
diff --git a/.nyc_output/processinfo/8e8bfffa-18f0-4014-bb01-df78c8200d80.json b/.nyc_output/processinfo/8e8bfffa-18f0-4014-bb01-df78c8200d80.json
diff --git a/.nyc_output/processinfo/8f830a89-9b25-4bcc-ad58-e34f8aef2fd1.json b/.nyc_output/processinfo/8f830a89-9b25-4bcc-ad58-e34f8aef2fd1.json
diff --git a/.nyc_output/processinfo/e3699686-f5ce-435e-adbe-641c3dce2112.json b/.nyc_output/processinfo/e3699686-f5ce-435e-adbe-641c3dce2112.json
diff --git a/.nyc_output/processinfo/index.json b/.nyc_output/processinfo/index.json
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/_layouts/default.md b/_layouts/default.md
@@ -53,6 +53,7 @@
   {% endif %}
 </head>
 <body>
+<a href="https://github.com/formio/formio.js"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:3000;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
 <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4 p-0">
   <div class="container">
     <a class="navbar-brand p-0" href="#">

diff --git a/app/examples/kitchen.md b/app/examples/kitchen.md
@@ -4,6 +4,7 @@ layout: vtabs
 section: examples
 weight: 400
 ---
+
 Here is a large form which includes all fields with many different configurations (the kitchen sink).
 
 <div class="card card-body bg-light">

diff --git a/app/examples/language.md b/app/examples/language.md
@@ -4,12 +4,16 @@ layout: vtabs
 section: examples
 weight: 301
 ---
+
 With Form.io, you can provide multiple languages for the forms that are rendered within your application. This
 is done like the following.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
+/>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
 <script src="https://cdn.form.io/js/formio.embed.js"></script>
 <div class="btn-group">
   <button type="button" class="btn btn-primary" onclick="setLanguage('sp')">Español</button>
@@ -241,4 +245,3 @@ Formio.createForm(document.getElementById('formio'), {
 </div>
 </div>
 </div>
-
diff --git a/app/examples/lazyloading.md b/app/examples/lazyloading.md
@@ -5,13 +5,14 @@ section: examples
 noFormio: true
 weight: 31
 ---
-Using the formio.embed.js file, you can also lazy load the Javascript and CSS resources required for creating a form. This allows you to embed a form within your application without adding much size to the page load, and then once the page is loaded, a loader is shown where the form will be rendered while it is downloading the renderer resources needed to render the form. You can still use the ```Formio.createForm``` method, just like you do for the "formio.form.min.js" file, but instead you would just include the formio.embed.js file which will lazy load the form into place.
+
+Using the formio.embed.js file, you can also lazy load the Javascript and CSS resources required for creating a form. This allows you to embed a form within your application without adding much size to the page load, and then once the page is loaded, a loader is shown where the form will be rendered while it is downloading the renderer resources needed to render the form. You can still use the `Formio.createForm` method, just like you do for the "formio.form.min.js" file, but instead you would just include the formio.embed.js file which will lazy load the form into place.
 
 ```html
 <script src="https://cdn.form.io/js/formio.embed.js"></script>
 <div id="formio"></div>
 <script type="text/javascript">
-    Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');
+  Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');
 </script>
 ```
 

diff --git a/app/examples/material.md b/app/examples/material.md
@@ -6,11 +6,18 @@ weight: 100
 template: materia
 disabled: true
 ---
+
 You can combine these forms with the amazing [Bootswatch](https://bootswatch.com) templating system to create amazing looking forms. Check out this one which uses the Materia design.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch/dist/materia/bootstrap.min.css">
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
+/>
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/bootswatch/dist/materia/bootstrap.min.css"
+/>
 <script src="https://cdn.form.io/js/formio.embed.js?src=https://examples.form.io/example"></script>
 ```
 

diff --git a/app/examples/noeval.md b/app/examples/noeval.md
@@ -4,12 +4,13 @@ layout: vtabs
 section: examples
 weight: 221
 ---
+
 By default, this renderer allows the compilation and execution of JavaScript (eval) through the following features.
- 
- - Custom Conditionals
- - Custom Validation
- - Custom Templates (like with EditGrid)
- 
+
+- Custom Conditionals
+- Custom Validation
+- Custom Templates (like with EditGrid)
+
 For some implementations, the need to turn off "eval" is a requirement. This can be done, at the expense of the features outlined above, using the following code.
 
 ```js
@@ -22,93 +23,93 @@ This will force the builder to not show the configurations for these elements as
 FormioUtils.Evaluator.noeval = true;
 Formio.createForm(document.getElementById('formio'), {
   components: [
-      {
-        label: 'Children',
-        key: 'children',
-        type: 'editgrid',
-        input: true,
-        components: [
-          {
-            label: 'First Name',
-            key: 'firstName',
-            type: 'textfield',
-            input: true
+    {
+      label: 'Children',
+      key: 'children',
+      type: 'editgrid',
+      input: true,
+      components: [
+        {
+          label: 'First Name',
+          key: 'firstName',
+          type: 'textfield',
+          input: true,
+        },
+        {
+          label: 'Last Name',
+          key: 'lastName',
+          type: 'textfield',
+          input: true,
+        },
+        {
+          label: 'Gender',
+          key: 'gender',
+          type: 'select',
+          input: true,
+          data: {
+            values: [
+              {
+                value: 'male',
+                label: 'Male',
+              },
+              {
+                value: 'female',
+                label: 'Female',
+              },
+              {
+                value: 'other',
+                label: 'Other',
+              },
+            ],
           },
-          {
-            label: 'Last Name',
-            key: 'lastName',
-            type: 'textfield',
-            input: true
+          dataSrc: 'values',
+          template: '<span>{% raw %}{{ item.label }}{% endraw %}</span>',
+        },
+        {
+          type: 'checkbox',
+          label: 'Dependant',
+          key: 'dependant',
+          inputType: 'checkbox',
+          input: true,
+        },
+        {
+          label: 'Birthdate',
+          key: 'birthdate',
+          type: 'datetime',
+          input: true,
+          format: 'yyyy-MM-dd hh:mm a',
+          enableDate: true,
+          enableTime: true,
+          defaultDate: '',
+          datepickerMode: 'day',
+          datePicker: {
+            showWeeks: true,
+            startingDay: 0,
+            initDate: '',
+            minMode: 'day',
+            maxMode: 'year',
+            yearRows: 4,
+            yearColumns: 5,
+            datepickerMode: 'day',
           },
-          {
-            label: 'Gender',
-            key: 'gender',
-            type: 'select',
-            input: true,
-            data: {
-              values: [
-                {
-                  value: 'male',
-                  label: 'Male'
-                },
-                {
-                  value: 'female',
-                  label: 'Female'
-                },
-                {
-                  value: 'other',
-                  label: 'Other'
-                }
-              ]
-            },
-            dataSrc: 'values',
-            template: '<span>{% raw %}{{ item.label }}{% endraw %}</span>'
+          timePicker: {
+            hourStep: 1,
+            minuteStep: 1,
+            showMeridian: true,
+            readonlyInput: false,
+            mousewheel: true,
+            arrowkeys: true,
           },
-          {
-            type: 'checkbox',
-            label: 'Dependant',
-            key: 'dependant',
-            inputType: 'checkbox',
-            input: true
+          conditional: {
+            eq: 'true',
+            when: 'dependant',
+            show: 'true',
           },
-          {
-            label: 'Birthdate',
-            key: 'birthdate',
-            type: 'datetime',
-            input: true,
-            format: 'yyyy-MM-dd hh:mm a',
-            enableDate: true,
-            enableTime: true,
-            defaultDate: '',
-            datepickerMode: 'day',
-            datePicker: {
-              showWeeks: true,
-              startingDay: 0,
-              initDate: '',
-              minMode: 'day',
-              maxMode: 'year',
-              yearRows: 4,
-              yearColumns: 5,
-              datepickerMode: 'day'
-            },
-            timePicker: {
-              hourStep: 1,
-              minuteStep: 1,
-              showMeridian: true,
-              readonlyInput: false,
-              mousewheel: true,
-              arrowkeys: true
-            },
-            "conditional": {
-              "eq": "true",
-              "when": "dependant",
-              "show": "true"
-            }
-          }
-        ]
-      }
-    ]
-}).then(function(form) {
+        },
+      ],
+    },
+  ],
+}).then(function (form) {
   // Provide a default submission.
   form.submission = {
     data: {
@@ -118,20 +119,20 @@ Formio.createForm(document.getElementById('formio'), {
           lastName: 'Smith',
           gender: 'male',
           dependant: true,
-          birthdate: '1982-05-18'
+          birthdate: '1982-05-18',
         },
         {
           firstName: 'Mary',
           lastName: 'Smith',
           gender: 'female',
           dependant: false,
-          birthdate: '1979-02-17'
-        }
-      ]
-    }
+          birthdate: '1979-02-17',
+        },
+      ],
+    },
   };
 });
-````
+```
 
 <h3>Result</h3>
 <div class='card card-body bg-light'>

diff --git a/app/examples/pdf.md b/app/examples/pdf.md
@@ -4,14 +4,15 @@ layout: vtabs
 section: examples
 weight: 18
 ---
+
 ```html
 <script src="https://cdn.form.io/js/formio.embed.js"></script>
 <div id="formio"></div>
 ```
 
 ```js
 Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/w4', {
-  zoom: '-20'
+  zoom: '-20',
 });
 ```