From 27b9582a054e994fa32f2980a8bdf97ff500053a Mon Sep 17 00:00:00 2001
From: marcin-kordas-hoc <marcin.kordas@handsontable.com>
Date: Thu, 9 Apr 2026 17:51:56 +0000
Subject: [PATCH 01/15] Docs: add basic usage snippets to framework integration
 guides

Add idiomatic code examples to React, Angular, Vue, and Svelte
integration pages showing HyperFormula initialization and reading
calculated values. Each guide uses framework-specific patterns
(React hooks, Angular service, Vue ref/markRaw, Svelte reactivity).

Closes HF-122.
---
 docs/guide/integration-with-angular.md | 64 ++++++++++++++++++++++++++
 docs/guide/integration-with-react.md   | 56 ++++++++++++++++++++++
 docs/guide/integration-with-svelte.md  | 46 ++++++++++++++++++
 docs/guide/integration-with-vue.md     | 42 +++++++++++++++++
 4 files changed, 208 insertions(+)

diff --git a/docs/guide/integration-with-angular.md b/docs/guide/integration-with-angular.md
index 8f78e2097..1e6b57998 100644
--- a/docs/guide/integration-with-angular.md
+++ b/docs/guide/integration-with-angular.md
@@ -4,6 +4,70 @@ Installing HyperFormula in an Angular application works the same as with vanilla
 
 For more details, see the [client-side installation](client-side-installation.md) section.
 
+## Basic usage
+
+### Step 1. Create a service
+
+Wrap HyperFormula in an Angular service. Create the instance in the constructor and expose methods for reading data.
+
+```typescript
+import { Injectable, OnDestroy } from '@angular/core';
+import { HyperFormula } from 'hyperformula';
+
+@Injectable({ providedIn: 'root' })
+export class SpreadsheetService implements OnDestroy {
+  private hf: HyperFormula;
+  private sheetId = 0;
+
+  constructor() {
+    // Create a HyperFormula instance with initial data.
+    this.hf = HyperFormula.buildFromArray(
+      [
+        [10, 20, '=SUM(A1:B1)'],
+        [30, 40, '=SUM(A2:B2)'],
+      ],
+      { licenseKey: 'gpl-v3' }
+    );
+  }
+
+  /** Return calculated values for the entire sheet. */
+  getSheetValues(): (number | string | null)[][] {
+    return this.hf.getSheetValues(this.sheetId);
+  }
+
+  ngOnDestroy(): void {
+    this.hf.destroy();
+  }
+}
+```
+
+### Step 2. Use the service in a component
+
+Inject the service and display the calculated values.
+
+```typescript
+import { Component } from '@angular/core';
+import { SpreadsheetService } from './spreadsheet.service';
+
+@Component({
+  selector: 'app-spreadsheet',
+  template: `
+    <table>
+      <tr *ngFor="let row of data">
+        <td *ngFor="let cell of row">{{ cell }}</td>
+      </tr>
+    </table>
+  `,
+})
+export class SpreadsheetComponent {
+  data: (number | string | null)[][];
+
+  constructor(private spreadsheet: SpreadsheetService) {
+    this.data = this.spreadsheet.getSheetValues();
+  }
+}
+```
+
 ## Demo
 
 Explore the full working example on [Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/angular-demo?v=${$page.buildDateURIEncoded}).
diff --git a/docs/guide/integration-with-react.md b/docs/guide/integration-with-react.md
index d4bc7fe75..1591aec85 100644
--- a/docs/guide/integration-with-react.md
+++ b/docs/guide/integration-with-react.md
@@ -4,6 +4,62 @@ Installing HyperFormula in a React application works the same as with vanilla Ja
 
 For more details, see the [client-side installation](client-side-installation.md) section.
 
+## Basic usage
+
+### Step 1. Initialize HyperFormula
+
+Use `useRef` to hold the HyperFormula instance so it persists across re-renders. Initialize it inside a `useEffect` hook.
+
+```javascript
+import { useRef, useEffect, useState } from 'react';
+import { HyperFormula } from 'hyperformula';
+
+function SpreadsheetComponent() {
+  const hfRef = useRef(null);
+  const [sheetData, setSheetData] = useState([]);
+
+  useEffect(() => {
+    // Create a HyperFormula instance with initial data.
+    hfRef.current = HyperFormula.buildFromArray(
+      [
+        [10, 20, '=SUM(A1:B1)'],
+        [30, 40, '=SUM(A2:B2)'],
+      ],
+      { licenseKey: 'gpl-v3' }
+    );
+
+    // Read calculated values from the sheet.
+    const sheetId = 0;
+    setSheetData(hfRef.current.getSheetValues(sheetId));
+
+    return () => {
+      // Clean up the instance when the component unmounts.
+      hfRef.current?.destroy();
+    };
+  }, []);
+```
+
+### Step 2. Render the results
+
+Display the calculated values in a table.
+
+```javascript
+  return (
+    <table>
+      <tbody>
+        {sheetData.map((row, rowIdx) => (
+          <tr key={rowIdx}>
+            {row.map((cell, colIdx) => (
+              <td key={colIdx}>{cell}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+```
+
 ## Demo
 
 Explore the full working example on [Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/react-demo?v=${$page.buildDateURIEncoded}).
diff --git a/docs/guide/integration-with-svelte.md b/docs/guide/integration-with-svelte.md
index 8b3a5f4b6..bd8aff85d 100644
--- a/docs/guide/integration-with-svelte.md
+++ b/docs/guide/integration-with-svelte.md
@@ -4,6 +4,52 @@ Installing HyperFormula in a Svelte application works the same as with vanilla J
 
 For more details, see the [client-side installation](client-side-installation.md) section.
 
+## Basic usage
+
+### Step 1. Initialize HyperFormula
+
+Create the HyperFormula instance directly in the component's `<script>` block. Use a reactive variable for the results.
+
+```html
+<script>
+  import { HyperFormula } from 'hyperformula';
+
+  // Create a HyperFormula instance with initial data.
+  const hf = HyperFormula.buildFromArray(
+    [
+      [10, 20, '=SUM(A1:B1)'],
+      [30, 40, '=SUM(A2:B2)'],
+    ],
+    { licenseKey: 'gpl-v3' }
+  );
+
+  const sheetId = 0;
+  let data = [];
+
+  function calculate() {
+    data = hf.getSheetValues(sheetId);
+  }
+</script>
+```
+
+### Step 2. Render the results
+
+Display the data in a table and trigger calculation with a button.
+
+```html
+<button on:click={calculate}>Calculate</button>
+
+<table>
+  {#each data as row, rowIdx}
+    <tr>
+      {#each row as cell, colIdx}
+        <td>{cell}</td>
+      {/each}
+    </tr>
+  {/each}
+</table>
+```
+
 ## Demo
 
 Explore the full working example on [Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/svelte-demo?v=${$page.buildDateURIEncoded}).
diff --git a/docs/guide/integration-with-vue.md b/docs/guide/integration-with-vue.md
index eaa104e0e..68afa5a8e 100644
--- a/docs/guide/integration-with-vue.md
+++ b/docs/guide/integration-with-vue.md
@@ -4,6 +4,48 @@ Installing HyperFormula in a Vue application works the same as with vanilla Java
 
 For more details, see the [client-side installation](client-side-installation.md) section.
 
+## Basic usage
+
+### Step 1. Initialize HyperFormula
+
+Wrap the HyperFormula instance in `markRaw` to prevent Vue's reactivity system from converting it into a proxy (see [Troubleshooting](#vue-reactivity-issues) below). Use `ref` for the data you want to display.
+
+```javascript
+<script setup>
+import { ref, markRaw } from 'vue';
+import { HyperFormula } from 'hyperformula';
+
+// Create a HyperFormula instance with initial data.
+const hf = markRaw(
+  HyperFormula.buildFromArray(
+    [
+      [10, 20, '=SUM(A1:B1)'],
+      [30, 40, '=SUM(A2:B2)'],
+    ],
+    { licenseKey: 'gpl-v3' }
+  )
+);
+
+// Read calculated values from the sheet.
+const sheetId = 0;
+const data = ref(hf.getSheetValues(sheetId));
+</script>
+```
+
+### Step 2. Render the results
+
+Display the calculated values in a template.
+
+```html
+<template>
+  <table>
+    <tr v-for="(row, rowIdx) in data" :key="rowIdx">
+      <td v-for="(cell, colIdx) in row" :key="colIdx">{{ cell }}</td>
+    </tr>
+  </table>
+</template>
+```
+
 ## Troubleshooting
 
 ### Vue reactivity issues

From e920dcc321c647e0801649bd3467370a394862af Mon Sep 17 00:00:00 2001
From: marcin-kordas-hoc <marcin.kordas@handsontable.com>
Date: Mon, 13 Apr 2026 10:15:05 +0000
Subject: [PATCH 02/15] Docs: simplify snippets and clarify Demo link wording

Per feedback, snippets now focus on framework-specific integration
patterns (useRef/useEffect, @Injectable, markRaw/ref, Svelte reactivity)
with placeholder comments for data and configuration rather than
concrete values. The Demo section link is reworded from "Explore the
full working example" to "For a more advanced example" to signal that
the Stackblitz demo is a richer, separate project.

Part of HF-122.
---
 docs/guide/integration-with-angular.md | 51 ++++++++------------------
 docs/guide/integration-with-react.md   | 50 ++++++++-----------------
 docs/guide/integration-with-svelte.md  | 40 +++++---------------
 docs/guide/integration-with-vue.md     | 39 +++++++-------------
 4 files changed, 55 insertions(+), 125 deletions(-)

diff --git a/docs/guide/integration-with-angular.md b/docs/guide/integration-with-angular.md
index 1e6b57998..b28e1fac0 100644
--- a/docs/guide/integration-with-angular.md
+++ b/docs/guide/integration-with-angular.md
@@ -6,9 +6,7 @@ For more details, see the [client-side installation](client-side-installation.md
 
 ## Basic usage
 
-### Step 1. Create a service
-
-Wrap HyperFormula in an Angular service. Create the instance in the constructor and expose methods for reading data.
+Wrap the HyperFormula instance in an injectable service. Create it in the constructor, expose methods for reading and updating data, and destroy it in `ngOnDestroy`.
 
 ```typescript
 import { Injectable, OnDestroy } from '@angular/core';
@@ -17,57 +15,40 @@ import { HyperFormula } from 'hyperformula';
 @Injectable({ providedIn: 'root' })
 export class SpreadsheetService implements OnDestroy {
   private hf: HyperFormula;
-  private sheetId = 0;
 
   constructor() {
-    // Create a HyperFormula instance with initial data.
     this.hf = HyperFormula.buildFromArray(
       [
-        [10, 20, '=SUM(A1:B1)'],
-        [30, 40, '=SUM(A2:B2)'],
+        // your data goes here
       ],
-      { licenseKey: 'gpl-v3' }
+      {
+        // your configuration goes here
+      }
     );
   }
 
-  /** Return calculated values for the entire sheet. */
-  getSheetValues(): (number | string | null)[][] {
-    return this.hf.getSheetValues(this.sheetId);
+  getSheetValues() {
+    return this.hf.getSheetValues(0);
+  }
+
+  updateCell(row: number, col: number, value: unknown) {
+    this.hf.setCellContents({ sheet: 0, row, col }, value);
   }
 
-  ngOnDestroy(): void {
+  ngOnDestroy() {
     this.hf.destroy();
   }
 }
 ```
 
-### Step 2. Use the service in a component
-
-Inject the service and display the calculated values.
+Inject the service into a component and use it to read values or react to user input:
 
 ```typescript
-import { Component } from '@angular/core';
-import { SpreadsheetService } from './spreadsheet.service';
+constructor(private readonly spreadsheet: SpreadsheetService) {}
 
-@Component({
-  selector: 'app-spreadsheet',
-  template: `
-    <table>
-      <tr *ngFor="let row of data">
-        <td *ngFor="let cell of row">{{ cell }}</td>
-      </tr>
-    </table>
-  `,
-})
-export class SpreadsheetComponent {
-  data: (number | string | null)[][];
-
-  constructor(private spreadsheet: SpreadsheetService) {
-    this.data = this.spreadsheet.getSheetValues();
-  }
-}
+values = this.spreadsheet.getSheetValues();
 ```
 
 ## Demo
 
-Explore the full working example on [Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/angular-demo?v=${$page.buildDateURIEncoded}).
+For a more advanced example, check out the [Angular demo on Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/angular-demo?v=${$page.buildDateURIEncoded}).
diff --git a/docs/guide/integration-with-react.md b/docs/guide/integration-with-react.md
index 1591aec85..3baa407f5 100644
--- a/docs/guide/integration-with-react.md
+++ b/docs/guide/integration-with-react.md
@@ -6,60 +6,42 @@ For more details, see the [client-side installation](client-side-installation.md
 
 ## Basic usage
 
-### Step 1. Initialize HyperFormula
-
-Use `useRef` to hold the HyperFormula instance so it persists across re-renders. Initialize it inside a `useEffect` hook.
+Hold the HyperFormula instance in a `useRef` so it persists across re-renders. Initialize it inside a `useEffect` hook and destroy it in the cleanup function.
 
 ```javascript
-import { useRef, useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { HyperFormula } from 'hyperformula';
 
 function SpreadsheetComponent() {
   const hfRef = useRef(null);
-  const [sheetData, setSheetData] = useState([]);
+  const [values, setValues] = useState([]);
 
   useEffect(() => {
-    // Create a HyperFormula instance with initial data.
     hfRef.current = HyperFormula.buildFromArray(
       [
-        [10, 20, '=SUM(A1:B1)'],
-        [30, 40, '=SUM(A2:B2)'],
+        // your data goes here
       ],
-      { licenseKey: 'gpl-v3' }
+      {
+        // your configuration goes here
+      }
     );
 
-    // Read calculated values from the sheet.
-    const sheetId = 0;
-    setSheetData(hfRef.current.getSheetValues(sheetId));
+    setValues(hfRef.current.getSheetValues(0));
 
-    return () => {
-      // Clean up the instance when the component unmounts.
-      hfRef.current?.destroy();
-    };
+    return () => hfRef.current?.destroy();
   }, []);
-```
 
-### Step 2. Render the results
+  // render `values` as a table
+}
+```
 
-Display the calculated values in a table.
+To update a cell and re-render with the new calculated values, call `setCellContents` and re-read the sheet:
 
 ```javascript
-  return (
-    <table>
-      <tbody>
-        {sheetData.map((row, rowIdx) => (
-          <tr key={rowIdx}>
-            {row.map((cell, colIdx) => (
-              <td key={colIdx}>{cell}</td>
-            ))}
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-}
+hfRef.current.setCellContents({ sheet: 0, row, col }, newValue);
+setValues(hfRef.current.getSheetValues(0));
 ```
 
 ## Demo
 
-Explore the full working example on [Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/react-demo?v=${$page.buildDateURIEncoded}).
+For a more advanced example, check out the [React demo on Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/react-demo?v=${$page.buildDateURIEncoded}).
diff --git a/docs/guide/integration-with-svelte.md b/docs/guide/integration-with-svelte.md
index bd8aff85d..bd20fbf07 100644
--- a/docs/guide/integration-with-svelte.md
+++ b/docs/guide/integration-with-svelte.md
@@ -6,50 +6,30 @@ For more details, see the [client-side installation](client-side-installation.md
 
 ## Basic usage
 
-### Step 1. Initialize HyperFormula
-
-Create the HyperFormula instance directly in the component's `<script>` block. Use a reactive variable for the results.
+Initialize HyperFormula at the top of a component's `<script>` block. Svelte's reactivity handles updates automatically when you reassign the variable that holds the calculated values.
 
 ```html
 <script>
   import { HyperFormula } from 'hyperformula';
 
-  // Create a HyperFormula instance with initial data.
   const hf = HyperFormula.buildFromArray(
     [
-      [10, 20, '=SUM(A1:B1)'],
-      [30, 40, '=SUM(A2:B2)'],
+      // your data goes here
     ],
-    { licenseKey: 'gpl-v3' }
+    {
+      // your configuration goes here
+    }
   );
 
-  const sheetId = 0;
-  let data = [];
+  let values = hf.getSheetValues(0);
 
-  function calculate() {
-    data = hf.getSheetValues(sheetId);
+  function updateCell(row, col, value) {
+    hf.setCellContents({ sheet: 0, row, col }, value);
+    values = hf.getSheetValues(0);
   }
 </script>
 ```
 
-### Step 2. Render the results
-
-Display the data in a table and trigger calculation with a button.
-
-```html
-<button on:click={calculate}>Calculate</button>
-
-<table>
-  {#each data as row, rowIdx}
-    <tr>
-      {#each row as cell, colIdx}
-        <td>{cell}</td>
-      {/each}
-    </tr>
-  {/each}
-</table>
-```
-
 ## Demo
 
-Explore the full working example on [Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/svelte-demo?v=${$page.buildDateURIEncoded}).
+For a more advanced example, check out the [Svelte demo on Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/svelte-demo?v=${$page.buildDateURIEncoded}).
diff --git a/docs/guide/integration-with-vue.md b/docs/guide/integration-with-vue.md
index 68afa5a8e..611ca7bf8 100644
--- a/docs/guide/integration-with-vue.md
+++ b/docs/guide/integration-with-vue.md
@@ -6,44 +6,31 @@ For more details, see the [client-side installation](client-side-installation.md
 
 ## Basic usage
 
-### Step 1. Initialize HyperFormula
-
-Wrap the HyperFormula instance in `markRaw` to prevent Vue's reactivity system from converting it into a proxy (see [Troubleshooting](#vue-reactivity-issues) below). Use `ref` for the data you want to display.
+Wrap the HyperFormula instance in `markRaw` to prevent Vue from converting it into a reactive proxy (see [Troubleshooting](#vue-reactivity-issues) below). Hold derived data in `ref` so the template updates automatically.
 
 ```javascript
 <script setup>
-import { ref, markRaw } from 'vue';
+import { markRaw, ref } from 'vue';
 import { HyperFormula } from 'hyperformula';
 
-// Create a HyperFormula instance with initial data.
 const hf = markRaw(
   HyperFormula.buildFromArray(
     [
-      [10, 20, '=SUM(A1:B1)'],
-      [30, 40, '=SUM(A2:B2)'],
+      // your data goes here
     ],
-    { licenseKey: 'gpl-v3' }
+    {
+      // your configuration goes here
+    }
   )
 );
 
-// Read calculated values from the sheet.
-const sheetId = 0;
-const data = ref(hf.getSheetValues(sheetId));
-</script>
-```
-
-### Step 2. Render the results
-
-Display the calculated values in a template.
+const values = ref(hf.getSheetValues(0));
 
-```html
-<template>
-  <table>
-    <tr v-for="(row, rowIdx) in data" :key="rowIdx">
-      <td v-for="(cell, colIdx) in row" :key="colIdx">{{ cell }}</td>
-    </tr>
-  </table>
-</template>
+function updateCell(row, col, value) {
+  hf.setCellContents({ sheet: 0, row, col }, value);
+  values.value = hf.getSheetValues(0);
+}
+</script>
 ```
 
 ## Troubleshooting
@@ -73,7 +60,7 @@ This function prevents Vue from converting the HyperFormula instance into a reac
 
 ## Demo
 
-Explore the full working example on [Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/vue-3-demo?v=${$page.buildDateURIEncoded}).
+For a more advanced example, check out the [Vue 3 demo on Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/vue-3-demo?v=${$page.buildDateURIEncoded}).
 
 ::: tip
 This demo uses the [Vue 3](https://v3.vuejs.org/) framework. If you are looking for an example using Vue 2, check out the [code on GitHub](https://github.com/handsontable/hyperformula-demos/tree/2.5.x/vue-demo).

From 88056b724410d1d541df3bb02785d0bae9f6adc7 Mon Sep 17 00:00:00 2001
From: marcin-kordas-hoc <marcin.kordas@handsontable.com>
Date: Mon, 13 Apr 2026 15:08:29 +0000
Subject: [PATCH 03/15] Docs: modernize framework integration guides with
 idiomatic patterns

Expand React, Angular, Vue and Svelte integration guides to cover
framework-specific concerns that the previous skeleton snippets omitted:

- Convert all snippets to TypeScript with HyperFormula/CellValue imports
- Add licenseKey: 'gpl-v3' to every buildFromArray call
- Inline `npm install hyperformula` install command
- React: runnable JSX with controlled inputs, try/catch around setCellContents,
  React.StrictMode note, Next.js App Router SSR section with 'use client' and
  dynamic import
- Angular: modern standalone component + inject() + DestroyRef + Signals +
  OnPush, RxJS BehaviorSubject variant with AsyncPipe import note, NgZone
  runOutsideAngular section, provider-scope + DestroyRef rationale
- Vue: <script setup lang="ts">, expanded markRaw Proxy explanation and
  shallowRef trap, Nuxt SSR snippet, Pinia store with updateCell action,
  valuesUpdated event hook, inline v-for template
- Svelte: fixes memory leak by adding onDestroy(() => hf.destroy()), Svelte 5
  runes primary example plus Svelte 4 delta, SvelteKit SSR warning banner and
  dedicated onMount section with dynamic import, wired #each template with
  updateCell handler
---
 docs/guide/integration-with-angular.md | 111 +++++++++++++++++++++----
 docs/guide/integration-with-react.md   |  94 ++++++++++++++++-----
 docs/guide/integration-with-svelte.md  |  87 ++++++++++++++++---
 docs/guide/integration-with-vue.md     |  99 ++++++++++++++++++----
 4 files changed, 328 insertions(+), 63 deletions(-)

diff --git a/docs/guide/integration-with-angular.md b/docs/guide/integration-with-angular.md
index b28e1fac0..8bd48170b 100644
--- a/docs/guide/integration-with-angular.md
+++ b/docs/guide/integration-with-angular.md
@@ -1,52 +1,127 @@
 # Integration with Angular
 
-Installing HyperFormula in an Angular application works the same as with vanilla JavaScript.
+The HyperFormula API is identical in an Angular app and in plain JavaScript. What changes is where the engine lives (typically an injectable service), how it is cleaned up, and how you bridge its values into the change-detection cycle.
 
-For more details, see the [client-side installation](client-side-installation.md) section.
+Install with `npm install hyperformula`. For other options, see the [client-side installation](client-side-installation.md) section.
 
 ## Basic usage
 
-Wrap the HyperFormula instance in an injectable service. Create it in the constructor, expose methods for reading and updating data, and destroy it in `ngOnDestroy`.
+Wrap the engine in an `@Injectable` service. Use `DestroyRef` for cleanup and expose derived data as a `signal` so views using `ChangeDetectionStrategy.OnPush` update automatically.
 
 ```typescript
-import { Injectable, OnDestroy } from '@angular/core';
-import { HyperFormula } from 'hyperformula';
+// spreadsheet.service.ts
+import { DestroyRef, Injectable, inject, signal } from '@angular/core';
+import { CellValue, HyperFormula } from 'hyperformula';
 
 @Injectable({ providedIn: 'root' })
-export class SpreadsheetService implements OnDestroy {
-  private hf: HyperFormula;
+export class SpreadsheetService {
+  private readonly hf: HyperFormula;
+  readonly values = signal<CellValue[][]>([]);
 
   constructor() {
     this.hf = HyperFormula.buildFromArray(
       [
-        // your data goes here
+        [1, 2, '=A1+B1'],
+        // your data rows go here
       ],
       {
-        // your configuration goes here
+        licenseKey: 'gpl-v3',
+        // more configuration options go here
       }
     );
-  }
-
-  getSheetValues() {
-    return this.hf.getSheetValues(0);
+    this.values.set(this.hf.getSheetValues(0));
+    inject(DestroyRef).onDestroy(() => this.hf.destroy());
   }
 
   updateCell(row: number, col: number, value: unknown) {
     this.hf.setCellContents({ sheet: 0, row, col }, value);
+    this.values.set(this.hf.getSheetValues(0));
   }
+}
+```
+
+Use the service from a standalone component and bind `values()` in the template:
+
+```typescript
+// spreadsheet.component.ts
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { SpreadsheetService } from './spreadsheet.service';
+
+@Component({
+  standalone: true,
+  selector: 'app-spreadsheet',
+  templateUrl: './spreadsheet.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SpreadsheetComponent {
+  readonly spreadsheet = inject(SpreadsheetService);
+}
+```
+
+## Notes
+
+### Provider scope
+
+`providedIn: 'root'` makes the service an application-wide singleton — suitable when a single HyperFormula instance is shared across the app. For per-feature or per-component instances (for example, several independent reports on one screen), provide the service at the component level via `providers: [SpreadsheetService]`; the service is then created and destroyed alongside the component, and `DestroyRef` fires at the expected moment.
+
+### Why `DestroyRef` instead of `ngOnDestroy`
 
-  ngOnDestroy() {
-    this.hf.destroy();
+Services registered with `providedIn: 'root'` live for the lifetime of the application — Angular only invokes `ngOnDestroy` when the app itself is torn down. Using `DestroyRef.onDestroy` keeps cleanup behaviour consistent whether the service is root-scoped or component-scoped.
+
+### RxJS variant
+
+If your project uses RxJS and `async` pipes rather than signals, swap `signal` for `BehaviorSubject`:
+
+```typescript
+import { DestroyRef, Injectable, inject } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { CellValue, HyperFormula } from 'hyperformula';
+
+@Injectable({ providedIn: 'root' })
+export class SpreadsheetService {
+  private readonly hf = HyperFormula.buildFromArray([/* data */], { licenseKey: 'gpl-v3' });
+  readonly values$ = new BehaviorSubject<CellValue[][]>(this.hf.getSheetValues(0));
+
+  constructor() {
+    inject(DestroyRef).onDestroy(() => this.hf.destroy());
+  }
+
+  updateCell(row: number, col: number, value: unknown) {
+    this.hf.setCellContents({ sheet: 0, row, col }, value);
+    this.values$.next(this.hf.getSheetValues(0));
   }
 }
 ```
 
-Inject the service into a component and use it to read values or react to user input:
+Bind with `values$ | async` in the template. In standalone components, add `AsyncPipe` to the component's `imports` array:
 
 ```typescript
-constructor(private readonly spreadsheet: SpreadsheetService) {}
+import { AsyncPipe } from '@angular/common';
 
-values = this.spreadsheet.getSheetValues();
+@Component({
+  standalone: true,
+  imports: [AsyncPipe],
+  // …
+})
+```
+
+### Keeping recalculation outside the Angular zone
+
+For large sheets or frequent edits, HyperFormula's synchronous recalculation can trigger unnecessary change-detection cycles. Wrap heavy calls with `NgZone.runOutsideAngular` and re-enter the zone only when publishing new values to signals or subjects:
+
+```typescript
+// inside SpreadsheetService
+import { NgZone } from '@angular/core';
+
+private readonly ngZone = inject(NgZone);
+
+updateCell(row: number, col: number, value: unknown) {
+  this.ngZone.runOutsideAngular(() => {
+    this.hf.setCellContents({ sheet: 0, row, col }, value);
+    const next = this.hf.getSheetValues(0);
+    this.ngZone.run(() => this.values.set(next));
+  });
+}
 ```
 
 ## Demo
diff --git a/docs/guide/integration-with-react.md b/docs/guide/integration-with-react.md
index 3baa407f5..5bc7223af 100644
--- a/docs/guide/integration-with-react.md
+++ b/docs/guide/integration-with-react.md
@@ -1,47 +1,103 @@
 # Integration with React
 
-Installing HyperFormula in a React application works the same as with vanilla JavaScript.
+The HyperFormula API is identical in a React app and in plain JavaScript. What changes is where the engine lives in a component tree and how its lifecycle maps to React hooks.
 
-For more details, see the [client-side installation](client-side-installation.md) section.
+Install with `npm install hyperformula`. For other options, see the [client-side installation](client-side-installation.md) section.
 
 ## Basic usage
 
-Hold the HyperFormula instance in a `useRef` so it persists across re-renders. Initialize it inside a `useEffect` hook and destroy it in the cleanup function.
+Hold the HyperFormula instance in a `useRef` so it survives re-renders. Initialize it inside `useEffect` and release it in the cleanup function. Mirror the computed sheet values in `useState` so React re-renders when they change.
 
-```javascript
+```tsx
 import { useEffect, useRef, useState } from 'react';
-import { HyperFormula } from 'hyperformula';
+import { HyperFormula, CellValue, RawCellContent } from 'hyperformula';
 
-function SpreadsheetComponent() {
-  const hfRef = useRef(null);
-  const [values, setValues] = useState([]);
+export function SpreadsheetComponent() {
+  const hfRef = useRef<HyperFormula | null>(null);
+  const [values, setValues] = useState<CellValue[][]>([]);
 
   useEffect(() => {
-    hfRef.current = HyperFormula.buildFromArray(
+    const hf = HyperFormula.buildFromArray(
       [
-        // your data goes here
+        [1, 2, '=A1+B1'],
+        // your data rows go here
       ],
       {
-        // your configuration goes here
+        licenseKey: 'gpl-v3',
+        // more configuration options go here
       }
     );
+    hfRef.current = hf;
+    setValues(hf.getSheetValues(0));
 
-    setValues(hfRef.current.getSheetValues(0));
-
-    return () => hfRef.current?.destroy();
+    return () => {
+      hf.destroy();
+      hfRef.current = null;
+    };
   }, []);
 
-  // render `values` as a table
+  function handleCellEdit(row: number, col: number, newValue: RawCellContent) {
+    if (!hfRef.current) return;
+    try {
+      hfRef.current.setCellContents({ sheet: 0, row, col }, newValue);
+      setValues(hfRef.current.getSheetValues(0));
+    } catch (error) {
+      // setCellContents can throw on invalid addresses or sheet-size limits.
+      // Handle or surface the error according to your app's UX.
+      console.error(error);
+    }
+  }
+
+  return (
+    <table>
+      <tbody>
+        {values.map((row, r) => (
+          <tr key={r}>
+            {row.map((cell, c) => (
+              <td key={c}>
+                <input
+                  value={String(cell ?? '')}
+                  onChange={(e) => handleCellEdit(r, c, e.target.value)}
+                />
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
 }
 ```
 
-To update a cell and re-render with the new calculated values, call `setCellContents` and re-read the sheet:
+If you use JavaScript instead of TypeScript, drop the type annotations — the rest of the pattern is unchanged.
+
+## Notes
+
+### `React.StrictMode` double invocation
+
+In development, React 18 runs effects twice (mount → unmount → mount) to surface cleanup bugs. The pattern above is correct for StrictMode because `destroy()` runs before the re-mount creates a new instance, so no work leaks between the two lifecycles. Do not switch to a module-scoped singleton as a workaround — it will break StrictMode semantics.
+
+### Server-side rendering (Next.js)
 
-```javascript
-hfRef.current.setCellContents({ sheet: 0, row, col }, newValue);
-setValues(hfRef.current.getSheetValues(0));
+HyperFormula depends on browser-only APIs. In the Next.js App Router, mark the file with `'use client'` and load the component only on the client:
+
+```tsx
+// app/spreadsheet/page.tsx
+'use client';
+
+import dynamic from 'next/dynamic';
+const SpreadsheetComponent = dynamic(
+  () => import('./SpreadsheetComponent').then((m) => m.SpreadsheetComponent),
+  { ssr: false }
+);
+
+export default function Page() {
+  return <SpreadsheetComponent />;
+}
 ```
 
+In the Pages Router, the same `dynamic(..., { ssr: false })` pattern works without `'use client'`.
+
 ## Demo
 
 For a more advanced example, check out the [React demo on Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/react-demo?v=${$page.buildDateURIEncoded}).
diff --git a/docs/guide/integration-with-svelte.md b/docs/guide/integration-with-svelte.md
index bd20fbf07..a8b70143f 100644
--- a/docs/guide/integration-with-svelte.md
+++ b/docs/guide/integration-with-svelte.md
@@ -1,35 +1,100 @@
 # Integration with Svelte
 
-Installing HyperFormula in a Svelte application works the same as with vanilla JavaScript.
+The HyperFormula API is identical in a Svelte app and in plain JavaScript. What changes is how you scope the engine to a component's lifetime and how you bridge its values into Svelte's reactivity.
 
-For more details, see the [client-side installation](client-side-installation.md) section.
+Install with `npm install hyperformula`. For other options, see the [client-side installation](client-side-installation.md) section.
 
-## Basic usage
+::: warning SvelteKit SSR
+The primary snippet below assumes a browser environment. If you use SvelteKit with default SSR, skip to [Server-side rendering](#server-side-rendering-sveltekit) — `HyperFormula.buildFromArray` at `<script>` top level will crash on the server.
+:::
 
-Initialize HyperFormula at the top of a component's `<script>` block. Svelte's reactivity handles updates automatically when you reassign the variable that holds the calculated values.
+## Basic usage (Svelte 5, with runes)
 
-```html
-<script>
-  import { HyperFormula } from 'hyperformula';
+Declare the engine at the top of `<script>` so it lives for the component's lifetime. Hold derived data in a `$state` rune so reassignment triggers re-rendering. Release the engine with `onDestroy`.
+
+```svelte
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { HyperFormula, type CellValue } from 'hyperformula';
 
   const hf = HyperFormula.buildFromArray(
     [
-      // your data goes here
+      [1, 2, '=A1+B1'],
+      // your data rows go here
     ],
     {
-      // your configuration goes here
+      licenseKey: 'gpl-v3',
+      // more configuration options go here
     }
   );
 
-  let values = hf.getSheetValues(0);
+  let values = $state<CellValue[][]>(hf.getSheetValues(0));
 
-  function updateCell(row, col, value) {
+  function updateCell(row: number, col: number, value: unknown) {
     hf.setCellContents({ sheet: 0, row, col }, value);
     values = hf.getSheetValues(0);
   }
+
+  onDestroy(() => hf.destroy());
 </script>
+
+<table>
+  {#each values as row, r}
+    <tr>
+      {#each row as cell, c}
+        <td>
+          <input
+            value={cell ?? ''}
+            onchange={(e) => updateCell(r, c, (e.target as HTMLInputElement).value)}
+          />
+        </td>
+      {/each}
+    </tr>
+  {/each}
+</table>
 ```
 
+### Svelte 4
+
+Under Svelte 4, replace `let values = $state<CellValue[][]>(...)` with plain `let values: CellValue[][] = ...`. The compiler transforms `let` reassignments into reactive updates automatically. Use `on:change` (colon syntax) instead of the Svelte 5 `onchange` attribute. Everything else — including `onDestroy` — is unchanged.
+
+## Server-side rendering (SvelteKit)
+
+HyperFormula depends on browser-only APIs. In SvelteKit, initialize the engine inside `onMount` so the code never runs during SSR:
+
+```svelte
+<script lang="ts">
+  // Svelte 5 + SvelteKit
+  import { onMount, onDestroy } from 'svelte';
+  import type { HyperFormula as HyperFormulaType, CellValue } from 'hyperformula';
+
+  let hf: HyperFormulaType | null = null;
+  let values = $state<CellValue[][]>([]);
+
+  onMount(async () => {
+    const { HyperFormula } = await import('hyperformula');
+    hf = HyperFormula.buildFromArray(
+      [
+        [1, 2, '=A1+B1'],
+        // your data rows go here
+      ],
+      { licenseKey: 'gpl-v3' }
+    );
+    values = hf.getSheetValues(0);
+  });
+
+  function updateCell(row: number, col: number, value: unknown) {
+    if (!hf) return;
+    hf.setCellContents({ sheet: 0, row, col }, value);
+    values = hf.getSheetValues(0);
+  }
+
+  onDestroy(() => hf?.destroy());
+</script>
+```
+
+Wire `updateCell` in the template the same way as in the Basic usage section (`<input ... onchange=...>`). For Svelte 4, replace `let values = $state<CellValue[][]>([])` with `let values: CellValue[][] = []`; the rest is identical. As an alternative, guard the top-level init with `if (browser)` from `$app/environment`.
+
 ## Demo
 
 For a more advanced example, check out the [Svelte demo on Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/svelte-demo?v=${$page.buildDateURIEncoded}).
diff --git a/docs/guide/integration-with-vue.md b/docs/guide/integration-with-vue.md
index 611ca7bf8..296797f87 100644
--- a/docs/guide/integration-with-vue.md
+++ b/docs/guide/integration-with-vue.md
@@ -1,38 +1,107 @@
 # Integration with Vue
 
-Installing HyperFormula in a Vue application works the same as with vanilla JavaScript.
+The HyperFormula API is identical in a Vue 3 app and in plain JavaScript. What changes is how you keep the engine out of Vue's reactivity system (critical) and how you surface its values into the template.
 
-For more details, see the [client-side installation](client-side-installation.md) section.
+Install with `npm install hyperformula`. For other options, see the [client-side installation](client-side-installation.md) section.
 
 ## Basic usage
 
-Wrap the HyperFormula instance in `markRaw` to prevent Vue from converting it into a reactive proxy (see [Troubleshooting](#vue-reactivity-issues) below). Hold derived data in `ref` so the template updates automatically.
+Wrap the HyperFormula instance in `markRaw` so Vue does not convert it into a reactive proxy (see [Troubleshooting](#vue-reactivity-issues) below). Hold derived data in `ref` so the template updates when you reassign the ref's `.value`.
 
-```javascript
-<script setup>
-import { markRaw, ref } from 'vue';
-import { HyperFormula } from 'hyperformula';
+```vue
+<script setup lang="ts">
+import { markRaw, onUnmounted, ref } from 'vue';
+import { HyperFormula, type CellValue } from 'hyperformula';
 
 const hf = markRaw(
   HyperFormula.buildFromArray(
     [
-      // your data goes here
+      [1, 2, '=A1+B1'],
+      // your data rows go here
     ],
     {
-      // your configuration goes here
+      licenseKey: 'gpl-v3',
+      // more configuration options go here
     }
   )
 );
 
-const values = ref(hf.getSheetValues(0));
+const values = ref<CellValue[][]>(hf.getSheetValues(0));
 
-function updateCell(row, col, value) {
+function updateCell(row: number, col: number, value: unknown) {
   hf.setCellContents({ sheet: 0, row, col }, value);
   values.value = hf.getSheetValues(0);
 }
+
+onUnmounted(() => hf.destroy());
+</script>
+
+<template>
+  <table>
+    <tr v-for="(row, r) in values" :key="r">
+      <td v-for="(cell, c) in row" :key="c">{{ cell }}</td>
+    </tr>
+  </table>
+</template>
+```
+
+## Notes
+
+### Server-side rendering (Nuxt)
+
+HyperFormula depends on browser-only APIs. In Nuxt, render the spreadsheet on the client only — wrap the component with `<ClientOnly>` or instantiate the instance inside `onMounted` rather than at the top of `<script setup>`:
+
+```vue
+<script setup lang="ts">
+import { markRaw, onMounted, onUnmounted, ref, shallowRef } from 'vue';
+import type { HyperFormula as HyperFormulaType, CellValue } from 'hyperformula';
+
+const hf = shallowRef<HyperFormulaType | null>(null);
+const values = ref<CellValue[][]>([]);
+
+onMounted(async () => {
+  const { HyperFormula } = await import('hyperformula');
+  const instance = markRaw(HyperFormula.buildFromArray([/* data */], { licenseKey: 'gpl-v3' }));
+  hf.value = instance;
+  values.value = instance.getSheetValues(0);
+});
+
+onUnmounted(() => hf.value?.destroy());
 </script>
 ```
 
+### Reacting to internal changes
+
+If you mutate the engine from multiple places (not just one `updateCell`), subscribe to HyperFormula's `valuesUpdated` event once and refresh `values.value` from the handler rather than calling `getSheetValues` after every mutation:
+
+```typescript
+hf.on('valuesUpdated', () => {
+  values.value = hf.getSheetValues(0);
+});
+```
+
+### Sharing the instance across components (Pinia)
+
+If the same engine is used from multiple components, put it in a Pinia store. Apply `markRaw` inside the store so Pinia does not proxy the instance:
+
+```typescript
+import { defineStore } from 'pinia';
+import { markRaw, ref } from 'vue';
+import { HyperFormula, type CellValue } from 'hyperformula';
+
+export const useSpreadsheetStore = defineStore('spreadsheet', () => {
+  const hf = markRaw(HyperFormula.buildFromArray([/* data */], { licenseKey: 'gpl-v3' }));
+  const values = ref<CellValue[][]>(hf.getSheetValues(0));
+
+  function updateCell(row: number, col: number, value: unknown) {
+    hf.setCellContents({ sheet: 0, row, col }, value);
+    values.value = hf.getSheetValues(0);
+  }
+
+  return { hf, values, updateCell };
+});
+```
+
 ## Troubleshooting
 
 ### Vue reactivity issues
@@ -43,20 +112,20 @@ If you encounter an error like
 Uncaught TypeError: Cannot read properties of undefined (reading 'licenseKeyValidityState')
 ```
 
-it means that Vue's reactivity system tries to deeply observe the HyperFormula instance. To fix this, wrap your HyperFormula instance in Vue's [`markRaw`](https://vuejs.org/api/reactivity-advanced.html#markraw) function:
+it means that Vue's reactivity system tried to deeply observe the HyperFormula instance. Vue wraps reactive objects in a `Proxy` that intercepts every property access; when that proxy reaches a non-trivial instance with its own internal state, identity checks and lazy-initialized maps break. The fix is to opt the instance out of reactivity with Vue's [`markRaw`](https://vuejs.org/api/reactivity-advanced.html#markraw):
 
-```javascript
+```typescript
 import { markRaw } from 'vue';
 import { HyperFormula } from 'hyperformula';
 
 const hfInstance = markRaw(
   HyperFormula.buildEmpty({
-    licenseKey: 'internal-use-in-handsontable',
+    licenseKey: 'gpl-v3',
   })
 );
 ```
 
-This function prevents Vue from converting the HyperFormula instance into a reactive proxy, which can cause errors and performance issues.
+`shallowRef` is not a substitute: it skips proxying only at the top level, so writing the instance into a nested reactive structure (Pinia state, `reactive({...})`) will still wrap it. Always pass the instance itself through `markRaw` before putting it anywhere Vue can reach.
 
 ## Demo
 

From 9571737f5a5a0986d2458f2e644dcadd4f3012ec Mon Sep 17 00:00:00 2001
From: marcin-kordas-hoc <marcin.kordas@handsontable.com>
Date: Mon, 13 Apr 2026 15:09:05 +0000
Subject: [PATCH 04/15] Docs: add Next steps cross-links to framework
 integration guides

Point readers from each integration guide to related topics they are
likely to need next: configuration options, basic operations (CRUD),
advanced usage (multi-sheet, named expressions), and custom functions.

Identical section in all four guides so the navigation experience is
consistent when switching between frameworks.
---
 docs/guide/integration-with-angular.md | 7 +++++++
 docs/guide/integration-with-react.md   | 7 +++++++
 docs/guide/integration-with-svelte.md  | 7 +++++++
 docs/guide/integration-with-vue.md     | 7 +++++++
 4 files changed, 28 insertions(+)

diff --git a/docs/guide/integration-with-angular.md b/docs/guide/integration-with-angular.md
index 8bd48170b..ee6941c1a 100644
--- a/docs/guide/integration-with-angular.md
+++ b/docs/guide/integration-with-angular.md
@@ -124,6 +124,13 @@ updateCell(row: number, col: number, value: unknown) {
 }
 ```
 
+## Next steps
+
+- [Configuration options](configuration-options.md) — full list of `buildFromArray` / `buildEmpty` options
+- [Basic operations](basic-operations.md) — CRUD on cells, rows, columns, sheets
+- [Advanced usage](advanced-usage.md) — multi-sheet workbooks, named expressions
+- [Custom functions](custom-functions.md) — register your own formulas
+
 ## Demo
 
 For a more advanced example, check out the [Angular demo on Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/angular-demo?v=${$page.buildDateURIEncoded}).
diff --git a/docs/guide/integration-with-react.md b/docs/guide/integration-with-react.md
index 5bc7223af..f5516bd64 100644
--- a/docs/guide/integration-with-react.md
+++ b/docs/guide/integration-with-react.md
@@ -98,6 +98,13 @@ export default function Page() {
 
 In the Pages Router, the same `dynamic(..., { ssr: false })` pattern works without `'use client'`.
 
+## Next steps
+
+- [Configuration options](configuration-options.md) — full list of `buildFromArray` / `buildEmpty` options
+- [Basic operations](basic-operations.md) — CRUD on cells, rows, columns, sheets
+- [Advanced usage](advanced-usage.md) — multi-sheet workbooks, named expressions
+- [Custom functions](custom-functions.md) — register your own formulas
+
 ## Demo
 
 For a more advanced example, check out the [React demo on Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/react-demo?v=${$page.buildDateURIEncoded}).
diff --git a/docs/guide/integration-with-svelte.md b/docs/guide/integration-with-svelte.md
index a8b70143f..e0ad502ea 100644
--- a/docs/guide/integration-with-svelte.md
+++ b/docs/guide/integration-with-svelte.md
@@ -95,6 +95,13 @@ HyperFormula depends on browser-only APIs. In SvelteKit, initialize the engine i
 
 Wire `updateCell` in the template the same way as in the Basic usage section (`<input ... onchange=...>`). For Svelte 4, replace `let values = $state<CellValue[][]>([])` with `let values: CellValue[][] = []`; the rest is identical. As an alternative, guard the top-level init with `if (browser)` from `$app/environment`.
 
+## Next steps
+
+- [Configuration options](configuration-options.md) — full list of `buildFromArray` / `buildEmpty` options
+- [Basic operations](basic-operations.md) — CRUD on cells, rows, columns, sheets
+- [Advanced usage](advanced-usage.md) — multi-sheet workbooks, named expressions
+- [Custom functions](custom-functions.md) — register your own formulas
+
 ## Demo
 
 For a more advanced example, check out the [Svelte demo on Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/svelte-demo?v=${$page.buildDateURIEncoded}).
diff --git a/docs/guide/integration-with-vue.md b/docs/guide/integration-with-vue.md
index 296797f87..131c63f4d 100644
--- a/docs/guide/integration-with-vue.md
+++ b/docs/guide/integration-with-vue.md
@@ -127,6 +127,13 @@ const hfInstance = markRaw(
 
 `shallowRef` is not a substitute: it skips proxying only at the top level, so writing the instance into a nested reactive structure (Pinia state, `reactive({...})`) will still wrap it. Always pass the instance itself through `markRaw` before putting it anywhere Vue can reach.
 
+## Next steps
+
+- [Configuration options](configuration-options.md) — full list of `buildFromArray` / `buildEmpty` options
+- [Basic operations](basic-operations.md) — CRUD on cells, rows, columns, sheets
+- [Advanced usage](advanced-usage.md) — multi-sheet workbooks, named expressions
+- [Custom functions](custom-functions.md) — register your own formulas
+
 ## Demo
 
 For a more advanced example, check out the [Vue 3 demo on Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/vue-3-demo?v=${$page.buildDateURIEncoded}).

From bd84ce9cd6b8a2285aed597e26e079ae09721f23 Mon Sep 17 00:00:00 2001
From: marcin-kordas-hoc <marcin.kordas@handsontable.com>
Date: Mon, 13 Apr 2026 15:09:38 +0000
Subject: [PATCH 05/15] Docs: fix $page.buildDateURIEncoded template syntax in
 framework guides

The Stackblitz demo links used \${...} JavaScript template literal syntax,
which is not interpolated by VuePress. VuePress 1 processes markdown as
Vue templates, so the correct syntax for accessing the injected
\$page.buildDateURIEncoded variable is Vue's {{ ... }} interpolation.

config.js line 79 documents the intended syntax explicitly:
  // inject current HF buildDate URI encoded as {{ \$page.buildDateURIEncoded }} variable

Before this fix, the cache-buster query string rendered as a literal
?v=\${\$page.buildDateURIEncoded} in the URL, breaking the cache-busting
behaviour on every Stackblitz demo link.

Note: the same issue exists in docs/guide/custom-functions.md:361 from
an earlier change; that is left for a separate fix.
---
 docs/guide/integration-with-angular.md | 2 +-
 docs/guide/integration-with-react.md   | 2 +-
 docs/guide/integration-with-svelte.md  | 2 +-
 docs/guide/integration-with-vue.md     | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/guide/integration-with-angular.md b/docs/guide/integration-with-angular.md
index ee6941c1a..17aa31029 100644
--- a/docs/guide/integration-with-angular.md
+++ b/docs/guide/integration-with-angular.md
@@ -133,4 +133,4 @@ updateCell(row: number, col: number, value: unknown) {
 
 ## Demo
 
-For a more advanced example, check out the [Angular demo on Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/angular-demo?v=${$page.buildDateURIEncoded}).
+For a more advanced example, check out the [Angular demo on Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/angular-demo?v={{ $page.buildDateURIEncoded }}).
diff --git a/docs/guide/integration-with-react.md b/docs/guide/integration-with-react.md
index f5516bd64..6bc6d9767 100644
--- a/docs/guide/integration-with-react.md
+++ b/docs/guide/integration-with-react.md
@@ -107,4 +107,4 @@ In the Pages Router, the same `dynamic(..., { ssr: false })` pattern works witho
 
 ## Demo
 
-For a more advanced example, check out the [React demo on Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/react-demo?v=${$page.buildDateURIEncoded}).
+For a more advanced example, check out the [React demo on Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/react-demo?v={{ $page.buildDateURIEncoded }}).
diff --git a/docs/guide/integration-with-svelte.md b/docs/guide/integration-with-svelte.md
index e0ad502ea..48ce98cee 100644
--- a/docs/guide/integration-with-svelte.md
+++ b/docs/guide/integration-with-svelte.md
@@ -104,4 +104,4 @@ Wire `updateCell` in the template the same way as in the Basic usage section (`<
 
 ## Demo
 
-For a more advanced example, check out the [Svelte demo on Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/svelte-demo?v=${$page.buildDateURIEncoded}).
+For a more advanced example, check out the [Svelte demo on Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/svelte-demo?v={{ $page.buildDateURIEncoded }}).
diff --git a/docs/guide/integration-with-vue.md b/docs/guide/integration-with-vue.md
index 131c63f4d..1c4b46860 100644
--- a/docs/guide/integration-with-vue.md
+++ b/docs/guide/integration-with-vue.md
@@ -136,7 +136,7 @@ const hfInstance = markRaw(
 
 ## Demo
 
-For a more advanced example, check out the [Vue 3 demo on Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/vue-3-demo?v=${$page.buildDateURIEncoded}).
+For a more advanced example, check out the [Vue 3 demo on Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/vue-3-demo?v={{ $page.buildDateURIEncoded }}).
 
 ::: tip
 This demo uses the [Vue 3](https://v3.vuejs.org/) framework. If you are looking for an example using Vue 2, check out the [code on GitHub](https://github.com/handsontable/hyperformula-demos/tree/2.5.x/vue-demo).

From 87c2f4682daf456b70083d81c31580ab6064d6f7 Mon Sep 17 00:00:00 2001
From: marcin-kordas-hoc <marcin.kordas@handsontable.com>
Date: Tue, 14 Apr 2026 03:48:17 +0000
Subject: [PATCH 06/15] =?UTF-8?q?Docs:=20fix=20setCellContents=20type=20in?=
 =?UTF-8?q?=20guide=20snippets=20(unknown=20=E2=86=92=20RawCellContent)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

tsc smoke check found that updateCell(value: unknown) does not satisfy
setCellContents which expects RawCellContent. Replace unknown with the
correct type and add missing RawCellContent imports in Angular, Vue and
Svelte guides.
---
 docs/guide/integration-with-angular.md | 10 +++++-----
 docs/guide/integration-with-svelte.md  |  6 +++---
 docs/guide/integration-with-vue.md     |  8 ++++----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/docs/guide/integration-with-angular.md b/docs/guide/integration-with-angular.md
index 17aa31029..802b765a5 100644
--- a/docs/guide/integration-with-angular.md
+++ b/docs/guide/integration-with-angular.md
@@ -11,7 +11,7 @@ Wrap the engine in an `@Injectable` service. Use `DestroyRef` for cleanup and ex
 ```typescript
 // spreadsheet.service.ts
 import { DestroyRef, Injectable, inject, signal } from '@angular/core';
-import { CellValue, HyperFormula } from 'hyperformula';
+import { CellValue, HyperFormula, RawCellContent } from 'hyperformula';
 
 @Injectable({ providedIn: 'root' })
 export class SpreadsheetService {
@@ -33,7 +33,7 @@ export class SpreadsheetService {
     inject(DestroyRef).onDestroy(() => this.hf.destroy());
   }
 
-  updateCell(row: number, col: number, value: unknown) {
+  updateCell(row: number, col: number, value: RawCellContent) {
     this.hf.setCellContents({ sheet: 0, row, col }, value);
     this.values.set(this.hf.getSheetValues(0));
   }
@@ -75,7 +75,7 @@ If your project uses RxJS and `async` pipes rather than signals, swap `signal` f
 ```typescript
 import { DestroyRef, Injectable, inject } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
-import { CellValue, HyperFormula } from 'hyperformula';
+import { CellValue, HyperFormula, RawCellContent } from 'hyperformula';
 
 @Injectable({ providedIn: 'root' })
 export class SpreadsheetService {
@@ -86,7 +86,7 @@ export class SpreadsheetService {
     inject(DestroyRef).onDestroy(() => this.hf.destroy());
   }
 
-  updateCell(row: number, col: number, value: unknown) {
+  updateCell(row: number, col: number, value: RawCellContent) {
     this.hf.setCellContents({ sheet: 0, row, col }, value);
     this.values$.next(this.hf.getSheetValues(0));
   }
@@ -115,7 +115,7 @@ import { NgZone } from '@angular/core';
 
 private readonly ngZone = inject(NgZone);
 
-updateCell(row: number, col: number, value: unknown) {
+updateCell(row: number, col: number, value: RawCellContent) {
   this.ngZone.runOutsideAngular(() => {
     this.hf.setCellContents({ sheet: 0, row, col }, value);
     const next = this.hf.getSheetValues(0);
diff --git a/docs/guide/integration-with-svelte.md b/docs/guide/integration-with-svelte.md
index 48ce98cee..7bb07e1e6 100644
--- a/docs/guide/integration-with-svelte.md
+++ b/docs/guide/integration-with-svelte.md
@@ -15,7 +15,7 @@ Declare the engine at the top of `<script>` so it lives for the component's life
 ```svelte
 <script lang="ts">
   import { onDestroy } from 'svelte';
-  import { HyperFormula, type CellValue } from 'hyperformula';
+  import { HyperFormula, type CellValue, type RawCellContent } from 'hyperformula';
 
   const hf = HyperFormula.buildFromArray(
     [
@@ -30,7 +30,7 @@ Declare the engine at the top of `<script>` so it lives for the component's life
 
   let values = $state<CellValue[][]>(hf.getSheetValues(0));
 
-  function updateCell(row: number, col: number, value: unknown) {
+  function updateCell(row: number, col: number, value: RawCellContent) {
     hf.setCellContents({ sheet: 0, row, col }, value);
     values = hf.getSheetValues(0);
   }
@@ -83,7 +83,7 @@ HyperFormula depends on browser-only APIs. In SvelteKit, initialize the engine i
     values = hf.getSheetValues(0);
   });
 
-  function updateCell(row: number, col: number, value: unknown) {
+  function updateCell(row: number, col: number, value: RawCellContent) {
     if (!hf) return;
     hf.setCellContents({ sheet: 0, row, col }, value);
     values = hf.getSheetValues(0);
diff --git a/docs/guide/integration-with-vue.md b/docs/guide/integration-with-vue.md
index 1c4b46860..3e6970450 100644
--- a/docs/guide/integration-with-vue.md
+++ b/docs/guide/integration-with-vue.md
@@ -11,7 +11,7 @@ Wrap the HyperFormula instance in `markRaw` so Vue does not convert it into a re
 ```vue
 <script setup lang="ts">
 import { markRaw, onUnmounted, ref } from 'vue';
-import { HyperFormula, type CellValue } from 'hyperformula';
+import { HyperFormula, type CellValue, type RawCellContent } from 'hyperformula';
 
 const hf = markRaw(
   HyperFormula.buildFromArray(
@@ -28,7 +28,7 @@ const hf = markRaw(
 
 const values = ref<CellValue[][]>(hf.getSheetValues(0));
 
-function updateCell(row: number, col: number, value: unknown) {
+function updateCell(row: number, col: number, value: RawCellContent) {
   hf.setCellContents({ sheet: 0, row, col }, value);
   values.value = hf.getSheetValues(0);
 }
@@ -87,13 +87,13 @@ If the same engine is used from multiple components, put it in a Pinia store. Ap
 ```typescript
 import { defineStore } from 'pinia';
 import { markRaw, ref } from 'vue';
-import { HyperFormula, type CellValue } from 'hyperformula';
+import { HyperFormula, type CellValue, type RawCellContent } from 'hyperformula';
 
 export const useSpreadsheetStore = defineStore('spreadsheet', () => {
   const hf = markRaw(HyperFormula.buildFromArray([/* data */], { licenseKey: 'gpl-v3' }));
   const values = ref<CellValue[][]>(hf.getSheetValues(0));
 
-  function updateCell(row: number, col: number, value: unknown) {
+  function updateCell(row: number, col: number, value: RawCellContent) {
     hf.setCellContents({ sheet: 0, row, col }, value);
     values.value = hf.getSheetValues(0);
   }

From 2f8b2beec95131cc35d7fcf6c6b68faab9a421eb Mon Sep 17 00:00:00 2001
From: marcin-kordas-hoc <marcin.kordas@handsontable.com>
Date: Tue, 14 Apr 2026 07:17:54 +0000
Subject: [PATCH 07/15] Docs: add AGENTS.md with universal AI assistant
 instructions

Add framework-agnostic instruction file for AI coding assistants
(Claude Code, GitHub Copilot, Cursor, Gemini CLI). Covers the core
3-operation API surface, framework integration patterns with critical
rules (markRaw, onDestroy, StrictMode, DestroyRef, SSR guards),
key types, common mistakes to prevent, and project structure pointers.
---
 AGENTS.md | 95 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 AGENTS.md

diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 000000000..f2d69beb3
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,95 @@
+# AGENTS.md
+
+Universal instructions for AI coding assistants (Claude Code, GitHub Copilot, Cursor, Gemini CLI, and others) working with the HyperFormula codebase.
+
+For Claude Code specific setup see [CLAUDE.md](CLAUDE.md).
+
+## What is HyperFormula
+
+HyperFormula is a **headless spreadsheet engine** — no UI, no DOM. It parses Excel-compatible formulas, evaluates them, and returns computed values. It runs in browser and Node.js.
+
+Core API surface (3 operations cover 90% of use):
+```typescript
+import { HyperFormula } from 'hyperformula';
+
+const hf = HyperFormula.buildFromArray(data, { licenseKey: 'gpl-v3' });
+const values = hf.getSheetValues(0);             // CellValue[][]
+hf.setCellContents({ sheet: 0, row, col }, value); // RawCellContent
+```
+
+`licenseKey: 'gpl-v3'` is mandatory — without it the engine throws a license warning.
+
+## Framework integration patterns
+
+When helping users integrate HyperFormula with a framework, follow these idiomatic patterns:
+
+| Framework | Instance storage | Cleanup | Reactive bridge | SSR guard |
+|---|---|---|---|---|
+| React | `useRef<HyperFormula>` | `useEffect` return | `useState<CellValue[][]>` | `dynamic(..., { ssr: false })` |
+| Angular | `@Injectable` service field | `inject(DestroyRef).onDestroy` | `signal<CellValue[][]>` | N/A (no default SSR) |
+| Vue 3 | `markRaw(HyperFormula.build...)` | `onUnmounted` | `ref<CellValue[][]>` | `onMounted` + dynamic import |
+| Svelte 5 | top-level `const` in `<script>` | `onDestroy` | `$state<CellValue[][]>` | `onMount` + dynamic import |
+
+Critical rules:
+- **Vue:** always `markRaw()` the HF instance — Vue's Proxy breaks HF internal state
+- **Svelte:** always `onDestroy(() => hf.destroy())` — omitting it leaks the engine
+- **React:** pattern survives `StrictMode` double-invocation (mount→unmount→mount)
+- **Angular:** `providedIn: 'root'` services don't fire `ngOnDestroy` until app shutdown — use `DestroyRef`
+- **SSR:** HF depends on browser-only APIs — guard with framework's client-only mechanism
+
+Full guide with TypeScript snippets: `docs/guide/integration-with-{react,angular,vue,svelte}.md`
+
+## Project structure
+
+| Path | Description |
+|---|---|
+| `src/HyperFormula.ts` | Main engine class, public API |
+| `src/interpreter/plugin/` | All function implementations (extend `FunctionPlugin`) |
+| `src/parser/` | Chevrotain-based formula parser |
+| `src/DependencyGraph/` | Cell dependency tracking |
+| `src/i18n/languages/` | Function name translations (17 languages) |
+| `test/unit/` | Jest tests (`*.spec.ts`) |
+| `docs/guide/` | User-facing documentation (VuePress) |
+| `docs/examples/` | 49 inline code examples rendered in docs |
+| `typings/` | Generated `.d.ts` type declarations |
+
+## Adding a new function
+
+1. Create or modify plugin in `src/interpreter/plugin/`
+2. Add metadata to `implementedFunctions` static property
+3. Add translations to all 17 files in `src/i18n/languages/`
+4. Add tests in `test/unit/interpreter/`
+5. Use `runFunction()` helper for argument validation and coercion
+
+## Key types
+
+```typescript
+CellValue     // number | string | boolean | DetailedCellError | null (output from getSheetValues)
+RawCellContent // string | number | boolean | Date | null | undefined | RawCellContent[][] (input to setCellContents)
+SimpleCellAddress // { sheet: number, row: number, col: number }
+```
+
+## Common mistakes to prevent
+
+- Passing HF instance into Vue `reactive()` / `ref()` without `markRaw` → cryptic TypeError
+- Forgetting `licenseKey` in config → silent warning, no crash, confusing for users
+- Using `unknown` type for `setCellContents` value arg → use `RawCellContent`
+- SSR: importing `hyperformula` at module scope in Next.js/Nuxt/SvelteKit → server crash
+- Array functions: HF uses **parse-time array sizing** — output dimensions determined before evaluation
+
+## Build and test
+
+```bash
+npm install          # Install dependencies
+npm run test:unit    # Jest unit tests (fast)
+npm run lint         # ESLint
+npm run bundle-all   # Full build (compile + bundle)
+npm run docs:dev     # Local docs preview (VuePress, port 8080)
+```
+
+## Contributing
+
+- Branch from `develop`, never commit directly to master
+- Tests required for all changes in `test/` folder
+- Run linter before submitting
+- Maintain compatibility with Excel and Google Sheets behavior

From 683bc08c213a3baeca846ebf26fa66ee8a06916d Mon Sep 17 00:00:00 2001
From: marcin-kordas-hoc <marcin.kordas@handsontable.com>
Date: Wed, 15 Apr 2026 09:32:36 +0000
Subject: [PATCH 08/15] Docs: align Angular and Svelte guide snippets with
 Stackblitz demos

Angular: switch primary pattern to BehaviorSubject/Observable (module-based),
matching the angular-demo on Stackblitz. Signal-based variant moved to a
'Signals variant (Angular 17+)' note. Cleanup section expanded with both
ngOnDestroy and DestroyRef options.

Svelte: switch primary pattern to Svelte 4 style (on:click, plain let),
matching the svelte-demo on Stackblitz. Svelte 5 runes variant moved to
a '### Svelte 5 (runes)' subsection. SSR section updated to use Svelte 4
as primary.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/guide/integration-with-angular.md | 104 ++++++++++++++++++-------
 docs/guide/integration-with-svelte.md  |  83 ++++++++++++++++----
 2 files changed, 143 insertions(+), 44 deletions(-)

diff --git a/docs/guide/integration-with-angular.md b/docs/guide/integration-with-angular.md
index 802b765a5..819b1fee4 100644
--- a/docs/guide/integration-with-angular.md
+++ b/docs/guide/integration-with-angular.md
@@ -6,17 +6,20 @@ Install with `npm install hyperformula`. For other options, see the [client-side
 
 ## Basic usage
 
-Wrap the engine in an `@Injectable` service. Use `DestroyRef` for cleanup and expose derived data as a `signal` so views using `ChangeDetectionStrategy.OnPush` update automatically.
+Wrap the engine in an `@Injectable` service backed by a `BehaviorSubject`. Components subscribe to the observable with the `async` pipe, which handles subscription cleanup automatically.
 
 ```typescript
 // spreadsheet.service.ts
-import { DestroyRef, Injectable, inject, signal } from '@angular/core';
-import { CellValue, HyperFormula, RawCellContent } from 'hyperformula';
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { HyperFormula, type CellValue, type RawCellContent } from 'hyperformula';
 
 @Injectable({ providedIn: 'root' })
 export class SpreadsheetService {
   private readonly hf: HyperFormula;
-  readonly values = signal<CellValue[][]>([]);
+
+  private readonly _values = new BehaviorSubject<CellValue[][]>([]);
+  readonly values$ = this._values.asObservable();
 
   constructor() {
     this.hf = HyperFormula.buildFromArray(
@@ -29,58 +32,98 @@ export class SpreadsheetService {
         // more configuration options go here
       }
     );
-    this.values.set(this.hf.getSheetValues(0));
-    inject(DestroyRef).onDestroy(() => this.hf.destroy());
+    this._values.next(this.hf.getSheetValues(0) as CellValue[][]);
   }
 
   updateCell(row: number, col: number, value: RawCellContent) {
     this.hf.setCellContents({ sheet: 0, row, col }, value);
-    this.values.set(this.hf.getSheetValues(0));
+    this._values.next(this.hf.getSheetValues(0) as CellValue[][]);
   }
 }
 ```
 
-Use the service from a standalone component and bind `values()` in the template:
+Consume the service from a component and bind `values$ | async` in the template:
 
 ```typescript
 // spreadsheet.component.ts
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
 import { SpreadsheetService } from './spreadsheet.service';
+import { type CellValue } from 'hyperformula';
 
 @Component({
-  standalone: true,
   selector: 'app-spreadsheet',
   templateUrl: './spreadsheet.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SpreadsheetComponent {
-  readonly spreadsheet = inject(SpreadsheetService);
+  values$: Observable<CellValue[][]>;
+
+  constructor(private spreadsheetService: SpreadsheetService) {
+    this.values$ = this.spreadsheetService.values$;
+  }
+
+  updateCell(row: number, col: number, value: string) {
+    this.spreadsheetService.updateCell(row, col, value);
+  }
 }
 ```
 
+```html
+<!-- spreadsheet.component.html -->
+<table>
+  <tr *ngFor="let row of values$ | async; let r = index">
+    <td *ngFor="let cell of row; let c = index">{{ cell }}</td>
+  </tr>
+</table>
+```
+
 ## Notes
 
 ### Provider scope
 
-`providedIn: 'root'` makes the service an application-wide singleton — suitable when a single HyperFormula instance is shared across the app. For per-feature or per-component instances (for example, several independent reports on one screen), provide the service at the component level via `providers: [SpreadsheetService]`; the service is then created and destroyed alongside the component, and `DestroyRef` fires at the expected moment.
+`providedIn: 'root'` makes the service an application-wide singleton — suitable when a single HyperFormula instance is shared across the app. For per-feature or per-component instances (for example, several independent reports on one screen), provide the service at the component level via `providers: [SpreadsheetService]`; the service is then created and destroyed alongside the component.
+
+### Cleanup
+
+Root-scoped services live for the application's full lifetime — `ngOnDestroy` fires only at app shutdown. If you scope the service to a component (`providers: [SpreadsheetService]`), implement `OnDestroy` to release the engine:
+
+```typescript
+import { Injectable, OnDestroy } from '@angular/core';
+
+@Injectable()
+export class SpreadsheetService implements OnDestroy {
+  // ...
 
-### Why `DestroyRef` instead of `ngOnDestroy`
+  ngOnDestroy() {
+    this.hf.destroy();
+  }
+}
+```
 
-Services registered with `providedIn: 'root'` live for the lifetime of the application — Angular only invokes `ngOnDestroy` when the app itself is torn down. Using `DestroyRef.onDestroy` keeps cleanup behaviour consistent whether the service is root-scoped or component-scoped.
+For a scope-agnostic alternative, use `DestroyRef` — it fires at the right moment whether the service is root-scoped or component-scoped:
 
-### RxJS variant
+```typescript
+import { DestroyRef, inject } from '@angular/core';
 
-If your project uses RxJS and `async` pipes rather than signals, swap `signal` for `BehaviorSubject`:
+constructor() {
+  // ...
+  inject(DestroyRef).onDestroy(() => this.hf.destroy());
+}
+```
+
+### Signals variant (Angular 17+)
+
+If your project targets Angular 17 or later and uses standalone components, you can replace `BehaviorSubject` with `signal` and drop the `async` pipe:
 
 ```typescript
-import { DestroyRef, Injectable, inject } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
+// spreadsheet.service.ts
+import { DestroyRef, Injectable, inject, signal } from '@angular/core';
 import { CellValue, HyperFormula, RawCellContent } from 'hyperformula';
 
 @Injectable({ providedIn: 'root' })
 export class SpreadsheetService {
   private readonly hf = HyperFormula.buildFromArray([/* data */], { licenseKey: 'gpl-v3' });
-  readonly values$ = new BehaviorSubject<CellValue[][]>(this.hf.getSheetValues(0));
+  readonly values = signal<CellValue[][]>(this.hf.getSheetValues(0));
 
   constructor() {
     inject(DestroyRef).onDestroy(() => this.hf.destroy());
@@ -88,26 +131,31 @@ export class SpreadsheetService {
 
   updateCell(row: number, col: number, value: RawCellContent) {
     this.hf.setCellContents({ sheet: 0, row, col }, value);
-    this.values$.next(this.hf.getSheetValues(0));
+    this.values.set(this.hf.getSheetValues(0));
   }
 }
 ```
 
-Bind with `values$ | async` in the template. In standalone components, add `AsyncPipe` to the component's `imports` array:
+Use the service from a standalone component with `ChangeDetectionStrategy.OnPush`:
 
 ```typescript
-import { AsyncPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { SpreadsheetService } from './spreadsheet.service';
 
 @Component({
   standalone: true,
-  imports: [AsyncPipe],
-  // …
+  selector: 'app-spreadsheet',
+  templateUrl: './spreadsheet.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
+export class SpreadsheetComponent {
+  readonly spreadsheet = inject(SpreadsheetService);
+}
 ```
 
 ### Keeping recalculation outside the Angular zone
 
-For large sheets or frequent edits, HyperFormula's synchronous recalculation can trigger unnecessary change-detection cycles. Wrap heavy calls with `NgZone.runOutsideAngular` and re-enter the zone only when publishing new values to signals or subjects:
+For large sheets or frequent edits, HyperFormula's synchronous recalculation can trigger unnecessary change-detection cycles. Wrap heavy calls with `NgZone.runOutsideAngular` and re-enter the zone only when publishing new values:
 
 ```typescript
 // inside SpreadsheetService
@@ -118,8 +166,8 @@ private readonly ngZone = inject(NgZone);
 updateCell(row: number, col: number, value: RawCellContent) {
   this.ngZone.runOutsideAngular(() => {
     this.hf.setCellContents({ sheet: 0, row, col }, value);
-    const next = this.hf.getSheetValues(0);
-    this.ngZone.run(() => this.values.set(next));
+    const next = this.hf.getSheetValues(0) as CellValue[][];
+    this.ngZone.run(() => this._values.next(next));
   });
 }
 ```
diff --git a/docs/guide/integration-with-svelte.md b/docs/guide/integration-with-svelte.md
index 7bb07e1e6..b2c35e320 100644
--- a/docs/guide/integration-with-svelte.md
+++ b/docs/guide/integration-with-svelte.md
@@ -8,9 +8,62 @@ Install with `npm install hyperformula`. For other options, see the [client-side
 The primary snippet below assumes a browser environment. If you use SvelteKit with default SSR, skip to [Server-side rendering](#server-side-rendering-sveltekit) — `HyperFormula.buildFromArray` at `<script>` top level will crash on the server.
 :::
 
-## Basic usage (Svelte 5, with runes)
+## Basic usage
 
-Declare the engine at the top of `<script>` so it lives for the component's lifetime. Hold derived data in a `$state` rune so reassignment triggers re-rendering. Release the engine with `onDestroy`.
+Declare the engine at the top of `<script>` so it lives for the component's lifetime. Call `getCellValue` on demand and display results in the template. Release the engine with `onDestroy`.
+
+```svelte
+<script>
+  import { onDestroy } from 'svelte';
+  import { HyperFormula } from 'hyperformula';
+
+  const data = [
+    [1, 2, '=A1+B1'],
+    // your data rows go here
+  ];
+
+  const hf = HyperFormula.buildFromArray(data, {
+    licenseKey: 'gpl-v3',
+    // more configuration options go here
+  });
+
+  const sheetId = 0;
+  let result = '';
+
+  function calculate() {
+    result = hf.getCellValue({ sheet: sheetId, row: 0, col: 2 });
+  }
+
+  onDestroy(() => hf.destroy());
+</script>
+
+<button on:click={calculate}>Calculate</button>
+{#if result !== ''}
+  <p>Result: <strong>{result}</strong></p>
+{/if}
+
+<table>
+  <tbody>
+    {#each data as row, r}
+      <tr>
+        {#each row as cell, c}
+          <td>
+            {#if hf.doesCellHaveFormula({ sheet: sheetId, row: r, col: c })}
+              {hf.getCellFormula({ sheet: sheetId, row: r, col: c })}
+            {:else}
+              {hf.getCellValue({ sheet: sheetId, row: r, col: c })}
+            {/if}
+          </td>
+        {/each}
+      </tr>
+    {/each}
+  </tbody>
+</table>
+```
+
+### Svelte 5 (runes)
+
+Under Svelte 5, hold the sheet values in a `$state` rune so reassignment triggers re-rendering. Replace `on:click` with the `onclick` attribute:
 
 ```svelte
 <script lang="ts">
@@ -54,22 +107,17 @@ Declare the engine at the top of `<script>` so it lives for the component's life
 </table>
 ```
 
-### Svelte 4
-
-Under Svelte 4, replace `let values = $state<CellValue[][]>(...)` with plain `let values: CellValue[][] = ...`. The compiler transforms `let` reassignments into reactive updates automatically. Use `on:change` (colon syntax) instead of the Svelte 5 `onchange` attribute. Everything else — including `onDestroy` — is unchanged.
-
 ## Server-side rendering (SvelteKit)
 
 HyperFormula depends on browser-only APIs. In SvelteKit, initialize the engine inside `onMount` so the code never runs during SSR:
 
 ```svelte
-<script lang="ts">
-  // Svelte 5 + SvelteKit
+<script>
+  // Svelte 4 + SvelteKit
   import { onMount, onDestroy } from 'svelte';
-  import type { HyperFormula as HyperFormulaType, CellValue } from 'hyperformula';
 
-  let hf: HyperFormulaType | null = null;
-  let values = $state<CellValue[][]>([]);
+  let hf;
+  let result = '';
 
   onMount(async () => {
     const { HyperFormula } = await import('hyperformula');
@@ -80,20 +128,23 @@ HyperFormula depends on browser-only APIs. In SvelteKit, initialize the engine i
       ],
       { licenseKey: 'gpl-v3' }
     );
-    values = hf.getSheetValues(0);
   });
 
-  function updateCell(row: number, col: number, value: RawCellContent) {
+  function calculate() {
     if (!hf) return;
-    hf.setCellContents({ sheet: 0, row, col }, value);
-    values = hf.getSheetValues(0);
+    result = hf.getCellValue({ sheet: 0, row: 0, col: 2 });
   }
 
   onDestroy(() => hf?.destroy());
 </script>
+
+<button on:click={calculate}>Calculate</button>
+{#if result !== ''}
+  <p>Result: <strong>{result}</strong></p>
+{/if}
 ```
 
-Wire `updateCell` in the template the same way as in the Basic usage section (`<input ... onchange=...>`). For Svelte 4, replace `let values = $state<CellValue[][]>([])` with `let values: CellValue[][] = []`; the rest is identical. As an alternative, guard the top-level init with `if (browser)` from `$app/environment`.
+For Svelte 5 + SvelteKit, replace `let result = ''` with `let result = $state('')` and `on:click` with `onclick`. As an alternative, guard the top-level init with `if (browser)` from `$app/environment`.
 
 ## Next steps
 

From 655274a110fc5a070b59a124c9a9cc2d99f76791 Mon Sep 17 00:00:00 2001
From: marcin-kordas-hoc <marcin.kordas@handsontable.com>
Date: Wed, 15 Apr 2026 09:39:40 +0000
Subject: [PATCH 09/15] Docs: fix P0/P1 issues found in framework guide expert
 review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

React: fix Next.js SSR pattern — 'use client' belongs in the component
file, not on page.tsx; server page uses dynamic(..., { ssr: false })

Angular: add CommonModule/standalone imports for *ngFor + async pipe;
add @for template for signals variant; add inject() context note

Vue: replace shallowRef with ref in Nuxt SSR snippet (shallowRef vs
markRaw contradiction); add hf.off() teardown to valuesUpdated example;
remove hf from Pinia store return value (devtools serialisation risk)

Svelte: fix CellValue type for result variable; fix SSR snippet to use
onMount return for cleanup instead of separate onDestroy

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/guide/integration-with-angular.md | 22 ++++++++++++++++++++--
 docs/guide/integration-with-react.md   | 11 ++++++++---
 docs/guide/integration-with-svelte.md  | 18 ++++++++++--------
 docs/guide/integration-with-vue.md     | 18 ++++++++++++------
 4 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/docs/guide/integration-with-angular.md b/docs/guide/integration-with-angular.md
index 819b1fee4..ec42fa022 100644
--- a/docs/guide/integration-with-angular.md
+++ b/docs/guide/integration-with-angular.md
@@ -47,6 +47,7 @@ Consume the service from a component and bind `values$ | async` in the template:
 ```typescript
 // spreadsheet.component.ts
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { Observable } from 'rxjs';
 import { SpreadsheetService } from './spreadsheet.service';
 import { type CellValue } from 'hyperformula';
@@ -54,6 +55,10 @@ import { type CellValue } from 'hyperformula';
 @Component({
   selector: 'app-spreadsheet',
   templateUrl: './spreadsheet.component.html',
+  // For NgModule-based apps, declare this component in AppModule and import
+  // CommonModule there instead of in the component itself.
+  imports: [CommonModule],
+  standalone: true,
 })
 export class SpreadsheetComponent {
   values$: Observable<CellValue[][]>;
@@ -100,7 +105,7 @@ export class SpreadsheetService implements OnDestroy {
 }
 ```
 
-For a scope-agnostic alternative, use `DestroyRef` — it fires at the right moment whether the service is root-scoped or component-scoped:
+For a scope-agnostic alternative, use `DestroyRef` — it fires at the right moment whether the service is root-scoped or component-scoped. Call `inject()` synchronously inside the constructor (or as a field initializer); it cannot be called in lifecycle hooks or async callbacks:
 
 ```typescript
 import { DestroyRef, inject } from '@angular/core';
@@ -136,7 +141,7 @@ export class SpreadsheetService {
 }
 ```
 
-Use the service from a standalone component with `ChangeDetectionStrategy.OnPush`:
+Use the service from a standalone component with `ChangeDetectionStrategy.OnPush`. Read `spreadsheet.values()` in the template — Angular automatically re-renders when the signal changes:
 
 ```typescript
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
@@ -153,6 +158,19 @@ export class SpreadsheetComponent {
 }
 ```
 
+```html
+<!-- spreadsheet.component.html (signals variant, Angular 17+) -->
+<table>
+  @for (row of spreadsheet.values(); track $index; let r = $index) {
+    <tr>
+      @for (cell of row; track $index) {
+        <td>{{ cell }}</td>
+      }
+    </tr>
+  }
+</table>
+```
+
 ### Keeping recalculation outside the Angular zone
 
 For large sheets or frequent edits, HyperFormula's synchronous recalculation can trigger unnecessary change-detection cycles. Wrap heavy calls with `NgZone.runOutsideAngular` and re-enter the zone only when publishing new values:
diff --git a/docs/guide/integration-with-react.md b/docs/guide/integration-with-react.md
index 6bc6d9767..62141f839 100644
--- a/docs/guide/integration-with-react.md
+++ b/docs/guide/integration-with-react.md
@@ -79,13 +79,18 @@ In development, React 18 runs effects twice (mount → unmount → mount) to sur
 
 ### Server-side rendering (Next.js)
 
-HyperFormula depends on browser-only APIs. In the Next.js App Router, mark the file with `'use client'` and load the component only on the client:
+HyperFormula depends on browser-only APIs. Mark `SpreadsheetComponent.tsx` with `'use client'`, then load it lazily from a **server** page component using `dynamic(..., { ssr: false })`:
 
 ```tsx
-// app/spreadsheet/page.tsx
+// app/spreadsheet/SpreadsheetComponent.tsx
 'use client';
+// ... component definition as above
+```
 
+```tsx
+// app/spreadsheet/page.tsx  ← server component, no 'use client'
 import dynamic from 'next/dynamic';
+
 const SpreadsheetComponent = dynamic(
   () => import('./SpreadsheetComponent').then((m) => m.SpreadsheetComponent),
   { ssr: false }
@@ -96,7 +101,7 @@ export default function Page() {
 }
 ```
 
-In the Pages Router, the same `dynamic(..., { ssr: false })` pattern works without `'use client'`.
+Putting `'use client'` on `page.tsx` itself would make the entire page a client component — the point is to keep the page server-rendered and only hydrate the spreadsheet widget on the client. In the Pages Router, the same `dynamic(..., { ssr: false })` pattern works without `'use client'`.
 
 ## Next steps
 
diff --git a/docs/guide/integration-with-svelte.md b/docs/guide/integration-with-svelte.md
index b2c35e320..d9599bf83 100644
--- a/docs/guide/integration-with-svelte.md
+++ b/docs/guide/integration-with-svelte.md
@@ -28,7 +28,8 @@ Declare the engine at the top of `<script>` so it lives for the component's life
   });
 
   const sheetId = 0;
-  let result = '';
+  /** @type {import('hyperformula').CellValue} */
+  let result = null;
 
   function calculate() {
     result = hf.getCellValue({ sheet: sheetId, row: 0, col: 2 });
@@ -38,7 +39,7 @@ Declare the engine at the top of `<script>` so it lives for the component's life
 </script>
 
 <button on:click={calculate}>Calculate</button>
-{#if result !== ''}
+{#if result !== null}
   <p>Result: <strong>{result}</strong></p>
 {/if}
 
@@ -114,10 +115,11 @@ HyperFormula depends on browser-only APIs. In SvelteKit, initialize the engine i
 ```svelte
 <script>
   // Svelte 4 + SvelteKit
-  import { onMount, onDestroy } from 'svelte';
+  import { onMount } from 'svelte';
 
   let hf;
-  let result = '';
+  /** @type {import('hyperformula').CellValue} */
+  let result = null;
 
   onMount(async () => {
     const { HyperFormula } = await import('hyperformula');
@@ -128,23 +130,23 @@ HyperFormula depends on browser-only APIs. In SvelteKit, initialize the engine i
       ],
       { licenseKey: 'gpl-v3' }
     );
+    // Return a cleanup function — this is the correct teardown pattern in onMount.
+    return () => hf?.destroy();
   });
 
   function calculate() {
     if (!hf) return;
     result = hf.getCellValue({ sheet: 0, row: 0, col: 2 });
   }
-
-  onDestroy(() => hf?.destroy());
 </script>
 
 <button on:click={calculate}>Calculate</button>
-{#if result !== ''}
+{#if result !== null}
   <p>Result: <strong>{result}</strong></p>
 {/if}
 ```
 
-For Svelte 5 + SvelteKit, replace `let result = ''` with `let result = $state('')` and `on:click` with `onclick`. As an alternative, guard the top-level init with `if (browser)` from `$app/environment`.
+For Svelte 5 + SvelteKit, replace `let result = null` with `let result: CellValue = $state(null)` and `on:click` with `onclick`. As an alternative, guard the top-level init with `if (browser)` from `$app/environment`.
 
 ## Next steps
 
diff --git a/docs/guide/integration-with-vue.md b/docs/guide/integration-with-vue.md
index 3e6970450..cc45b1362 100644
--- a/docs/guide/integration-with-vue.md
+++ b/docs/guide/integration-with-vue.md
@@ -53,14 +53,15 @@ HyperFormula depends on browser-only APIs. In Nuxt, render the spreadsheet on th
 
 ```vue
 <script setup lang="ts">
-import { markRaw, onMounted, onUnmounted, ref, shallowRef } from 'vue';
+import { markRaw, onMounted, onUnmounted, ref } from 'vue';
 import type { HyperFormula as HyperFormulaType, CellValue } from 'hyperformula';
 
-const hf = shallowRef<HyperFormulaType | null>(null);
+const hf = ref<HyperFormulaType | null>(null);
 const values = ref<CellValue[][]>([]);
 
 onMounted(async () => {
   const { HyperFormula } = await import('hyperformula');
+  // markRaw must be applied before the instance is assigned to any ref or reactive
   const instance = markRaw(HyperFormula.buildFromArray([/* data */], { licenseKey: 'gpl-v3' }));
   hf.value = instance;
   values.value = instance.getSheetValues(0);
@@ -72,12 +73,15 @@ onUnmounted(() => hf.value?.destroy());
 
 ### Reacting to internal changes
 
-If you mutate the engine from multiple places (not just one `updateCell`), subscribe to HyperFormula's `valuesUpdated` event once and refresh `values.value` from the handler rather than calling `getSheetValues` after every mutation:
+If you mutate the engine from multiple places (not just one `updateCell`), subscribe to HyperFormula's `valuesUpdated` event once and refresh `values.value` from the handler rather than calling `getSheetValues` after every mutation. Always remove the listener in `onUnmounted` to avoid stale closures:
 
 ```typescript
-hf.on('valuesUpdated', () => {
+function onValuesUpdated() {
   values.value = hf.getSheetValues(0);
-});
+}
+
+hf.on('valuesUpdated', onValuesUpdated);
+onUnmounted(() => hf.off('valuesUpdated', onValuesUpdated));
 ```
 
 ### Sharing the instance across components (Pinia)
@@ -90,6 +94,8 @@ import { markRaw, ref } from 'vue';
 import { HyperFormula, type CellValue, type RawCellContent } from 'hyperformula';
 
 export const useSpreadsheetStore = defineStore('spreadsheet', () => {
+  // Keep hf private — exposing the raw instance lets callers bypass the store's
+  // updateCell and also risks Pinia devtools trying to serialise it.
   const hf = markRaw(HyperFormula.buildFromArray([/* data */], { licenseKey: 'gpl-v3' }));
   const values = ref<CellValue[][]>(hf.getSheetValues(0));
 
@@ -98,7 +104,7 @@ export const useSpreadsheetStore = defineStore('spreadsheet', () => {
     values.value = hf.getSheetValues(0);
   }
 
-  return { hf, values, updateCell };
+  return { values, updateCell };
 });
 ```
 

From b2cb63d6a3923ec8395c7d768922c6d965e7ba25 Mon Sep 17 00:00:00 2001
From: marcin-kordas-hoc <marcin.kordas@handsontable.com>
Date: Thu, 16 Apr 2026 08:57:30 +0000
Subject: [PATCH 10/15] Docs: align guides with Stackblitz demos and fix review
 findings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Vue: rewrite primary snippet to use class wrapper pattern matching
the vue-3-demo on Stackblitz. markRaw moved to Notes as alternative.

Angular: remove unnecessary `as CellValue[][]` casts (getSheetValues
already returns this type).

React: remove try/catch from handleCellEdit for consistency — no demo
uses error handling around setCellContents.

custom-functions.md: fix VuePress template syntax (${}→{{}}) so the
Stackblitz link renders the build date correctly.

AGENTS.md: update framework table to match actual guide primary
patterns (Angular=BehaviorSubject, Vue=class wrapper, Svelte=Svelte 4).
---
 AGENTS.md                              | 10 +--
 docs/guide/custom-functions.md         |  2 +-
 docs/guide/integration-with-angular.md |  6 +-
 docs/guide/integration-with-react.md   | 10 +--
 docs/guide/integration-with-vue.md     | 91 ++++++++++++++++++++------
 5 files changed, 82 insertions(+), 37 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index f2d69beb3..b2d033894 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -26,15 +26,15 @@ When helping users integrate HyperFormula with a framework, follow these idiomat
 | Framework | Instance storage | Cleanup | Reactive bridge | SSR guard |
 |---|---|---|---|---|
 | React | `useRef<HyperFormula>` | `useEffect` return | `useState<CellValue[][]>` | `dynamic(..., { ssr: false })` |
-| Angular | `@Injectable` service field | `inject(DestroyRef).onDestroy` | `signal<CellValue[][]>` | N/A (no default SSR) |
-| Vue 3 | `markRaw(HyperFormula.build...)` | `onUnmounted` | `ref<CellValue[][]>` | `onMounted` + dynamic import |
-| Svelte 5 | top-level `const` in `<script>` | `onDestroy` | `$state<CellValue[][]>` | `onMount` + dynamic import |
+| Angular | `@Injectable` service with `BehaviorSubject` | `ngOnDestroy` (component-scoped) | `async` pipe | N/A (no default SSR) |
+| Vue 3 | Class wrapper with private HF field | `onUnmounted` | `ref<CellValue[][]>` | `onMounted` + dynamic import |
+| Svelte | top-level `const` in `<script>` | `onDestroy` | plain `let` (Svelte 4) | `onMount` + dynamic import |
 
 Critical rules:
-- **Vue:** always `markRaw()` the HF instance — Vue's Proxy breaks HF internal state
+- **Vue:** keep the HF instance inside a wrapper class or use `markRaw()` — Vue's Proxy breaks HF internal state
 - **Svelte:** always `onDestroy(() => hf.destroy())` — omitting it leaks the engine
 - **React:** pattern survives `StrictMode` double-invocation (mount→unmount→mount)
-- **Angular:** `providedIn: 'root'` services don't fire `ngOnDestroy` until app shutdown — use `DestroyRef`
+- **Angular:** `providedIn: 'root'` services don't fire `ngOnDestroy` until app shutdown — use `DestroyRef` for scope-agnostic cleanup
 - **SSR:** HF depends on browser-only APIs — guard with framework's client-only mechanism
 
 Full guide with TypeScript snippets: `docs/guide/integration-with-{react,angular,vue,svelte}.md`
diff --git a/docs/guide/custom-functions.md b/docs/guide/custom-functions.md
index 68eedd9a4..89373fd13 100644
--- a/docs/guide/custom-functions.md
+++ b/docs/guide/custom-functions.md
@@ -358,7 +358,7 @@ it('returns a VALUE error if the range argument contains a string', () => {
 
 ## Working demo
 
-Explore the full working example on [Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/custom-functions?v=${$page.buildDateURIEncoded}).
+Explore the full working example on [Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/custom-functions?v={{ $page.buildDateURIEncoded }}).
 
 This demo contains the implementation of both the
 [`GREET`](#add-a-simple-custom-function) and
diff --git a/docs/guide/integration-with-angular.md b/docs/guide/integration-with-angular.md
index ec42fa022..cb269021e 100644
--- a/docs/guide/integration-with-angular.md
+++ b/docs/guide/integration-with-angular.md
@@ -32,12 +32,12 @@ export class SpreadsheetService {
         // more configuration options go here
       }
     );
-    this._values.next(this.hf.getSheetValues(0) as CellValue[][]);
+    this._values.next(this.hf.getSheetValues(0));
   }
 
   updateCell(row: number, col: number, value: RawCellContent) {
     this.hf.setCellContents({ sheet: 0, row, col }, value);
-    this._values.next(this.hf.getSheetValues(0) as CellValue[][]);
+    this._values.next(this.hf.getSheetValues(0));
   }
 }
 ```
@@ -184,7 +184,7 @@ private readonly ngZone = inject(NgZone);
 updateCell(row: number, col: number, value: RawCellContent) {
   this.ngZone.runOutsideAngular(() => {
     this.hf.setCellContents({ sheet: 0, row, col }, value);
-    const next = this.hf.getSheetValues(0) as CellValue[][];
+    const next = this.hf.getSheetValues(0);
     this.ngZone.run(() => this._values.next(next));
   });
 }
diff --git a/docs/guide/integration-with-react.md b/docs/guide/integration-with-react.md
index 62141f839..d55918cf4 100644
--- a/docs/guide/integration-with-react.md
+++ b/docs/guide/integration-with-react.md
@@ -38,14 +38,8 @@ export function SpreadsheetComponent() {
 
   function handleCellEdit(row: number, col: number, newValue: RawCellContent) {
     if (!hfRef.current) return;
-    try {
-      hfRef.current.setCellContents({ sheet: 0, row, col }, newValue);
-      setValues(hfRef.current.getSheetValues(0));
-    } catch (error) {
-      // setCellContents can throw on invalid addresses or sheet-size limits.
-      // Handle or surface the error according to your app's UX.
-      console.error(error);
-    }
+    hfRef.current.setCellContents({ sheet: 0, row, col }, newValue);
+    setValues(hfRef.current.getSheetValues(0));
   }
 
   return (
diff --git a/docs/guide/integration-with-vue.md b/docs/guide/integration-with-vue.md
index cc45b1362..d26c7f617 100644
--- a/docs/guide/integration-with-vue.md
+++ b/docs/guide/integration-with-vue.md
@@ -1,39 +1,62 @@
 # Integration with Vue
 
-The HyperFormula API is identical in a Vue 3 app and in plain JavaScript. What changes is how you keep the engine out of Vue's reactivity system (critical) and how you surface its values into the template.
+The HyperFormula API is identical in a Vue 3 app and in plain JavaScript. What changes is how you keep the engine out of Vue's reactivity system and how you surface its values into the template.
 
 Install with `npm install hyperformula`. For other options, see the [client-side installation](client-side-installation.md) section.
 
 ## Basic usage
 
-Wrap the HyperFormula instance in `markRaw` so Vue does not convert it into a reactive proxy (see [Troubleshooting](#vue-reactivity-issues) below). Hold derived data in `ref` so the template updates when you reassign the ref's `.value`.
+Wrap the HyperFormula instance inside a plain class so it stays outside Vue's reactivity system (see [Troubleshooting](#vue-reactivity-issues) below for why this matters). Hold derived data in `ref` so the template updates when you reassign the ref's `.value`.
 
-```vue
-<script setup lang="ts">
-import { markRaw, onUnmounted, ref } from 'vue';
+```typescript
+// spreadsheet-provider.ts
 import { HyperFormula, type CellValue, type RawCellContent } from 'hyperformula';
 
-const hf = markRaw(
-  HyperFormula.buildFromArray(
-    [
-      [1, 2, '=A1+B1'],
-      // your data rows go here
-    ],
-    {
+export class SpreadsheetProvider {
+  private hf: HyperFormula;
+
+  constructor(data: RawCellContent[][]) {
+    this.hf = HyperFormula.buildFromArray(data, {
       licenseKey: 'gpl-v3',
       // more configuration options go here
-    }
-  )
-);
+    });
+  }
 
-const values = ref<CellValue[][]>(hf.getSheetValues(0));
+  getValues(): CellValue[][] {
+    return this.hf.getSheetValues(0);
+  }
 
-function updateCell(row: number, col: number, value: RawCellContent) {
-  hf.setCellContents({ sheet: 0, row, col }, value);
-  values.value = hf.getSheetValues(0);
+  updateCell(row: number, col: number, value: RawCellContent) {
+    this.hf.setCellContents({ sheet: 0, row, col }, value);
+  }
+
+  destroy() {
+    this.hf.destroy();
+  }
 }
+```
 
-onUnmounted(() => hf.destroy());
+Use the class from a component with `<script setup>`:
+
+```vue
+<script setup lang="ts">
+import { onUnmounted, ref } from 'vue';
+import type { CellValue } from 'hyperformula';
+import { SpreadsheetProvider } from './spreadsheet-provider';
+
+const provider = new SpreadsheetProvider([
+  [1, 2, '=A1+B1'],
+  // your data rows go here
+]);
+
+const values = ref<CellValue[][]>(provider.getValues());
+
+function handleUpdate(row: number, col: number, value: string) {
+  provider.updateCell(row, col, value);
+  values.value = provider.getValues();
+}
+
+onUnmounted(() => provider.destroy());
 </script>
 
 <template>
@@ -45,8 +68,36 @@ onUnmounted(() => hf.destroy());
 </template>
 ```
 
+The class keeps the HyperFormula instance as a private field, so Vue's reactivity Proxy never reaches it. This is the same pattern used in the [Vue 3 demo](#demo).
+
 ## Notes
 
+### Using `markRaw` instead of a class wrapper
+
+If you prefer to use the HyperFormula instance directly in `<script setup>` without a wrapper class, apply [`markRaw`](https://vuejs.org/api/reactivity-advanced.html#markraw) to opt it out of Vue's reactivity:
+
+```vue
+<script setup lang="ts">
+import { markRaw, onUnmounted, ref } from 'vue';
+import { HyperFormula, type CellValue, type RawCellContent } from 'hyperformula';
+
+const hf = markRaw(
+  HyperFormula.buildFromArray([/* data */], { licenseKey: 'gpl-v3' })
+);
+
+const values = ref<CellValue[][]>(hf.getSheetValues(0));
+
+function updateCell(row: number, col: number, value: RawCellContent) {
+  hf.setCellContents({ sheet: 0, row, col }, value);
+  values.value = hf.getSheetValues(0);
+}
+
+onUnmounted(() => hf.destroy());
+</script>
+```
+
+`markRaw` is essential when the instance is exposed directly — without it, Vue wraps it in a Proxy that breaks internal state. The class wrapper approach avoids this because the instance stays private.
+
 ### Server-side rendering (Nuxt)
 
 HyperFormula depends on browser-only APIs. In Nuxt, render the spreadsheet on the client only — wrap the component with `<ClientOnly>` or instantiate the instance inside `onMounted` rather than at the top of `<script setup>`:

From 76bcfdd28c1371649cc8d77d2fd0880336e17e21 Mon Sep 17 00:00:00 2001
From: marcin-kordas-hoc <marcin.kordas@handsontable.com>
Date: Thu, 16 Apr 2026 09:57:21 +0000
Subject: [PATCH 11/15] Docs: fix Stackblitz links using Vue v-bind instead of
 template interpolation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

{{ $page.buildDateURIEncoded }} inside markdown link syntax [text](url{{ }})
breaks markdown-it parsing — links render as plain text instead of clickable
links. Switch to <a :href="..."> with Vue v-bind which VuePress handles
correctly since page data is available in template scope.
---
 docs/guide/custom-functions.md         | 2 +-
 docs/guide/integration-with-angular.md | 2 +-
 docs/guide/integration-with-react.md   | 2 +-
 docs/guide/integration-with-svelte.md  | 2 +-
 docs/guide/integration-with-vue.md     | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/guide/custom-functions.md b/docs/guide/custom-functions.md
index 89373fd13..e2253d894 100644
--- a/docs/guide/custom-functions.md
+++ b/docs/guide/custom-functions.md
@@ -358,7 +358,7 @@ it('returns a VALUE error if the range argument contains a string', () => {
 
 ## Working demo
 
-Explore the full working example on [Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/custom-functions?v={{ $page.buildDateURIEncoded }}).
+Explore the full working example on <a :href="'https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/custom-functions?v=' + $page.buildDateURIEncoded">Stackblitz</a>.
 
 This demo contains the implementation of both the
 [`GREET`](#add-a-simple-custom-function) and
diff --git a/docs/guide/integration-with-angular.md b/docs/guide/integration-with-angular.md
index cb269021e..da2544543 100644
--- a/docs/guide/integration-with-angular.md
+++ b/docs/guide/integration-with-angular.md
@@ -199,4 +199,4 @@ updateCell(row: number, col: number, value: RawCellContent) {
 
 ## Demo
 
-For a more advanced example, check out the [Angular demo on Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/angular-demo?v={{ $page.buildDateURIEncoded }}).
+For a more advanced example, check out the <a :href="'https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/angular-demo?v=' + $page.buildDateURIEncoded">Angular demo on Stackblitz</a>.
diff --git a/docs/guide/integration-with-react.md b/docs/guide/integration-with-react.md
index d55918cf4..fb1d25717 100644
--- a/docs/guide/integration-with-react.md
+++ b/docs/guide/integration-with-react.md
@@ -106,4 +106,4 @@ Putting `'use client'` on `page.tsx` itself would make the entire page a client
 
 ## Demo
 
-For a more advanced example, check out the [React demo on Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/react-demo?v={{ $page.buildDateURIEncoded }}).
+For a more advanced example, check out the <a :href="'https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/react-demo?v=' + $page.buildDateURIEncoded">React demo on Stackblitz</a>.
diff --git a/docs/guide/integration-with-svelte.md b/docs/guide/integration-with-svelte.md
index d9599bf83..d961c850f 100644
--- a/docs/guide/integration-with-svelte.md
+++ b/docs/guide/integration-with-svelte.md
@@ -157,4 +157,4 @@ For Svelte 5 + SvelteKit, replace `let result = null` with `let result: CellValu
 
 ## Demo
 
-For a more advanced example, check out the [Svelte demo on Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/svelte-demo?v={{ $page.buildDateURIEncoded }}).
+For a more advanced example, check out the <a :href="'https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/svelte-demo?v=' + $page.buildDateURIEncoded">Svelte demo on Stackblitz</a>.
diff --git a/docs/guide/integration-with-vue.md b/docs/guide/integration-with-vue.md
index d26c7f617..a52daee07 100644
--- a/docs/guide/integration-with-vue.md
+++ b/docs/guide/integration-with-vue.md
@@ -193,7 +193,7 @@ const hfInstance = markRaw(
 
 ## Demo
 
-For a more advanced example, check out the [Vue 3 demo on Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/vue-3-demo?v={{ $page.buildDateURIEncoded }}).
+For a more advanced example, check out the <a :href="'https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/vue-3-demo?v=' + $page.buildDateURIEncoded">Vue 3 demo on Stackblitz</a>.
 
 ::: tip
 This demo uses the [Vue 3](https://v3.vuejs.org/) framework. If you are looking for an example using Vue 2, check out the [code on GitHub](https://github.com/handsontable/hyperformula-demos/tree/2.5.x/vue-demo).

From f8dfa07e4bbcdee6a6ffac471d303ac747897fd5 Mon Sep 17 00:00:00 2001
From: marcin-kordas-hoc <marcin.kordas@handsontable.com>
Date: Thu, 16 Apr 2026 10:13:59 +0000
Subject: [PATCH 12/15] Docs: remove untested framework patterns not present in
 demos

Per Kuba's review feedback: snippets must match what's in the Stackblitz
demos so we can guarantee they work correctly. Removed all patterns that
have never been tested with HyperFormula:

Angular: removed Signals variant (signal, inject, DestroyRef, OnPush,
@for), NgZone.runOutsideAngular section.

Svelte: removed Svelte 5 runes ($state) section.

Vue: removed markRaw alternative, Nuxt SSR with dynamic import,
valuesUpdated event listener, Pinia store sections.

These patterns can be re-added once validated by a framework consultant
or included in updated demos.
---
 AGENTS.md                              |  4 +-
 docs/guide/integration-with-angular.md | 84 -------------------------
 docs/guide/integration-with-svelte.md  | 47 --------------
 docs/guide/integration-with-vue.md     | 85 +-------------------------
 4 files changed, 3 insertions(+), 217 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index b2d033894..68b77900a 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -31,10 +31,10 @@ When helping users integrate HyperFormula with a framework, follow these idiomat
 | Svelte | top-level `const` in `<script>` | `onDestroy` | plain `let` (Svelte 4) | `onMount` + dynamic import |
 
 Critical rules:
-- **Vue:** keep the HF instance inside a wrapper class or use `markRaw()` — Vue's Proxy breaks HF internal state
+- **Vue:** keep the HF instance inside a wrapper class — Vue's Proxy breaks HF internal state (see Troubleshooting in guide)
 - **Svelte:** always `onDestroy(() => hf.destroy())` — omitting it leaks the engine
 - **React:** pattern survives `StrictMode` double-invocation (mount→unmount→mount)
-- **Angular:** `providedIn: 'root'` services don't fire `ngOnDestroy` until app shutdown — use `DestroyRef` for scope-agnostic cleanup
+- **Angular:** `providedIn: 'root'` services live for the app lifetime — scope to component for per-feature cleanup
 - **SSR:** HF depends on browser-only APIs — guard with framework's client-only mechanism
 
 Full guide with TypeScript snippets: `docs/guide/integration-with-{react,angular,vue,svelte}.md`
diff --git a/docs/guide/integration-with-angular.md b/docs/guide/integration-with-angular.md
index da2544543..14e7477e0 100644
--- a/docs/guide/integration-with-angular.md
+++ b/docs/guide/integration-with-angular.md
@@ -105,90 +105,6 @@ export class SpreadsheetService implements OnDestroy {
 }
 ```
 
-For a scope-agnostic alternative, use `DestroyRef` — it fires at the right moment whether the service is root-scoped or component-scoped. Call `inject()` synchronously inside the constructor (or as a field initializer); it cannot be called in lifecycle hooks or async callbacks:
-
-```typescript
-import { DestroyRef, inject } from '@angular/core';
-
-constructor() {
-  // ...
-  inject(DestroyRef).onDestroy(() => this.hf.destroy());
-}
-```
-
-### Signals variant (Angular 17+)
-
-If your project targets Angular 17 or later and uses standalone components, you can replace `BehaviorSubject` with `signal` and drop the `async` pipe:
-
-```typescript
-// spreadsheet.service.ts
-import { DestroyRef, Injectable, inject, signal } from '@angular/core';
-import { CellValue, HyperFormula, RawCellContent } from 'hyperformula';
-
-@Injectable({ providedIn: 'root' })
-export class SpreadsheetService {
-  private readonly hf = HyperFormula.buildFromArray([/* data */], { licenseKey: 'gpl-v3' });
-  readonly values = signal<CellValue[][]>(this.hf.getSheetValues(0));
-
-  constructor() {
-    inject(DestroyRef).onDestroy(() => this.hf.destroy());
-  }
-
-  updateCell(row: number, col: number, value: RawCellContent) {
-    this.hf.setCellContents({ sheet: 0, row, col }, value);
-    this.values.set(this.hf.getSheetValues(0));
-  }
-}
-```
-
-Use the service from a standalone component with `ChangeDetectionStrategy.OnPush`. Read `spreadsheet.values()` in the template — Angular automatically re-renders when the signal changes:
-
-```typescript
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { SpreadsheetService } from './spreadsheet.service';
-
-@Component({
-  standalone: true,
-  selector: 'app-spreadsheet',
-  templateUrl: './spreadsheet.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class SpreadsheetComponent {
-  readonly spreadsheet = inject(SpreadsheetService);
-}
-```
-
-```html
-<!-- spreadsheet.component.html (signals variant, Angular 17+) -->
-<table>
-  @for (row of spreadsheet.values(); track $index; let r = $index) {
-    <tr>
-      @for (cell of row; track $index) {
-        <td>{{ cell }}</td>
-      }
-    </tr>
-  }
-</table>
-```
-
-### Keeping recalculation outside the Angular zone
-
-For large sheets or frequent edits, HyperFormula's synchronous recalculation can trigger unnecessary change-detection cycles. Wrap heavy calls with `NgZone.runOutsideAngular` and re-enter the zone only when publishing new values:
-
-```typescript
-// inside SpreadsheetService
-import { NgZone } from '@angular/core';
-
-private readonly ngZone = inject(NgZone);
-
-updateCell(row: number, col: number, value: RawCellContent) {
-  this.ngZone.runOutsideAngular(() => {
-    this.hf.setCellContents({ sheet: 0, row, col }, value);
-    const next = this.hf.getSheetValues(0);
-    this.ngZone.run(() => this._values.next(next));
-  });
-}
-```
 
 ## Next steps
 
diff --git a/docs/guide/integration-with-svelte.md b/docs/guide/integration-with-svelte.md
index d961c850f..065b59906 100644
--- a/docs/guide/integration-with-svelte.md
+++ b/docs/guide/integration-with-svelte.md
@@ -62,52 +62,6 @@ Declare the engine at the top of `<script>` so it lives for the component's life
 </table>
 ```
 
-### Svelte 5 (runes)
-
-Under Svelte 5, hold the sheet values in a `$state` rune so reassignment triggers re-rendering. Replace `on:click` with the `onclick` attribute:
-
-```svelte
-<script lang="ts">
-  import { onDestroy } from 'svelte';
-  import { HyperFormula, type CellValue, type RawCellContent } from 'hyperformula';
-
-  const hf = HyperFormula.buildFromArray(
-    [
-      [1, 2, '=A1+B1'],
-      // your data rows go here
-    ],
-    {
-      licenseKey: 'gpl-v3',
-      // more configuration options go here
-    }
-  );
-
-  let values = $state<CellValue[][]>(hf.getSheetValues(0));
-
-  function updateCell(row: number, col: number, value: RawCellContent) {
-    hf.setCellContents({ sheet: 0, row, col }, value);
-    values = hf.getSheetValues(0);
-  }
-
-  onDestroy(() => hf.destroy());
-</script>
-
-<table>
-  {#each values as row, r}
-    <tr>
-      {#each row as cell, c}
-        <td>
-          <input
-            value={cell ?? ''}
-            onchange={(e) => updateCell(r, c, (e.target as HTMLInputElement).value)}
-          />
-        </td>
-      {/each}
-    </tr>
-  {/each}
-</table>
-```
-
 ## Server-side rendering (SvelteKit)
 
 HyperFormula depends on browser-only APIs. In SvelteKit, initialize the engine inside `onMount` so the code never runs during SSR:
@@ -146,7 +100,6 @@ HyperFormula depends on browser-only APIs. In SvelteKit, initialize the engine i
 {/if}
 ```
 
-For Svelte 5 + SvelteKit, replace `let result = null` with `let result: CellValue = $state(null)` and `on:click` with `onclick`. As an alternative, guard the top-level init with `if (browser)` from `$app/environment`.
 
 ## Next steps
 
diff --git a/docs/guide/integration-with-vue.md b/docs/guide/integration-with-vue.md
index a52daee07..4d851d3a3 100644
--- a/docs/guide/integration-with-vue.md
+++ b/docs/guide/integration-with-vue.md
@@ -72,92 +72,9 @@ The class keeps the HyperFormula instance as a private field, so Vue's reactivit
 
 ## Notes
 
-### Using `markRaw` instead of a class wrapper
-
-If you prefer to use the HyperFormula instance directly in `<script setup>` without a wrapper class, apply [`markRaw`](https://vuejs.org/api/reactivity-advanced.html#markraw) to opt it out of Vue's reactivity:
-
-```vue
-<script setup lang="ts">
-import { markRaw, onUnmounted, ref } from 'vue';
-import { HyperFormula, type CellValue, type RawCellContent } from 'hyperformula';
-
-const hf = markRaw(
-  HyperFormula.buildFromArray([/* data */], { licenseKey: 'gpl-v3' })
-);
-
-const values = ref<CellValue[][]>(hf.getSheetValues(0));
-
-function updateCell(row: number, col: number, value: RawCellContent) {
-  hf.setCellContents({ sheet: 0, row, col }, value);
-  values.value = hf.getSheetValues(0);
-}
-
-onUnmounted(() => hf.destroy());
-</script>
-```
-
-`markRaw` is essential when the instance is exposed directly — without it, Vue wraps it in a Proxy that breaks internal state. The class wrapper approach avoids this because the instance stays private.
-
 ### Server-side rendering (Nuxt)
 
-HyperFormula depends on browser-only APIs. In Nuxt, render the spreadsheet on the client only — wrap the component with `<ClientOnly>` or instantiate the instance inside `onMounted` rather than at the top of `<script setup>`:
-
-```vue
-<script setup lang="ts">
-import { markRaw, onMounted, onUnmounted, ref } from 'vue';
-import type { HyperFormula as HyperFormulaType, CellValue } from 'hyperformula';
-
-const hf = ref<HyperFormulaType | null>(null);
-const values = ref<CellValue[][]>([]);
-
-onMounted(async () => {
-  const { HyperFormula } = await import('hyperformula');
-  // markRaw must be applied before the instance is assigned to any ref or reactive
-  const instance = markRaw(HyperFormula.buildFromArray([/* data */], { licenseKey: 'gpl-v3' }));
-  hf.value = instance;
-  values.value = instance.getSheetValues(0);
-});
-
-onUnmounted(() => hf.value?.destroy());
-</script>
-```
-
-### Reacting to internal changes
-
-If you mutate the engine from multiple places (not just one `updateCell`), subscribe to HyperFormula's `valuesUpdated` event once and refresh `values.value` from the handler rather than calling `getSheetValues` after every mutation. Always remove the listener in `onUnmounted` to avoid stale closures:
-
-```typescript
-function onValuesUpdated() {
-  values.value = hf.getSheetValues(0);
-}
-
-hf.on('valuesUpdated', onValuesUpdated);
-onUnmounted(() => hf.off('valuesUpdated', onValuesUpdated));
-```
-
-### Sharing the instance across components (Pinia)
-
-If the same engine is used from multiple components, put it in a Pinia store. Apply `markRaw` inside the store so Pinia does not proxy the instance:
-
-```typescript
-import { defineStore } from 'pinia';
-import { markRaw, ref } from 'vue';
-import { HyperFormula, type CellValue, type RawCellContent } from 'hyperformula';
-
-export const useSpreadsheetStore = defineStore('spreadsheet', () => {
-  // Keep hf private — exposing the raw instance lets callers bypass the store's
-  // updateCell and also risks Pinia devtools trying to serialise it.
-  const hf = markRaw(HyperFormula.buildFromArray([/* data */], { licenseKey: 'gpl-v3' }));
-  const values = ref<CellValue[][]>(hf.getSheetValues(0));
-
-  function updateCell(row: number, col: number, value: RawCellContent) {
-    hf.setCellContents({ sheet: 0, row, col }, value);
-    values.value = hf.getSheetValues(0);
-  }
-
-  return { values, updateCell };
-});
-```
+HyperFormula depends on browser-only APIs. In Nuxt, render the spreadsheet on the client only by wrapping the component with `<ClientOnly>`.
 
 ## Troubleshooting
 

From 545ea1e5dbd0f6d427dcb69b47e6f63677011aac Mon Sep 17 00:00:00 2001
From: marcin-kordas-hoc <marcin.kordas@handsontable.com>
Date: Thu, 16 Apr 2026 10:36:11 +0000
Subject: [PATCH 13/15] Docs: align all guide snippets with demo interaction
 patterns

All four Stackblitz demos use the same interaction model: "Run calculations"
and "Reset" buttons with read-only table output. Aligned guides to match:

React: replaced editable <input onChange> with button-driven calculate/reset.
The onChange-per-keystroke pattern was not from the demo and caused issues
with partial formula input.

Angular: replaced standalone component with NgModule pattern (matching demo).
Replaced updateCell with calculate/reset methods matching EmployeesService.
Added buttons to template.

Vue: replaced dead handleUpdate/updateCell with getCalculatedValues/
getRawFormulas matching EmployeesDataProvider. Added Run/Reset buttons.
---
 docs/guide/integration-with-angular.md | 32 ++++++++++---------
 docs/guide/integration-with-react.md   | 43 ++++++++++++++------------
 docs/guide/integration-with-vue.md     | 25 +++++++++------
 3 files changed, 56 insertions(+), 44 deletions(-)

diff --git a/docs/guide/integration-with-angular.md b/docs/guide/integration-with-angular.md
index 14e7477e0..8ea0dd776 100644
--- a/docs/guide/integration-with-angular.md
+++ b/docs/guide/integration-with-angular.md
@@ -12,7 +12,7 @@ Wrap the engine in an `@Injectable` service backed by a `BehaviorSubject`. Compo
 // spreadsheet.service.ts
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
-import { HyperFormula, type CellValue, type RawCellContent } from 'hyperformula';
+import { HyperFormula, type CellValue } from 'hyperformula';
 
 @Injectable({ providedIn: 'root' })
 export class SpreadsheetService {
@@ -35,19 +35,21 @@ export class SpreadsheetService {
     this._values.next(this.hf.getSheetValues(0));
   }
 
-  updateCell(row: number, col: number, value: RawCellContent) {
-    this.hf.setCellContents({ sheet: 0, row, col }, value);
+  calculate() {
     this._values.next(this.hf.getSheetValues(0));
   }
+
+  reset() {
+    this._values.next([]);
+  }
 }
 ```
 
-Consume the service from a component and bind `values$ | async` in the template:
+Consume the service from a component and bind `values$ | async` in the template. Declare the component in your `AppModule` alongside `CommonModule`:
 
 ```typescript
 // spreadsheet.component.ts
 import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { Observable } from 'rxjs';
 import { SpreadsheetService } from './spreadsheet.service';
 import { type CellValue } from 'hyperformula';
@@ -55,10 +57,6 @@ import { type CellValue } from 'hyperformula';
 @Component({
   selector: 'app-spreadsheet',
   templateUrl: './spreadsheet.component.html',
-  // For NgModule-based apps, declare this component in AppModule and import
-  // CommonModule there instead of in the component itself.
-  imports: [CommonModule],
-  standalone: true,
 })
 export class SpreadsheetComponent {
   values$: Observable<CellValue[][]>;
@@ -67,17 +65,23 @@ export class SpreadsheetComponent {
     this.values$ = this.spreadsheetService.values$;
   }
 
-  updateCell(row: number, col: number, value: string) {
-    this.spreadsheetService.updateCell(row, col, value);
+  runCalculations() {
+    this.spreadsheetService.calculate();
+  }
+
+  reset() {
+    this.spreadsheetService.reset();
   }
 }
 ```
 
 ```html
 <!-- spreadsheet.component.html -->
-<table>
-  <tr *ngFor="let row of values$ | async; let r = index">
-    <td *ngFor="let cell of row; let c = index">{{ cell }}</td>
+<button (click)="runCalculations()">Run calculations</button>
+<button (click)="reset()">Reset</button>
+<table *ngIf="(values$ | async) as values">
+  <tr *ngFor="let row of values">
+    <td *ngFor="let cell of row">{{ cell }}</td>
   </tr>
 </table>
 ```
diff --git a/docs/guide/integration-with-react.md b/docs/guide/integration-with-react.md
index fb1d25717..1a715ac42 100644
--- a/docs/guide/integration-with-react.md
+++ b/docs/guide/integration-with-react.md
@@ -6,11 +6,11 @@ Install with `npm install hyperformula`. For other options, see the [client-side
 
 ## Basic usage
 
-Hold the HyperFormula instance in a `useRef` so it survives re-renders. Initialize it inside `useEffect` and release it in the cleanup function. Mirror the computed sheet values in `useState` so React re-renders when they change.
+Hold the HyperFormula instance in a `useRef` so it survives re-renders. Initialize it inside `useEffect` and release it in the cleanup function. Use `useState` to toggle between raw formulas and computed values.
 
 ```tsx
 import { useEffect, useRef, useState } from 'react';
-import { HyperFormula, CellValue, RawCellContent } from 'hyperformula';
+import { HyperFormula, CellValue } from 'hyperformula';
 
 export function SpreadsheetComponent() {
   const hfRef = useRef<HyperFormula | null>(null);
@@ -28,7 +28,6 @@ export function SpreadsheetComponent() {
       }
     );
     hfRef.current = hf;
-    setValues(hf.getSheetValues(0));
 
     return () => {
       hf.destroy();
@@ -36,29 +35,33 @@ export function SpreadsheetComponent() {
     };
   }, []);
 
-  function handleCellEdit(row: number, col: number, newValue: RawCellContent) {
+  function runCalculations() {
     if (!hfRef.current) return;
-    hfRef.current.setCellContents({ sheet: 0, row, col }, newValue);
     setValues(hfRef.current.getSheetValues(0));
   }
 
+  function reset() {
+    setValues([]);
+  }
+
   return (
-    <table>
-      <tbody>
-        {values.map((row, r) => (
-          <tr key={r}>
-            {row.map((cell, c) => (
-              <td key={c}>
-                <input
-                  value={String(cell ?? '')}
-                  onChange={(e) => handleCellEdit(r, c, e.target.value)}
-                />
-              </td>
+    <>
+      <button onClick={runCalculations}>Run calculations</button>
+      <button onClick={reset}>Reset</button>
+      {values.length > 0 && (
+        <table>
+          <tbody>
+            {values.map((row, r) => (
+              <tr key={r}>
+                {row.map((cell, c) => (
+                  <td key={c}>{String(cell ?? '')}</td>
+                ))}
+              </tr>
             ))}
-          </tr>
-        ))}
-      </tbody>
-    </table>
+          </tbody>
+        </table>
+      )}
+    </>
   );
 }
 ```
diff --git a/docs/guide/integration-with-vue.md b/docs/guide/integration-with-vue.md
index 4d851d3a3..92286531a 100644
--- a/docs/guide/integration-with-vue.md
+++ b/docs/guide/integration-with-vue.md
@@ -10,24 +10,24 @@ Wrap the HyperFormula instance inside a plain class so it stays outside Vue's re
 
 ```typescript
 // spreadsheet-provider.ts
-import { HyperFormula, type CellValue, type RawCellContent } from 'hyperformula';
+import { HyperFormula, type CellValue } from 'hyperformula';
 
 export class SpreadsheetProvider {
   private hf: HyperFormula;
 
-  constructor(data: RawCellContent[][]) {
+  constructor(data: (string | number | null)[][]) {
     this.hf = HyperFormula.buildFromArray(data, {
       licenseKey: 'gpl-v3',
       // more configuration options go here
     });
   }
 
-  getValues(): CellValue[][] {
+  getCalculatedValues(): CellValue[][] {
     return this.hf.getSheetValues(0);
   }
 
-  updateCell(row: number, col: number, value: RawCellContent) {
-    this.hf.setCellContents({ sheet: 0, row, col }, value);
+  getRawFormulas(): (string | number | null)[][] {
+    return this.hf.getSheetSerialized(0) as (string | number | null)[][];
   }
 
   destroy() {
@@ -49,18 +49,23 @@ const provider = new SpreadsheetProvider([
   // your data rows go here
 ]);
 
-const values = ref<CellValue[][]>(provider.getValues());
+const values = ref<CellValue[][]>([]);
 
-function handleUpdate(row: number, col: number, value: string) {
-  provider.updateCell(row, col, value);
-  values.value = provider.getValues();
+function runCalculations() {
+  values.value = provider.getCalculatedValues();
+}
+
+function reset() {
+  values.value = [];
 }
 
 onUnmounted(() => provider.destroy());
 </script>
 
 <template>
-  <table>
+  <button @click="runCalculations">Run calculations</button>
+  <button @click="reset">Reset</button>
+  <table v-if="values.length">
     <tr v-for="(row, r) in values" :key="r">
       <td v-for="(cell, c) in row" :key="c">{{ cell }}</td>
     </tr>

From af96abcaac146f0ba516e42b084f4c78fabed69c Mon Sep 17 00:00:00 2001
From: marcin-kordas-hoc <marcin.kordas@handsontable.com>
Date: Thu, 16 Apr 2026 11:02:32 +0000
Subject: [PATCH 14/15] Docs: fix AGENTS.md Vue SSR guard and align Svelte
 button labels

AGENTS.md: Vue SSR guard updated from "onMounted + dynamic import"
to "<ClientOnly> (Nuxt)" matching the actual guide content.

Svelte: renamed "Calculate" to "Run calculations" and added "Reset"
button for consistency with React/Angular/Vue guides. Reset is pure
UI (result = null), no HF API involved.
---
 AGENTS.md                             |  2 +-
 docs/guide/integration-with-svelte.md | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 68b77900a..c768bd543 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -27,7 +27,7 @@ When helping users integrate HyperFormula with a framework, follow these idiomat
 |---|---|---|---|---|
 | React | `useRef<HyperFormula>` | `useEffect` return | `useState<CellValue[][]>` | `dynamic(..., { ssr: false })` |
 | Angular | `@Injectable` service with `BehaviorSubject` | `ngOnDestroy` (component-scoped) | `async` pipe | N/A (no default SSR) |
-| Vue 3 | Class wrapper with private HF field | `onUnmounted` | `ref<CellValue[][]>` | `onMounted` + dynamic import |
+| Vue 3 | Class wrapper with private HF field | `onUnmounted` | `ref<CellValue[][]>` | `<ClientOnly>` (Nuxt) |
 | Svelte | top-level `const` in `<script>` | `onDestroy` | plain `let` (Svelte 4) | `onMount` + dynamic import |
 
 Critical rules:
diff --git a/docs/guide/integration-with-svelte.md b/docs/guide/integration-with-svelte.md
index 065b59906..ac6e39f53 100644
--- a/docs/guide/integration-with-svelte.md
+++ b/docs/guide/integration-with-svelte.md
@@ -35,10 +35,15 @@ Declare the engine at the top of `<script>` so it lives for the component's life
     result = hf.getCellValue({ sheet: sheetId, row: 0, col: 2 });
   }
 
+  function reset() {
+    result = null;
+  }
+
   onDestroy(() => hf.destroy());
 </script>
 
-<button on:click={calculate}>Calculate</button>
+<button on:click={calculate}>Run calculations</button>
+<button on:click={reset}>Reset</button>
 {#if result !== null}
   <p>Result: <strong>{result}</strong></p>
 {/if}
@@ -92,9 +97,14 @@ HyperFormula depends on browser-only APIs. In SvelteKit, initialize the engine i
     if (!hf) return;
     result = hf.getCellValue({ sheet: 0, row: 0, col: 2 });
   }
+
+  function reset() {
+    result = null;
+  }
 </script>
 
-<button on:click={calculate}>Calculate</button>
+<button on:click={calculate}>Run calculations</button>
+<button on:click={reset}>Reset</button>
 {#if result !== null}
   <p>Result: <strong>{result}</strong></p>
 {/if}

From 79f96e1140c9558dd7958f49b73cb210d7681ff5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 20 Apr 2026 07:16:45 +0000
Subject: [PATCH 15/15] Docs: correct Next.js App Router SSR pattern in React
 guide

- dynamic({ ssr: false }) is rejected inside a Server Component; move the call into a client wrapper and import that from the server page
- drop the inaccurate 'browser-only APIs' claim (HyperFormula runs in Node.js); reframe ssr: false as a bundle/perf optimization
- remove the React 18 reference in the StrictMode note since React 19 is current and the double-invocation semantics are unchanged
---
 docs/guide/integration-with-react.md | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/docs/guide/integration-with-react.md b/docs/guide/integration-with-react.md
index 1a715ac42..440cdda09 100644
--- a/docs/guide/integration-with-react.md
+++ b/docs/guide/integration-with-react.md
@@ -72,11 +72,13 @@ If you use JavaScript instead of TypeScript, drop the type annotations — the r
 
 ### `React.StrictMode` double invocation
 
-In development, React 18 runs effects twice (mount → unmount → mount) to surface cleanup bugs. The pattern above is correct for StrictMode because `destroy()` runs before the re-mount creates a new instance, so no work leaks between the two lifecycles. Do not switch to a module-scoped singleton as a workaround — it will break StrictMode semantics.
+In development, React runs effects twice (mount → unmount → mount) to surface cleanup bugs. The pattern above is correct for StrictMode because `destroy()` runs before the re-mount creates a new instance, so no work leaks between the two lifecycles. Do not switch to a module-scoped singleton as a workaround — it will break StrictMode semantics.
 
 ### Server-side rendering (Next.js)
 
-HyperFormula depends on browser-only APIs. Mark `SpreadsheetComponent.tsx` with `'use client'`, then load it lazily from a **server** page component using `dynamic(..., { ssr: false })`:
+HyperFormula itself runs in Node.js, and the component above is already safe under SSR: the engine is constructed inside `useEffect`, which runs only on the client, and the initial render emits no cell values. You only need to take extra steps if you want to keep the HyperFormula bundle out of the server-rendered HTML, in which case lazy-load the component with `next/dynamic` and `ssr: false`.
+
+In the App Router, `ssr: false` is not allowed inside a Server Component, so declare the component with `'use client'` and create a small client-side wrapper that performs the dynamic import:
 
 ```tsx
 // app/spreadsheet/SpreadsheetComponent.tsx
@@ -85,20 +87,26 @@ HyperFormula depends on browser-only APIs. Mark `SpreadsheetComponent.tsx` with
 ```
 
 ```tsx
-// app/spreadsheet/page.tsx  ← server component, no 'use client'
+// app/spreadsheet/SpreadsheetLazy.tsx  ← client component that owns the dynamic import
+'use client';
 import dynamic from 'next/dynamic';
 
-const SpreadsheetComponent = dynamic(
+export const SpreadsheetLazy = dynamic(
   () => import('./SpreadsheetComponent').then((m) => m.SpreadsheetComponent),
   { ssr: false }
 );
+```
+
+```tsx
+// app/spreadsheet/page.tsx  ← server component, no 'use client'
+import { SpreadsheetLazy } from './SpreadsheetLazy';
 
 export default function Page() {
-  return <SpreadsheetComponent />;
+  return <SpreadsheetLazy />;
 }
 ```
 
-Putting `'use client'` on `page.tsx` itself would make the entire page a client component — the point is to keep the page server-rendered and only hydrate the spreadsheet widget on the client. In the Pages Router, the same `dynamic(..., { ssr: false })` pattern works without `'use client'`.
+Keeping `dynamic(..., { ssr: false })` in a dedicated client wrapper preserves the server component status of `page.tsx` so only the spreadsheet widget hydrates on the client. In the Pages Router, the same `dynamic(..., { ssr: false })` call can live directly in the page file — the App Router's Server Component restriction does not apply there.
 
 ## Next steps