FEAScript · nikoscham · Mar 12, 2026 · Mar 10, 2026
diff --git a/examples/creepingFlowScript/README.md b/examples/creepingFlowScript/README.md
@@ -11,7 +11,11 @@ This directory contains Node.js examples demonstrating how to use the FEAScript
 
 This example solves a 2D lid-driven cavity flow using the creeping flow solver with Taylor-Hood (Q2-Q1) elements. For detailed information on the model setup, refer to the corresponding [tutorial](https://feascript.com/tutorials/lid-driven-cavity-2d-creeping-flow.html) on the FEAScript website.
 
-## Running the Examples
+## HTML Examples
+
+Each example also includes an HTML variant (e.g., `lidDrivenCavity2DCreepingFlow.html`) that runs the same simulation in the browser with built-in visualization using Plotly.js. Simply open the HTML file in a web browser to run.
+
+## Running the Node.js Examples
 
 #### 1. Create package.json with ES module support:
 

diff --git a/examples/creepingFlowScript/lidDrivenCavity2DCreepingFlow/lidDrivenCavity2DCreepingFlow.html b/examples/creepingFlowScript/lidDrivenCavity2DCreepingFlow/lidDrivenCavity2DCreepingFlow.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+
+<!--
+  ════════════════════════════════════════════════════════════════
+   FEAScript Core Library
+   Lightweight Finite Element Simulation in JavaScript
+   Version: 0.2.0 | https://feascript.com
+   MIT License © 2023–2026 FEAScript
+  ════════════════════════════════════════════════════════════════
+-->
+
+<html>
+  <head>
+    <title>FEAScript Example: Lid-Driven Cavity 2D Creeping Flow</title>
+    <meta charset="UTF-8" />
+    <!-- Link to the CSS files -->
+    <link href="https://feascript.com/feascript-website.css" rel="stylesheet" type="text/css" />
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
+    <!-- Import the Math.js library for mathematical operations -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.12.0/math.min.js"></script>
+    <!-- Import the Plotly.js library for plotting -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.35.3/plotly.min.js"></script>
+  </head>
+
+  <body>
+    <h2>Lid-Driven Cavity 2D Creeping Flow</h2>
+
+    <h3>Velocity Magnitude</h3>
+    <div id="velocityMagnitudeCanvas"></div>
+
+    <h3>u-Velocity Component</h3>
+    <div id="uVelocityCanvas"></div>
+
+    <h3>v-Velocity Component</h3>
+    <div id="vVelocityCanvas"></div>
+
+    <script type="module">
+      // Import FEAScript library
+      import { FEAScriptModel, plotSolution, printVersion } from "https://core.feascript.com/dist/feascript.esm.js";
+      // import { FEAScriptModel, plotSolution, printVersion } from "../../../src/index.js";
+
+      window.addEventListener("DOMContentLoaded", () => {
+        console.log("FEAScript Version:", printVersion);
+
+        // Create a new FEAScript model
+        const model = new FEAScriptModel();
+
+        // Select physics/PDE
+        model.setModelConfig("creepingFlowScript");
+
+        // Define mesh configuration
+        model.setMeshConfig({
+          meshDimension: "2D",
+          elementOrder: "quadratic",
+          numElementsX: 12,
+          numElementsY: 6,
+          maxX: 4,
+          maxY: 2,
+        });
+
+        // Define boundary conditions
+        model.addBoundaryCondition("0", ["constantVelocity", 0, 0]); // Bottom boundary
+        model.addBoundaryCondition("1", ["constantVelocity", 0, 0]); // Left boundary
+        model.addBoundaryCondition("2", ["constantVelocity", 1, 0]); // Top boundary
+        model.addBoundaryCondition("3", ["constantVelocity", 0, 0]); // Right boundary
+
+        // Set solver method
+        model.setSolverMethod("lusolve");
+
+        // Solve the problem
+        const result = model.solve();
+
+        // Print results to console
+        console.log(`Number of nodes in mesh: ${result.nodesCoordinates.nodesXCoordinates.length}`);
+        console.log("Solution vector:", result.solutionVector);
+
+        // Extract velocity and pressure fields from the solution vector
+        // DOF layout: [u₀…u_{N₂−1}, v₀…v_{N₂−1}, p₀…p_{N₁−1}]
+        const totalNodesVelocity = model._creepingFlowMetadata.totalNodesVelocity;
+        const solutionVector = result.solutionVector;
+        const uVelocity = solutionVector.slice(0, totalNodesVelocity);
+        const vVelocity = solutionVector.slice(totalNodesVelocity, 2 * totalNodesVelocity);
+        const velocityMagnitude = uVelocity.map((u, i) => Math.sqrt(u * u + vVelocity[i] * vVelocity[i]));
+
+        // Plot velocity magnitude as a 2D contour plot
+        plotSolution(
+          model,
+          { solutionVector: velocityMagnitude, nodesCoordinates: result.nodesCoordinates },
+          "contour",
+          "velocityMagnitudeCanvas"
+        );
+
+        // Plot u-velocity component as a 2D contour plot
+        plotSolution(
+          model,
+          { solutionVector: uVelocity, nodesCoordinates: result.nodesCoordinates },
+          "contour",
+          "uVelocityCanvas"
+        );
+
+        // Plot v-velocity component as a 2D contour plot
+        plotSolution(
+          model,
+          { solutionVector: vVelocity, nodesCoordinates: result.nodesCoordinates },
+          "contour",
+          "vVelocityCanvas"
+        );
+      });
+    </script>
+  </body>
+</html>
diff --git a/examples/frontPropagationScript/README.md b/examples/frontPropagationScript/README.md
@@ -10,7 +10,11 @@ This directory contains Node.js examples demonstrating how to use the FEAScript
 
 This example demonstrates solving an eikonal equation in a 2D domain to track the movement of a solidification interface. For detailed information on the model setup, refer to the corresponding [tutorial](https://feascript.com/tutorials/solidification-front-2d.html) in the FEAScript website.
 
-## Running the Examples
+## HTML Examples
+
+Each example also includes an HTML variant (e.g., `solidificationFront2D.html`) that runs the same simulation in the browser with built-in visualization using Plotly.js. Simply open the HTML file in a web browser to run.
+
+## Running the Node.js Examples
 
 #### 1. Create package.json with ES module support:
 

diff --git a/examples/frontPropagationScript/solidificationFront2D/solidificationFront2D.html b/examples/frontPropagationScript/solidificationFront2D/solidificationFront2D.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+
+<!--
+  ════════════════════════════════════════════════════════════════
+   FEAScript Core Library
+   Lightweight Finite Element Simulation in JavaScript
+   Version: 0.2.0 | https://feascript.com
+   MIT License © 2023–2026 FEAScript
+  ════════════════════════════════════════════════════════════════
+-->
+
+<html>
+  <head>
+    <title>FEAScript Example: Solidification Front 2D</title>
+    <meta charset="UTF-8" />
+    <!-- Link to the CSS files -->
+    <link href="https://feascript.com/feascript-website.css" rel="stylesheet" type="text/css" />
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
+    <!-- Import the Math.js library for mathematical operations -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.12.0/math.min.js"></script>
+    <!-- Import the Plotly.js library for plotting -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.35.3/plotly.min.js"></script>
+  </head>
+
+  <body>
+    <h2>Solidification Front 2D</h2>
+
+    <!-- Container element where the solution plot will be rendered -->
+    <div id="resultsCanvas"></div>
+
+    <script type="module">
+      // Import FEAScript library
+      import { FEAScriptModel, plotSolution, printVersion } from "https://core.feascript.com/dist/feascript.esm.js";
+      // import { FEAScriptModel, plotSolution, printVersion } from "../../../src/index.js";
+
+      window.addEventListener("DOMContentLoaded", () => {
+        console.log("FEAScript Version:", printVersion);
+
+        // Create a new FEAScript model
+        const model = new FEAScriptModel();
+
+        // Select physics/PDE
+        model.setModelConfig("frontPropagationScript");
+
+        // Define mesh configuration
+        model.setMeshConfig({
+          meshDimension: "2D",
+          elementOrder: "quadratic",
+          numElementsX: 12,
+          numElementsY: 8,
+          maxX: 4,
+          maxY: 2,
+        });
+
+        // Define boundary conditions
+        model.addBoundaryCondition("0", ["constantValue", 0]); // Bottom boundary
+        model.addBoundaryCondition("1", ["constantValue", 0]); // Left boundary
+        model.addBoundaryCondition("2", ["zeroGradient"]); // Top boundary
+        model.addBoundaryCondition("3", ["constantValue", 0]); // Right boundary
+
+        // Set solver method
+        model.setSolverMethod("lusolve");
+
+        // Solve the problem
+        const result = model.solve();
+
+        // Print results to console
+        console.log(`Number of nodes in mesh: ${result.nodesCoordinates.nodesXCoordinates.length}`);
+        console.log("Solution vector:", result.solutionVector);
+
+        // Plot the solution as a 2D contour plot
+        plotSolution(model, result, "contour", "resultsCanvas");
+      });
+    </script>
+  </body>
+</html>
diff --git a/examples/generalFormPDEScript/README.md b/examples/generalFormPDEScript/README.md
@@ -10,7 +10,11 @@ This directory contains Node.js examples demonstrating how to use the FEAScript
 
 This example demonstrates solving a one-dimensional advection-diffusion problem with a Gaussian source term. The problem models the transport of a substance under the effects of both diffusion and advection. For detailed information on the model setup, refer to the corresponding [tutorial](https://feascript.com/tutorials/advection-diffusion-1d.html) in the FEAScript website.
 
-## Running the Examples
+## HTML Examples
+
+Each example also includes an HTML variant (e.g., `advectionDiffusion1D.html`) that runs the same simulation in the browser with built-in visualization using Plotly.js. Simply open the HTML file in a web browser to run.
+
+## Running the Node.js Examples
 
 #### 1. Create package.json with ES module support:
 

diff --git a/examples/generalFormPDEScript/advectionDiffusion1D/advectionDiffusion1D.html b/examples/generalFormPDEScript/advectionDiffusion1D/advectionDiffusion1D.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+
+<!--
+  ════════════════════════════════════════════════════════════════
+   FEAScript Core Library
+   Lightweight Finite Element Simulation in JavaScript
+   Version: 0.2.0 | https://feascript.com
+   MIT License © 2023–2026 FEAScript
+  ════════════════════════════════════════════════════════════════
+-->
+
+<html>
+  <head>
+    <title>FEAScript Example: Advection-Diffusion 1D</title>
+    <meta charset="UTF-8" />
+    <!-- Link to the CSS files -->
+    <link href="https://feascript.com/feascript-website.css" rel="stylesheet" type="text/css" />
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
+    <!-- Import the Math.js library for mathematical operations -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.12.0/math.min.js"></script>
+    <!-- Import the Plotly.js library for plotting -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.35.3/plotly.min.js"></script>
+  </head>
+
+  <body>
+    <h2>Advection-Diffusion 1D</h2>
+
+    <!-- Container element where the solution plot will be rendered -->
+    <div id="resultsCanvas"></div>
+
+    <script type="module">
+      // Import FEAScript library
+      import { FEAScriptModel, plotSolution, printVersion } from "https://core.feascript.com/dist/feascript.esm.js";
+      // import { FEAScriptModel, plotSolution, printVersion } from "../../../src/index.js";
+
+      window.addEventListener("DOMContentLoaded", () => {
+        console.log("FEAScript Version:", printVersion);
+
+        // Create a new FEAScript model
+        const model = new FEAScriptModel();
+
+        // Select physics/PDE
+        model.setModelConfig("generalFormPDEScript", {
+          coefficientFunctions: {
+            // Equation d²u/dx² - 10 du/dx = 10 * exp(-200 * (x - 0.5)²)
+            A: (x) => 1, // Diffusion coefficient
+            B: (x) => -10, // Advection coefficient
+            C: (x) => 0, // Reaction coefficient
+            D: (x) => 10 * Math.exp(-200 * Math.pow(x - 0.5, 2)), // Source term
+          },
+        });
+
+        // Define mesh configuration
+        model.setMeshConfig({
+          meshDimension: "1D",
+          elementOrder: "quadratic",
+          numElementsX: 20,
+          maxX: 1.0,
+        });
+
+        // Define boundary conditions
+        model.addBoundaryCondition("0", ["constantValue", 1]); // Left boundary
+        model.addBoundaryCondition("1", "zeroGradient"); // Right boundary
+
+        // Set solver method
+        model.setSolverMethod("lusolve");
+
+        // Solve the problem
+        const result = model.solve();
+
+        // Print results to console
+        console.log(`Number of nodes in mesh: ${result.nodesCoordinates.nodesXCoordinates.length}`);
+        console.log("Solution vector:", result.solutionVector);
+
+        // Plot the solution as a 1D line plot
+        plotSolution(model, result, "line", "resultsCanvas");
+      });
+    </script>
+  </body>
+</html>
diff --git a/examples/heatConductionScript/README.md b/examples/heatConductionScript/README.md
@@ -28,7 +28,11 @@ Implementation using a Gmsh-generated mesh for a rhomboid domain (the mesh file,
 
 For detailed information on the model setup, refer to the corresponding [tutorial](https://feascript.com/tutorials/heat-conduction-2d-rhom-fin-gmsh.html) in the FEAScript website.
 
-## Running the Examples
+## HTML Examples
+
+Each example also includes an HTML variant (e.g., `heatConduction1DWall.html`, `heatConduction2DFin.html`) that runs the same simulation in the browser with built-in visualization using Plotly.js. Simply open the HTML file in a web browser to run.
+
+## Running the Node.js Examples
 
 #### 1. Create package.json with ES module support:
 

diff --git a/examples/heatConductionScript/heatConduction1DWall/heatConduction1DWall.html b/examples/heatConductionScript/heatConduction1DWall/heatConduction1DWall.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+
+<!--
+  ════════════════════════════════════════════════════════════════
+   FEAScript Core Library
+   Lightweight Finite Element Simulation in JavaScript
+   Version: 0.2.0 | https://feascript.com
+   MIT License © 2023–2026 FEAScript
+  ════════════════════════════════════════════════════════════════
+-->
+
+<html>
+  <head>
+    <title>FEAScript Example: Heat Conduction 1D Wall</title>
+    <meta charset="UTF-8" />
+    <!-- Link to the CSS files -->
+    <link href="https://feascript.com/feascript-website.css" rel="stylesheet" type="text/css" />
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
+    <!-- Import the Math.js library for mathematical operations -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.12.0/math.min.js"></script>
+    <!-- Import the Plotly.js library for plotting -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.35.3/plotly.min.js"></script>
+  </head>
+
+  <body>
+    <h2>Heat Conduction 1D Wall</h2>
+
+    <!-- Container element where the solution plot will be rendered -->
+    <div id="resultsCanvas"></div>
+
+    <script type="module">
+      // Import FEAScript library
+      import { FEAScriptModel, plotSolution, printVersion } from "https://core.feascript.com/dist/feascript.esm.js";
+      // import { FEAScriptModel, plotSolution, printVersion } from "../../../src/index.js";
+
+      window.addEventListener("DOMContentLoaded", () => {
+        console.log("FEAScript Version:", printVersion);
+
+        // Create a new FEAScript model
+        const model = new FEAScriptModel();
+
+        // Select physics/PDE
+        model.setModelConfig("heatConductionScript");
+
+        // Define mesh configuration
+        model.setMeshConfig({
+          meshDimension: "1D",
+          elementOrder: "linear",
+          numElementsX: 10,
+          maxX: 0.15,
+        });
+
+        // Define boundary conditions
+        model.addBoundaryCondition("0", ["convection", 1, 25]); // Left boundary
+        model.addBoundaryCondition("1", ["constantTemp", 5]); // Right boundary
+
+        // Set solver method
+        model.setSolverMethod("lusolve");
+
+        // Solve the problem
+        const result = model.solve();
+
+        // Print results to console
+        console.log(`Number of nodes: ${result.nodesCoordinates.nodesXCoordinates.length}`);
+        console.log("Solution vector:", result.solutionVector);
+
+        // Plot the solution as a 1D line plot
+        plotSolution(model, result, "line", "resultsCanvas");
+      });
+    </script>
+  </body>
+</html>