Commit 61434a63d2 for handsontable.com
commit 61434a63d2a4da48f61eaed3879b9faa1496b410
Author: Artur Mędrygał <artur.medrygal@handsontable.com>
Date: Mon May 18 09:46:31 2026 +0200
RELEASE-543: add and fix Diátaxis type declarations across guides and recipes (#12589)
* docs: Fix type mismatch in custom-cells and conditional-formatting
* docs: Fix type declaration in all recipes (tutorial -> how-to)
* docs: Add missing type declarations to columns and rows guides
* docs: Add missing type declarations to guides (accessories, optimization, styling, i18n, dialog, migration)
diff --git a/docs/content/guides/accessories-and-menus/export-to-csv/export-to-csv.md b/docs/content/guides/accessories-and-menus/export-to-csv/export-to-csv.md
index 3827948f64..2c54d70af4 100644
--- a/docs/content/guides/accessories-and-menus/export-to-csv/export-to-csv.md
+++ b/docs/content/guides/accessories-and-menus/export-to-csv/export-to-csv.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: 51aacis1
title: Export to CSV
metaTitle: Export to CSV - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/accessories-and-menus/export-to-excel/export-to-excel.md b/docs/content/guides/accessories-and-menus/export-to-excel/export-to-excel.md
index 776c8928a1..1203427ff7 100644
--- a/docs/content/guides/accessories-and-menus/export-to-excel/export-to-excel.md
+++ b/docs/content/guides/accessories-and-menus/export-to-excel/export-to-excel.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: b4qs2km7
title: Export to Excel
metaTitle: Export to Excel - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/accessories-and-menus/undo-redo/undo-redo.md b/docs/content/guides/accessories-and-menus/undo-redo/undo-redo.md
index d83e21a99e..2b13ea526f 100644
--- a/docs/content/guides/accessories-and-menus/undo-redo/undo-redo.md
+++ b/docs/content/guides/accessories-and-menus/undo-redo/undo-redo.md
@@ -1,4 +1,5 @@
---
+type: reference
id: glh01i6q
title: Undo and redo
metaTitle: Undo and redo - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/cell-features/conditional-formatting/conditional-formatting.md b/docs/content/guides/cell-features/conditional-formatting/conditional-formatting.md
index a0dcb3c6e2..1a4c78a73d 100644
--- a/docs/content/guides/cell-features/conditional-formatting/conditional-formatting.md
+++ b/docs/content/guides/cell-features/conditional-formatting/conditional-formatting.md
@@ -1,5 +1,5 @@
---
-type: how-to
+type: reference
id: 4ca0c70r
title: Conditional formatting
metaTitle: Conditional formatting - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/cell-functions/custom-cells/custom-cells.md b/docs/content/guides/cell-functions/custom-cells/custom-cells.md
index 67f5997b5d..fe67bfca7d 100644
--- a/docs/content/guides/cell-functions/custom-cells/custom-cells.md
+++ b/docs/content/guides/cell-functions/custom-cells/custom-cells.md
@@ -1,5 +1,5 @@
---
-type: tutorial
+type: explanation
id: c2670b72
title: Custom Cells
metaTitle: Simplified Custom Cell Definitions - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/columns/column-filter/column-filter.md b/docs/content/guides/columns/column-filter/column-filter.md
index 818866c544..05c1c6ec95 100644
--- a/docs/content/guides/columns/column-filter/column-filter.md
+++ b/docs/content/guides/columns/column-filter/column-filter.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: 3xxlonuv
title: Column filter
metaTitle: Column filter - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/columns/column-freezing/column-freezing.md b/docs/content/guides/columns/column-freezing/column-freezing.md
index 2c6f2a8190..47bb724b87 100644
--- a/docs/content/guides/columns/column-freezing/column-freezing.md
+++ b/docs/content/guides/columns/column-freezing/column-freezing.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: 2anhuqf7
title: Column freezing
metaTitle: Column freezing - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/columns/column-groups/column-groups.md b/docs/content/guides/columns/column-groups/column-groups.md
index e6a65d4324..deb320b4f1 100644
--- a/docs/content/guides/columns/column-groups/column-groups.md
+++ b/docs/content/guides/columns/column-groups/column-groups.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: k4mb003v
title: Column groups
metaTitle: Column groups - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/columns/column-header/column-header.md b/docs/content/guides/columns/column-header/column-header.md
index 6a179b242f..b73c67702b 100644
--- a/docs/content/guides/columns/column-header/column-header.md
+++ b/docs/content/guides/columns/column-header/column-header.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: qiasr3y1
title: Column headers
metaTitle: Column headers - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/columns/column-hiding/column-hiding.md b/docs/content/guides/columns/column-hiding/column-hiding.md
index b19464b512..b9ccc6ae26 100644
--- a/docs/content/guides/columns/column-hiding/column-hiding.md
+++ b/docs/content/guides/columns/column-hiding/column-hiding.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: 6elqkmhr
title: Column hiding
metaTitle: Column hiding - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/columns/column-menu/column-menu.md b/docs/content/guides/columns/column-menu/column-menu.md
index 153b20dd77..62fe1cd925 100644
--- a/docs/content/guides/columns/column-menu/column-menu.md
+++ b/docs/content/guides/columns/column-menu/column-menu.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: 25b7vhfs
title: Column menu
metaTitle: Column menu - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/columns/column-moving/column-moving.md b/docs/content/guides/columns/column-moving/column-moving.md
index 7f8a442a4f..8a603246e5 100644
--- a/docs/content/guides/columns/column-moving/column-moving.md
+++ b/docs/content/guides/columns/column-moving/column-moving.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: aq1vywt4
title: Column moving
metaTitle: Column moving - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/columns/column-summary/column-summary.md b/docs/content/guides/columns/column-summary/column-summary.md
index 02eecc52a1..ad0b0a227e 100644
--- a/docs/content/guides/columns/column-summary/column-summary.md
+++ b/docs/content/guides/columns/column-summary/column-summary.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: xndxqkoc
title: Column summary
metaTitle: Column summary - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/columns/column-virtualization/column-virtualization.md b/docs/content/guides/columns/column-virtualization/column-virtualization.md
index 3259dbe05d..6a66905e8f 100644
--- a/docs/content/guides/columns/column-virtualization/column-virtualization.md
+++ b/docs/content/guides/columns/column-virtualization/column-virtualization.md
@@ -1,4 +1,5 @@
---
+type: explanation
id: xv8sf6at
title: Column virtualization
metaTitle: Column virtualization - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/columns/column-width/column-width.md b/docs/content/guides/columns/column-width/column-width.md
index a89e81d797..fe7bc042f0 100644
--- a/docs/content/guides/columns/column-width/column-width.md
+++ b/docs/content/guides/columns/column-width/column-width.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: bpcuomaq
title: Column widths
metaTitle: Column widths - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/columns/react-hot-column/react-hot-column.md b/docs/content/guides/columns/react-hot-column/react-hot-column.md
index 59fd5bed10..eebd8b3217 100644
--- a/docs/content/guides/columns/react-hot-column/react-hot-column.md
+++ b/docs/content/guides/columns/react-hot-column/react-hot-column.md
@@ -1,4 +1,5 @@
---
+type: reference
id: h5waqmlx
title: Column component
metaTitle: Column component - React Data Grid | Handsontable
diff --git a/docs/content/guides/dialog/dialog/dialog.md b/docs/content/guides/dialog/dialog/dialog.md
index 322afa6ce3..4e98a65193 100644
--- a/docs/content/guides/dialog/dialog/dialog.md
+++ b/docs/content/guides/dialog/dialog/dialog.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: 1xi1xek4
title: Dialog
metaTitle: Dialog - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/dialog/loading/loading.md b/docs/content/guides/dialog/loading/loading.md
index cca862b11e..c4553296fa 100644
--- a/docs/content/guides/dialog/loading/loading.md
+++ b/docs/content/guides/dialog/loading/loading.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: 2yi2yfl5
title: Loading
metaTitle: Loading - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/dialog/notification/notification.md b/docs/content/guides/dialog/notification/notification.md
index 108da5f045..4508edf7a4 100644
--- a/docs/content/guides/dialog/notification/notification.md
+++ b/docs/content/guides/dialog/notification/notification.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: 3zi3znot
title: Notification
metaTitle: Notification - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/getting-started/server-side-data/server-side-data-configuration.md b/docs/content/guides/getting-started/server-side-data/server-side-data-configuration.md
index e9e9d0e107..0bd8081f83 100644
--- a/docs/content/guides/getting-started/server-side-data/server-side-data-configuration.md
+++ b/docs/content/guides/getting-started/server-side-data/server-side-data-configuration.md
@@ -1,4 +1,5 @@
---
+type: reference
id: h7j4k8l2
title: Server-side configuration
metaTitle: Server-side configuration - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/getting-started/server-side-data/server-side-data-crud.md b/docs/content/guides/getting-started/server-side-data/server-side-data-crud.md
index 57a87e48cd..45171bd0f0 100644
--- a/docs/content/guides/getting-started/server-side-data/server-side-data-crud.md
+++ b/docs/content/guides/getting-started/server-side-data/server-side-data-crud.md
@@ -1,4 +1,5 @@
---
+type: reference
id: p9q3r6s1
title: Server-side CRUD
metaTitle: Server-side CRUD - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/getting-started/server-side-data/server-side-data-fetching.md b/docs/content/guides/getting-started/server-side-data/server-side-data-fetching.md
index 13f40b1cc1..a1bea1314e 100644
--- a/docs/content/guides/getting-started/server-side-data/server-side-data-fetching.md
+++ b/docs/content/guides/getting-started/server-side-data/server-side-data-fetching.md
@@ -1,4 +1,5 @@
---
+type: reference
id: t2u5v8w3
title: Server-side fetching and examples
metaTitle: Server-side fetching and examples - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/integrate-with-vue3/vue3-installation/vue3-installation.md b/docs/content/guides/integrate-with-vue3/vue3-installation/vue3-installation.md
index 8f8c179588..9f5072f758 100644
--- a/docs/content/guides/integrate-with-vue3/vue3-installation/vue3-installation.md
+++ b/docs/content/guides/integrate-with-vue3/vue3-installation/vue3-installation.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: 6sl4ak1f
title: Installation in Vue 3
metaTitle: Installation - Vue 3 Data Grid | Handsontable
diff --git a/docs/content/guides/internationalization/language/language.md b/docs/content/guides/internationalization/language/language.md
index 6fc2279de9..83ada5ad08 100644
--- a/docs/content/guides/internationalization/language/language.md
+++ b/docs/content/guides/internationalization/language/language.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: 1g89qnhe
title: Language
metaTitle: Language - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/internationalization/layout-direction/layout-direction.md b/docs/content/guides/internationalization/layout-direction/layout-direction.md
index 4bfd98636c..24f73c3b4a 100644
--- a/docs/content/guides/internationalization/layout-direction/layout-direction.md
+++ b/docs/content/guides/internationalization/layout-direction/layout-direction.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: gcdt3pns
title: Layout direction
metaTitle: Layout direction - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/navigation/keyboard-shortcuts/keyboard-shortcuts.md b/docs/content/guides/navigation/keyboard-shortcuts/keyboard-shortcuts.md
index 6edd844924..e949f75306 100644
--- a/docs/content/guides/navigation/keyboard-shortcuts/keyboard-shortcuts.md
+++ b/docs/content/guides/navigation/keyboard-shortcuts/keyboard-shortcuts.md
@@ -1,4 +1,5 @@
---
+type: reference
id: 5w6juytv
title: Keyboard shortcuts
metaTitle: Keyboard shortcuts - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/optimization/batch-operations/batch-operations.md b/docs/content/guides/optimization/batch-operations/batch-operations.md
index 1af47f4442..4516c6a777 100644
--- a/docs/content/guides/optimization/batch-operations/batch-operations.md
+++ b/docs/content/guides/optimization/batch-operations/batch-operations.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: kgegbmgz
title: Batch operations
metaTitle: Batch operations - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/optimization/bundle-size/bundle-size.md b/docs/content/guides/optimization/bundle-size/bundle-size.md
index 7bc6c2984f..e3a9cd2815 100644
--- a/docs/content/guides/optimization/bundle-size/bundle-size.md
+++ b/docs/content/guides/optimization/bundle-size/bundle-size.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: vjcvrdeh
title: Bundle size
metaTitle: Bundle size - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/optimization/performance/performance.md b/docs/content/guides/optimization/performance/performance.md
index 61233ff7b5..4ed836b26a 100644
--- a/docs/content/guides/optimization/performance/performance.md
+++ b/docs/content/guides/optimization/performance/performance.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: w6bvsin5
title: Performance
metaTitle: Performance - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/rows/row-freezing/row-freezing.md b/docs/content/guides/rows/row-freezing/row-freezing.md
index e4b4dcdb9c..0707527bb1 100644
--- a/docs/content/guides/rows/row-freezing/row-freezing.md
+++ b/docs/content/guides/rows/row-freezing/row-freezing.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: jgrtvjxx
title: Row freezing
metaTitle: Row freezing - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/rows/row-header/row-header.md b/docs/content/guides/rows/row-header/row-header.md
index 83199e0423..c303884000 100644
--- a/docs/content/guides/rows/row-header/row-header.md
+++ b/docs/content/guides/rows/row-header/row-header.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: j1zswn3i
title: Row headers
metaTitle: Row headers - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/rows/row-height/row-height.md b/docs/content/guides/rows/row-height/row-height.md
index 16364cf452..d1cc1be805 100644
--- a/docs/content/guides/rows/row-height/row-height.md
+++ b/docs/content/guides/rows/row-height/row-height.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: fehmrn1j
title: Row heights
metaTitle: Row heights - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/rows/row-hiding/row-hiding.md b/docs/content/guides/rows/row-hiding/row-hiding.md
index f4d509e689..f12e8d3024 100644
--- a/docs/content/guides/rows/row-hiding/row-hiding.md
+++ b/docs/content/guides/rows/row-hiding/row-hiding.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: 37786931
title: Row hiding
metaTitle: Row hiding - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/security/security/security.md b/docs/content/guides/security/security/security.md
index 5820358d8b..8fbf56697f 100644
--- a/docs/content/guides/security/security/security.md
+++ b/docs/content/guides/security/security/security.md
@@ -1,4 +1,5 @@
---
+type: explanation
id: nb36sme6
title: Security
metaTitle: Security - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/styling/theme-customization/theme-customization.md b/docs/content/guides/styling/theme-customization/theme-customization.md
index d244689115..45e33e2eb9 100644
--- a/docs/content/guides/styling/theme-customization/theme-customization.md
+++ b/docs/content/guides/styling/theme-customization/theme-customization.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: x2u15qpx
title: Theme Customization
metaTitle: Theme Customization - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/technical-specification/documentation-license/documentation-license.md b/docs/content/guides/technical-specification/documentation-license/documentation-license.md
index f8e73ae54c..d78b2006a8 100644
--- a/docs/content/guides/technical-specification/documentation-license/documentation-license.md
+++ b/docs/content/guides/technical-specification/documentation-license/documentation-license.md
@@ -1,4 +1,5 @@
---
+type: reference
id: hpr42b2a
title: Documentation license
metaTitle: Documentation license - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/technical-specification/supported-browsers/supported-browsers.md b/docs/content/guides/technical-specification/supported-browsers/supported-browsers.md
index 5b1ed3aae0..4e13c848de 100644
--- a/docs/content/guides/technical-specification/supported-browsers/supported-browsers.md
+++ b/docs/content/guides/technical-specification/supported-browsers/supported-browsers.md
@@ -1,4 +1,5 @@
---
+type: reference
id: zzjh2u93
title: Supported browsers
metaTitle: Supported browsers - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/technical-specification/third-party-licenses/third-party-licenses.md b/docs/content/guides/technical-specification/third-party-licenses/third-party-licenses.md
index 20de480dfc..60dd0762ac 100644
--- a/docs/content/guides/technical-specification/third-party-licenses/third-party-licenses.md
+++ b/docs/content/guides/technical-specification/third-party-licenses/third-party-licenses.md
@@ -1,4 +1,5 @@
---
+type: reference
id: rck7asx7
title: Third-party licenses
metaTitle: Third-party licenses - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/tools-and-building/custom-plugins/custom-plugins.md b/docs/content/guides/tools-and-building/custom-plugins/custom-plugins.md
index 6a9c8148ce..557d17ba74 100644
--- a/docs/content/guides/tools-and-building/custom-plugins/custom-plugins.md
+++ b/docs/content/guides/tools-and-building/custom-plugins/custom-plugins.md
@@ -1,4 +1,5 @@
---
+type: how-to
id: 39o3uw0q
title: Custom plugins
metaTitle: Custom plugins - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/upgrade-and-migration/long-term-support/long-term-support.md b/docs/content/guides/upgrade-and-migration/long-term-support/long-term-support.md
index 3aed453209..7971fb008f 100644
--- a/docs/content/guides/upgrade-and-migration/long-term-support/long-term-support.md
+++ b/docs/content/guides/upgrade-and-migration/long-term-support/long-term-support.md
@@ -1,4 +1,5 @@
---
+type: explanation
id: 4055bdfa
title: Long Term Support (LTS)
metaTitle: Long Term Support (LTS) - JavaScript Data Grid | Handsontable
diff --git a/docs/content/guides/upgrade-and-migration/versioning-policy/versioning-policy.md b/docs/content/guides/upgrade-and-migration/versioning-policy/versioning-policy.md
index bae6708255..eabe8906a4 100644
--- a/docs/content/guides/upgrade-and-migration/versioning-policy/versioning-policy.md
+++ b/docs/content/guides/upgrade-and-migration/versioning-policy/versioning-policy.md
@@ -1,4 +1,5 @@
---
+type: explanation
id: fwrhn9ys
title: Versioning policy
metaTitle: Versioning policy - JavaScript Data Grid | Handsontable
diff --git a/docs/content/recipes/accessibility/accessibility.md b/docs/content/recipes/accessibility/accessibility.md
index 36a44db702..f428f82b05 100644
--- a/docs/content/recipes/accessibility/accessibility.md
+++ b/docs/content/recipes/accessibility/accessibility.md
@@ -7,7 +7,7 @@ canonicalUrl: /recipes/accessibility
searchCategory: Recipes
hotPlugin: false
editLink: false
-type: tutorial
+type: how-to
id: t1a3b5c7
react:
id: u2b4c6d8
diff --git a/docs/content/recipes/accessibility/aria-grid/aria-grid.md b/docs/content/recipes/accessibility/aria-grid/aria-grid.md
index b700cda3af..73d4cdb169 100644
--- a/docs/content/recipes/accessibility/aria-grid/aria-grid.md
+++ b/docs/content/recipes/accessibility/aria-grid/aria-grid.md
@@ -19,7 +19,7 @@ angular:
metaTitle: ARIA-Friendly Grid with Row Descriptions - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Accessibility & UX
-type: tutorial
+type: how-to
---
In this tutorial, you will configure Handsontable for screen reader compatibility. You will learn how to use `ariaTags`, `tabMoves`, aria-label on cells, and aria-sort on headers to target WCAG 2.1 AA compliance.
diff --git a/docs/content/recipes/accessibility/keyboard-shortcuts/keyboard-shortcuts.md b/docs/content/recipes/accessibility/keyboard-shortcuts/keyboard-shortcuts.md
index 05cf1e3dea..34b1f31e6a 100644
--- a/docs/content/recipes/accessibility/keyboard-shortcuts/keyboard-shortcuts.md
+++ b/docs/content/recipes/accessibility/keyboard-shortcuts/keyboard-shortcuts.md
@@ -19,7 +19,7 @@ angular:
metaTitle: Custom keyboard shortcuts - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Accessibility & UX
-type: tutorial
+type: how-to
---
In this tutorial, you will register custom keyboard shortcuts in Handsontable using the ShortcutManager API. You will learn how to add shortcuts like Ctrl+D to duplicate rows and Ctrl+Enter to submit grid data without conflicting with existing browser or grid shortcuts.
diff --git a/docs/content/recipes/cell-types/cell-types.md b/docs/content/recipes/cell-types/cell-types.md
index 2cc10a18d5..45edac4a9f 100644
--- a/docs/content/recipes/cell-types/cell-types.md
+++ b/docs/content/recipes/cell-types/cell-types.md
@@ -6,7 +6,7 @@ canonicalUrl: /recipes/cell-types
searchCategory: Recipes
hotPlugin: false
editLink: false
-type: tutorial
+type: how-to
id: fe57c058
description: Practical recipes for creating custom cell types in Handsontable.
react:
diff --git a/docs/content/recipes/cell-types/color-picker/color-picker.md b/docs/content/recipes/cell-types/color-picker/color-picker.md
index 89a9be66ca..eafa947499 100644
--- a/docs/content/recipes/cell-types/color-picker/color-picker.md
+++ b/docs/content/recipes/cell-types/color-picker/color-picker.md
@@ -1,5 +1,5 @@
---
-type: tutorial
+type: how-to
id: 2d2b22ef
title: Color picker
metaTitle: Color Picker Cell Type - JavaScript Data Grid | Handsontable
diff --git a/docs/content/recipes/cell-types/colorful-picker/colorful-picker.md b/docs/content/recipes/cell-types/colorful-picker/colorful-picker.md
index acb27667dd..557c2b14ff 100644
--- a/docs/content/recipes/cell-types/colorful-picker/colorful-picker.md
+++ b/docs/content/recipes/cell-types/colorful-picker/colorful-picker.md
@@ -1,5 +1,5 @@
---
-type: tutorial
+type: how-to
id: e50f0177
title: Colorful Picker
metaTitle: Color Picker Cell Type - React Data Grid | Handsontable
diff --git a/docs/content/recipes/cell-types/feedback-react/feedback-react.md b/docs/content/recipes/cell-types/feedback-react/feedback-react.md
index 19f78b1ae6..21a2403150 100644
--- a/docs/content/recipes/cell-types/feedback-react/feedback-react.md
+++ b/docs/content/recipes/cell-types/feedback-react/feedback-react.md
@@ -1,5 +1,5 @@
---
-type: tutorial
+type: how-to
id: e107bb0d
title: Feedback
metaTitle: Feedback Cell Type - React Data Grid | Handsontable
diff --git a/docs/content/recipes/cell-types/feedback/feedback.md b/docs/content/recipes/cell-types/feedback/feedback.md
index d364bb6653..9ec407e5be 100644
--- a/docs/content/recipes/cell-types/feedback/feedback.md
+++ b/docs/content/recipes/cell-types/feedback/feedback.md
@@ -1,5 +1,5 @@
---
-type: tutorial
+type: how-to
id: e23f98e7
title: Feedback
metaTitle: Feedback Cell Type - JavaScript Data Grid | Handsontable
diff --git a/docs/content/recipes/cell-types/flatpickr/flatpickr.md b/docs/content/recipes/cell-types/flatpickr/flatpickr.md
index 2a0b2090b6..5aa9e1b4b3 100644
--- a/docs/content/recipes/cell-types/flatpickr/flatpickr.md
+++ b/docs/content/recipes/cell-types/flatpickr/flatpickr.md
@@ -1,5 +1,5 @@
---
-type: tutorial
+type: how-to
id: c757a3b3
title: Flatpickr
metaTitle: Flatpickr Cell Type - JavaScript Data Grid | Handsontable
diff --git a/docs/content/recipes/cell-types/guide-color-picker-angular/guide-color-picker.md b/docs/content/recipes/cell-types/guide-color-picker-angular/guide-color-picker.md
index 08132ae17a..6addea9ce8 100644
--- a/docs/content/recipes/cell-types/guide-color-picker-angular/guide-color-picker.md
+++ b/docs/content/recipes/cell-types/guide-color-picker-angular/guide-color-picker.md
@@ -1,5 +1,5 @@
---
-type: tutorial
+type: how-to
id: 7wh7yk48
title: Color picker
metaTitle: Color Picker Cell - JavaScript Data Grid | Handsontable
diff --git a/docs/content/recipes/cell-types/guide-datepicker-angular/guide-datepicker.md b/docs/content/recipes/cell-types/guide-datepicker-angular/guide-datepicker.md
index a9b91bd85c..7dc0d3ca61 100644
--- a/docs/content/recipes/cell-types/guide-datepicker-angular/guide-datepicker.md
+++ b/docs/content/recipes/cell-types/guide-datepicker-angular/guide-datepicker.md
@@ -1,5 +1,5 @@
---
-type: tutorial
+type: how-to
id: 0slrmsni
title: "Date picker"
metaTitle: "Date picker - JavaScript Data Grid | Handsontable"
diff --git a/docs/content/recipes/cell-types/guide-feedback-angular/guide-feedback.md b/docs/content/recipes/cell-types/guide-feedback-angular/guide-feedback.md
index 89a3adb62e..0941c21696 100644
--- a/docs/content/recipes/cell-types/guide-feedback-angular/guide-feedback.md
+++ b/docs/content/recipes/cell-types/guide-feedback-angular/guide-feedback.md
@@ -1,5 +1,5 @@
---
-type: tutorial
+type: how-to
id: 2rti5w12
title: "Feedback Editor"
metaTitle: "Feedback Editor - JavaScript Data Grid | Handsontable"
diff --git a/docs/content/recipes/cell-types/guide-rating-angular/guide-rating.md b/docs/content/recipes/cell-types/guide-rating-angular/guide-rating.md
index 19fb3bd7a6..6fc4e41f00 100644
--- a/docs/content/recipes/cell-types/guide-rating-angular/guide-rating.md
+++ b/docs/content/recipes/cell-types/guide-rating-angular/guide-rating.md
@@ -1,5 +1,5 @@
---
-type: tutorial
+type: how-to
id: ibewekco
title: "Star Rating Editor"
metaTitle: "Star Rating Editor - JavaScript Data Grid | Handsontable"
diff --git a/docs/content/recipes/cell-types/moment-date/moment-date.md b/docs/content/recipes/cell-types/moment-date/moment-date.md
index 4c37cb2196..b228115e2d 100644
--- a/docs/content/recipes/cell-types/moment-date/moment-date.md
+++ b/docs/content/recipes/cell-types/moment-date/moment-date.md
@@ -1,5 +1,5 @@
---
-type: tutorial
+type: how-to
id: 9f21530e
title: Moment.js-based date
metaTitle: Moment.js Cell Type - JavaScript Data Grid | Handsontable
diff --git a/docs/content/recipes/cell-types/moment-time/moment-time.md b/docs/content/recipes/cell-types/moment-time/moment-time.md
index 6e1d3b17ad..e9cc790261 100644
--- a/docs/content/recipes/cell-types/moment-time/moment-time.md
+++ b/docs/content/recipes/cell-types/moment-time/moment-time.md
@@ -1,5 +1,5 @@
---
-type: tutorial
+type: how-to
id: 1f21530e
title: Moment.js-based time
metaTitle: Moment.js Cell Type - JavaScript Data Grid | Handsontable
diff --git a/docs/content/recipes/cell-types/numbro/numbro.md b/docs/content/recipes/cell-types/numbro/numbro.md
index 924005b5b7..b0b2638f58 100644
--- a/docs/content/recipes/cell-types/numbro/numbro.md
+++ b/docs/content/recipes/cell-types/numbro/numbro.md
@@ -1,5 +1,5 @@
---
-type: tutorial
+type: how-to
id: cf4e768b
title: Numbro
metaTitle: Numbro Cell Type - JavaScript Data Grid | Handsontable
diff --git a/docs/content/recipes/cell-types/pikaday/pikaday.md b/docs/content/recipes/cell-types/pikaday/pikaday.md
index d7ae88b659..23651db994 100644
--- a/docs/content/recipes/cell-types/pikaday/pikaday.md
+++ b/docs/content/recipes/cell-types/pikaday/pikaday.md
@@ -1,5 +1,5 @@
---
-type: tutorial
+type: how-to
id: 01620d5a
title: Pikaday
metaTitle: Pikaday Cell Type - JavaScript Data Grid | Handsontable
diff --git a/docs/content/recipes/cell-types/rating/rating.md b/docs/content/recipes/cell-types/rating/rating.md
index ecc5290ace..af90dfe499 100644
--- a/docs/content/recipes/cell-types/rating/rating.md
+++ b/docs/content/recipes/cell-types/rating/rating.md
@@ -1,5 +1,5 @@
---
-type: tutorial
+type: how-to
id: b5f02fb2
title: Star Rating
metaTitle: Star Rating Cell Type - JavaScript Data Grid | Handsontable"
diff --git a/docs/content/recipes/cell-types/react-rating/react-rating.md b/docs/content/recipes/cell-types/react-rating/react-rating.md
index 8286768405..6241b9dcba 100644
--- a/docs/content/recipes/cell-types/react-rating/react-rating.md
+++ b/docs/content/recipes/cell-types/react-rating/react-rating.md
@@ -1,5 +1,5 @@
---
-type: tutorial
+type: how-to
id: 95c84eb4
title: Star Rating
metaTitle: Star Rating Cell Type - React Data Grid | Handsontable
diff --git a/docs/content/recipes/column-management/column-management.md b/docs/content/recipes/column-management/column-management.md
index 3f258cc669..fc263ec8ca 100644
--- a/docs/content/recipes/column-management/column-management.md
+++ b/docs/content/recipes/column-management/column-management.md
@@ -7,7 +7,7 @@ canonicalUrl: /recipes/column-management
searchCategory: Recipes
hotPlugin: false
editLink: false
-type: tutorial
+type: how-to
id: z7g9h1i3
react:
id: a8h0i2j4
diff --git a/docs/content/recipes/column-management/column-visibility/column-visibility.md b/docs/content/recipes/column-management/column-visibility/column-visibility.md
index fb6c3918e7..40d65804e9 100644
--- a/docs/content/recipes/column-management/column-visibility/column-visibility.md
+++ b/docs/content/recipes/column-management/column-visibility/column-visibility.md
@@ -18,7 +18,7 @@ angular:
metaTitle: Dynamic Column Visibility Toggle - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Column Management
-type: tutorial
+type: how-to
---
In this tutorial, you will build a checkbox list outside the grid that shows or hides columns on demand. You will learn how to use `updateSettings` to update the `columns` array while preserving each column's type, renderer, and validator configuration.
diff --git a/docs/content/recipes/column-management/freeze-columns/freeze-columns.md b/docs/content/recipes/column-management/freeze-columns/freeze-columns.md
index 6739a1b4e5..4216b74855 100644
--- a/docs/content/recipes/column-management/freeze-columns/freeze-columns.md
+++ b/docs/content/recipes/column-management/freeze-columns/freeze-columns.md
@@ -19,7 +19,7 @@ angular:
metaTitle: Freeze and unfreeze columns at runtime - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Column Management
-type: tutorial
+type: how-to
---
In this tutorial, you will freeze and unfreeze columns at runtime using external buttons. You will learn how to call `hot.updateSettings` with `fixedColumnsStart` and how frozen columns interact with manual column reordering.
diff --git a/docs/content/recipes/context-menu/context-menu.md b/docs/content/recipes/context-menu/context-menu.md
index 48d8a81942..15954b105c 100644
--- a/docs/content/recipes/context-menu/context-menu.md
+++ b/docs/content/recipes/context-menu/context-menu.md
@@ -7,7 +7,7 @@ canonicalUrl: /recipes/context-menu
searchCategory: Recipes
hotPlugin: false
editLink: false
-type: tutorial
+type: how-to
id: c0j2k4l6
react:
id: d1k3l5m7
diff --git a/docs/content/recipes/context-menu/custom-context-menu/custom-context-menu.md b/docs/content/recipes/context-menu/custom-context-menu/custom-context-menu.md
index 0b3c75269d..1dccb0e353 100644
--- a/docs/content/recipes/context-menu/custom-context-menu/custom-context-menu.md
+++ b/docs/content/recipes/context-menu/custom-context-menu/custom-context-menu.md
@@ -18,7 +18,7 @@ angular:
metaTitle: Custom context menu actions - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Context Menu
-type: tutorial
+type: how-to
---
In this tutorial, you will add custom items to the Handsontable right-click context menu. You will learn how to define custom actions alongside built-in menu items and how to control which built-in items appear.
diff --git a/docs/content/recipes/context-menu/row-operations/row-operations.md b/docs/content/recipes/context-menu/row-operations/row-operations.md
index f15a5bd7dd..55fc9f4495 100644
--- a/docs/content/recipes/context-menu/row-operations/row-operations.md
+++ b/docs/content/recipes/context-menu/row-operations/row-operations.md
@@ -17,7 +17,7 @@ angular:
metaTitle: Programmatic row operations - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Context Menu and Interaction
-type: tutorial
+type: how-to
---
In this tutorial, you will add, delete, and reorder rows in Handsontable using external toolbar buttons. You will learn how to wire buttons to the `alter()` API and the `ManualRowMove` plugin to give users full programmatic control over row order.
diff --git a/docs/content/recipes/data-management/auto-save-backend/auto-save-backend.md b/docs/content/recipes/data-management/auto-save-backend/auto-save-backend.md
index 519708da86..abef3275c6 100644
--- a/docs/content/recipes/data-management/auto-save-backend/auto-save-backend.md
+++ b/docs/content/recipes/data-management/auto-save-backend/auto-save-backend.md
@@ -20,7 +20,7 @@ angular:
metaTitle: Auto-save changes to a backend - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Data Management
-type: tutorial
+type: how-to
---
In this tutorial, you will build an auto-save flow that sends grid edits to a backend after a debounce delay. You will learn how to use `afterChange`, dirty row tracking, and save status feedback to give users real-time confirmation of their changes.
diff --git a/docs/content/recipes/data-management/data-management.md b/docs/content/recipes/data-management/data-management.md
index 0b5814e88c..6346134507 100644
--- a/docs/content/recipes/data-management/data-management.md
+++ b/docs/content/recipes/data-management/data-management.md
@@ -7,7 +7,7 @@ canonicalUrl: /recipes/data-management
searchCategory: Recipes
hotPlugin: false
editLink: false
-type: tutorial
+type: how-to
id: c4b7e2f1
react:
id: 9d2f6a4b
diff --git a/docs/content/recipes/data-management/load-data-graphql/load-data-graphql.md b/docs/content/recipes/data-management/load-data-graphql/load-data-graphql.md
index 58ab0d5e1f..5b53128ba5 100644
--- a/docs/content/recipes/data-management/load-data-graphql/load-data-graphql.md
+++ b/docs/content/recipes/data-management/load-data-graphql/load-data-graphql.md
@@ -20,7 +20,7 @@ angular:
metaTitle: Load Data from a GraphQL API - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Data Management
-type: tutorial
+type: how-to
---
This tutorial shows two GraphQL approaches for Handsontable. The first approach loads data on the client with `fetch`, `loadData()`, and `updateData()`. The second approach uses the server-side DataProvider architecture for paging, sorting, filtering, and CRUD callbacks.
diff --git a/docs/content/recipes/data-management/load-data-rest-api/load-data-rest-api.md b/docs/content/recipes/data-management/load-data-rest-api/load-data-rest-api.md
index 4cb66dec8b..fbe5c2e679 100644
--- a/docs/content/recipes/data-management/load-data-rest-api/load-data-rest-api.md
+++ b/docs/content/recipes/data-management/load-data-rest-api/load-data-rest-api.md
@@ -23,7 +23,7 @@ angular:
metaTitle: Load Data from a REST API - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Data Management
-type: tutorial
+type: how-to
---
This tutorial shows how to fetch JSON from a REST API and populate Handsontable after initialization. It starts the grid with `data: []`, shows a loading message, then displays success or error feedback in the UI.
diff --git a/docs/content/recipes/data-management/server-side-django/server-side-django.md b/docs/content/recipes/data-management/server-side-django/server-side-django.md
index 09da56a67e..c64f886e78 100644
--- a/docs/content/recipes/data-management/server-side-django/server-side-django.md
+++ b/docs/content/recipes/data-management/server-side-django/server-side-django.md
@@ -19,7 +19,7 @@ angular:
metaTitle: Server-side Data with Django - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Data Management
-type: tutorial
+type: how-to
---
This tutorial shows how to wire Handsontable's `dataProvider` plugin to a [Django REST Framework](https://www.django-rest-framework.org/) (DRF) backend. The backend handles pagination, sorting, and filtering on the server. The frontend displays results and sends all edits back to the API.
diff --git a/docs/content/recipes/data-management/server-side-laravel/server-side-laravel.md b/docs/content/recipes/data-management/server-side-laravel/server-side-laravel.md
index 3e270d8be2..e990cc21c4 100644
--- a/docs/content/recipes/data-management/server-side-laravel/server-side-laravel.md
+++ b/docs/content/recipes/data-management/server-side-laravel/server-side-laravel.md
@@ -1,5 +1,5 @@
---
-type: tutorial
+type: how-to
id: m4n7p2q8
title: Server-side data with Laravel
metaTitle: Server-side data with Laravel - JavaScript Data Grid | Handsontable
diff --git a/docs/content/recipes/data-management/server-side-nestjs/server-side-nestjs.md b/docs/content/recipes/data-management/server-side-nestjs/server-side-nestjs.md
index ab0bcf27bf..b42f52bd39 100644
--- a/docs/content/recipes/data-management/server-side-nestjs/server-side-nestjs.md
+++ b/docs/content/recipes/data-management/server-side-nestjs/server-side-nestjs.md
@@ -1,5 +1,5 @@
---
-type: tutorial
+type: how-to
id: a3f82c91
title: Server-side Data with NestJS
metaTitle: Server-side Data with NestJS - JavaScript Data Grid | Handsontable
diff --git a/docs/content/recipes/data-management/server-side-rails/server-side-rails.md b/docs/content/recipes/data-management/server-side-rails/server-side-rails.md
index 80f2074483..343c97b450 100644
--- a/docs/content/recipes/data-management/server-side-rails/server-side-rails.md
+++ b/docs/content/recipes/data-management/server-side-rails/server-side-rails.md
@@ -13,7 +13,7 @@ tags:
- recipe
searchCategory: Recipes
category: Data Management
-type: tutorial
+type: how-to
---
This tutorial shows how to wire Handsontable's `dataProvider` plugin to a [Ruby on Rails](https://rubyonrails.org/) API-only backend. The backend handles pagination, sorting, and filtering on the server. The frontend displays results and sends every edit back to the API.
diff --git a/docs/content/recipes/data-management/server-side-spring/server-side-spring.md b/docs/content/recipes/data-management/server-side-spring/server-side-spring.md
index f259d2254d..4653cff482 100644
--- a/docs/content/recipes/data-management/server-side-spring/server-side-spring.md
+++ b/docs/content/recipes/data-management/server-side-spring/server-side-spring.md
@@ -1,5 +1,5 @@
---
-type: tutorial
+type: how-to
id: b7e4912f
title: Server-side Data with Spring Boot
metaTitle: Server-side Data with Spring Boot - JavaScript Data Grid | Handsontable
diff --git a/docs/content/recipes/data-management/sync-two-grids/sync-two-grids.md b/docs/content/recipes/data-management/sync-two-grids/sync-two-grids.md
index 6e7da7594c..afe2926b01 100644
--- a/docs/content/recipes/data-management/sync-two-grids/sync-two-grids.md
+++ b/docs/content/recipes/data-management/sync-two-grids/sync-two-grids.md
@@ -18,7 +18,7 @@ angular:
metaTitle: Sync two grids - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Data Management
-type: tutorial
+type: how-to
---
In this tutorial, you will sync edits from a master grid to a detail grid in real time. You will learn how to use `afterChange`, `setDataAtCell()`, and source guards to keep two Handsontable instances consistent without triggering infinite update loops.
diff --git a/docs/content/recipes/data-management/undo-redo-custom-ui/undo-redo-custom-ui.md b/docs/content/recipes/data-management/undo-redo-custom-ui/undo-redo-custom-ui.md
index 4b65a85e6b..b963dad700 100644
--- a/docs/content/recipes/data-management/undo-redo-custom-ui/undo-redo-custom-ui.md
+++ b/docs/content/recipes/data-management/undo-redo-custom-ui/undo-redo-custom-ui.md
@@ -20,7 +20,7 @@ angular:
metaTitle: Undo / redo with a custom UI - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Data Management
-type: tutorial
+type: how-to
---
In this tutorial, you will build external Undo and Redo buttons that stay in sync with the Handsontable undo/redo stack. You will learn how to use `afterChange`, `afterUndo`, and `afterRedo` to keep button states accurate at all times.
diff --git a/docs/content/recipes/editing-validation/dependent-dropdowns/dependent-dropdowns.md b/docs/content/recipes/editing-validation/dependent-dropdowns/dependent-dropdowns.md
index 053c948ec8..054f00602f 100644
--- a/docs/content/recipes/editing-validation/dependent-dropdowns/dependent-dropdowns.md
+++ b/docs/content/recipes/editing-validation/dependent-dropdowns/dependent-dropdowns.md
@@ -19,7 +19,7 @@ angular:
metaTitle: Dependent Dropdowns Recipe - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Editing and Validation
-type: tutorial
+type: how-to
---
In this tutorial, you will drive a child column dropdown from a parent column using a dependency map. You will learn how to use `afterChange`, `setCellMeta`, and `render` to update dropdown source options dynamically when the user selects a value in the parent column.
diff --git a/docs/content/recipes/editing-validation/editing-validation.md b/docs/content/recipes/editing-validation/editing-validation.md
index 7b54ab3d03..35f69938d7 100644
--- a/docs/content/recipes/editing-validation/editing-validation.md
+++ b/docs/content/recipes/editing-validation/editing-validation.md
@@ -6,7 +6,7 @@ canonicalUrl: /recipes/editing-validation
searchCategory: Recipes
hotPlugin: false
editLink: false
-type: tutorial
+type: how-to
id: k3m9p2x7
description: Recipes for dependent editors, validation patterns, submit-time checks, and dynamic cell configuration in Handsontable.
react:
diff --git a/docs/content/recipes/editing-validation/row-validation-error-summary/row-validation-error-summary.md b/docs/content/recipes/editing-validation/row-validation-error-summary/row-validation-error-summary.md
index a1a35c4be7..a14d826cbb 100644
--- a/docs/content/recipes/editing-validation/row-validation-error-summary/row-validation-error-summary.md
+++ b/docs/content/recipes/editing-validation/row-validation-error-summary/row-validation-error-summary.md
@@ -18,7 +18,7 @@ angular:
metaTitle: Row Validation Error Summary Recipe - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Editing and Validation
-type: tutorial
+type: how-to
---
In this tutorial, you will validate every row when the user clicks Submit and list all failures in an error summary outside the grid. You will learn how to highlight invalid cells with `htInvalid` and clear the error state automatically when the user corrects a cell.
diff --git a/docs/content/recipes/filtering-and-search/external-search-box/external-search-box.md b/docs/content/recipes/filtering-and-search/external-search-box/external-search-box.md
index 26fe3a245e..bf2bcb22e8 100644
--- a/docs/content/recipes/filtering-and-search/external-search-box/external-search-box.md
+++ b/docs/content/recipes/filtering-and-search/external-search-box/external-search-box.md
@@ -19,7 +19,7 @@ angular:
metaTitle: External search box recipe - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Filtering and Search
-type: tutorial
+type: how-to
---
In this tutorial, you will add a search input outside Handsontable that highlights matching cells as you type. You will learn how to use the `Search` plugin's `query()` method and `hot.render()` to apply real-time cell highlights from an external control.
diff --git a/docs/content/recipes/filtering-and-search/filtering-and-search.md b/docs/content/recipes/filtering-and-search/filtering-and-search.md
index 7a0ce50bdf..c33404a683 100644
--- a/docs/content/recipes/filtering-and-search/filtering-and-search.md
+++ b/docs/content/recipes/filtering-and-search/filtering-and-search.md
@@ -6,7 +6,7 @@ canonicalUrl: /recipes/filtering-and-search
searchCategory: Recipes
hotPlugin: false
editLink: false
-type: tutorial
+type: how-to
id: b7d4k9q2
description: Practical recipes for building external and in-grid search workflows with Handsontable.
react:
diff --git a/docs/content/recipes/filtering-and-search/highlight-search-matches/highlight-search-matches.md b/docs/content/recipes/filtering-and-search/highlight-search-matches/highlight-search-matches.md
index 6a729cff65..28f203471d 100644
--- a/docs/content/recipes/filtering-and-search/highlight-search-matches/highlight-search-matches.md
+++ b/docs/content/recipes/filtering-and-search/highlight-search-matches/highlight-search-matches.md
@@ -19,7 +19,7 @@ angular:
metaTitle: Highlight Search Matches - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Filtering and Search
-type: tutorial
+type: how-to
---
In this tutorial, you will highlight matched text fragments inside cells using a custom renderer. You will learn how to wrap matching substrings in `<mark>` tags safely and keep the highlights in sync with an external search input.
diff --git a/docs/content/recipes/filtering-search/filtering-search.md b/docs/content/recipes/filtering-search/filtering-search.md
index 8aae4cbbc6..9d1d127892 100644
--- a/docs/content/recipes/filtering-search/filtering-search.md
+++ b/docs/content/recipes/filtering-search/filtering-search.md
@@ -6,7 +6,7 @@ canonicalUrl: /recipes/filtering-search
searchCategory: Recipes
hotPlugin: false
editLink: false
-type: tutorial
+type: how-to
id: b9f32a7c
description: Practical recipes for building external filtering and search interfaces with Handsontable.
react:
diff --git a/docs/content/recipes/filtering-search/multi-column-filter-panel/multi-column-filter-panel.md b/docs/content/recipes/filtering-search/multi-column-filter-panel/multi-column-filter-panel.md
index 4283edaae3..f0f24ba4e2 100644
--- a/docs/content/recipes/filtering-search/multi-column-filter-panel/multi-column-filter-panel.md
+++ b/docs/content/recipes/filtering-search/multi-column-filter-panel/multi-column-filter-panel.md
@@ -20,7 +20,7 @@ angular:
metaTitle: Multi-column Filter Panel - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Filtering and Search
-type: tutorial
+type: how-to
---
In this tutorial, you will build an external filter panel with a category dropdown and a price range slider that controls Handsontable filtering. You will learn how to apply multiple conditions at once through the `Filters` plugin API and clear them all with a single button.
diff --git a/docs/content/recipes/import-export/export-to-pdf/export-to-pdf.md b/docs/content/recipes/import-export/export-to-pdf/export-to-pdf.md
index b496351348..74225f9d65 100644
--- a/docs/content/recipes/import-export/export-to-pdf/export-to-pdf.md
+++ b/docs/content/recipes/import-export/export-to-pdf/export-to-pdf.md
@@ -17,7 +17,7 @@ angular:
metaTitle: Export Handsontable to PDF - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Import and Export
-type: tutorial
+type: how-to
---
In this tutorial, you will export grid data to a downloadable PDF using jsPDF and jspdf-autotable. You will learn how to read the current grid state with `getData()` and `getColHeader()`, build a multi-page PDF table with headers, and trigger a browser download.
diff --git a/docs/content/recipes/import-export/import-csv-excel/import-csv-excel.md b/docs/content/recipes/import-export/import-csv-excel/import-csv-excel.md
index 47be1c736d..9f3cb891db 100644
--- a/docs/content/recipes/import-export/import-csv-excel/import-csv-excel.md
+++ b/docs/content/recipes/import-export/import-csv-excel/import-csv-excel.md
@@ -19,7 +19,7 @@ angular:
metaTitle: Import CSV or Excel - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Import and Export
-type: tutorial
+type: how-to
---
In this tutorial, you will let users drop or pick a CSV or Excel (`.xlsx`) file, parse it in the browser, and preview column headers before loading rows into Handsontable. You will learn how to use PapaParse and SheetJS to handle both formats, and how to update `colHeaders` and `columns` from the detected header row.
diff --git a/docs/content/recipes/import-export/import-export.md b/docs/content/recipes/import-export/import-export.md
index e214de5fb4..3a1fc69a4e 100644
--- a/docs/content/recipes/import-export/import-export.md
+++ b/docs/content/recipes/import-export/import-export.md
@@ -6,7 +6,7 @@ canonicalUrl: /recipes/import-export
searchCategory: Recipes
hotPlugin: false
editLink: false
-type: tutorial
+type: how-to
id: c4e8a91f
description: Practical recipes for moving data in and out of Handsontable.
react:
diff --git a/docs/content/recipes/introduction.md b/docs/content/recipes/introduction.md
index b372f28393..0403fea8e3 100644
--- a/docs/content/recipes/introduction.md
+++ b/docs/content/recipes/introduction.md
@@ -6,7 +6,7 @@ description: Developer recipes and step-by-step tutorials for building with Hand
permalink: /recipes/
canonicalUrl: /recipes/
searchCategory: Recipes
-type: tutorial
+type: how-to
react:
id: 1ae45a27
metaTitle: Recipes - React Data Grid | Handsontable
diff --git a/docs/content/recipes/performance/lazy-loading/lazy-loading.md b/docs/content/recipes/performance/lazy-loading/lazy-loading.md
index c1df8b8f19..61c6b797ac 100644
--- a/docs/content/recipes/performance/lazy-loading/lazy-loading.md
+++ b/docs/content/recipes/performance/lazy-loading/lazy-loading.md
@@ -21,7 +21,7 @@ angular:
metaTitle: Lazy loading with pagination - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Performance
-type: tutorial
+type: how-to
---
In this tutorial, you will load grid data page by page as the user scrolls to the bottom of the grid. You will learn how to use the `afterScrollVertically` hook and `hot.updateData()` to append new rows without resetting the scroll position or grid state.
diff --git a/docs/content/recipes/performance/performance.md b/docs/content/recipes/performance/performance.md
index 0a6a30d818..19953ece77 100644
--- a/docs/content/recipes/performance/performance.md
+++ b/docs/content/recipes/performance/performance.md
@@ -7,7 +7,7 @@ canonicalUrl: /recipes/performance
searchCategory: Recipes
hotPlugin: false
editLink: false
-type: tutorial
+type: how-to
id: e7c3b1a9
react:
id: f8d4c2ba
diff --git a/docs/content/recipes/performance/persist-column-layout/persist-column-layout.md b/docs/content/recipes/performance/persist-column-layout/persist-column-layout.md
index c49eba0401..664b2af92e 100644
--- a/docs/content/recipes/performance/persist-column-layout/persist-column-layout.md
+++ b/docs/content/recipes/performance/persist-column-layout/persist-column-layout.md
@@ -22,7 +22,7 @@ angular:
metaTitle: Persist and restore column widths and order - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Performance
-type: tutorial
+type: how-to
---
In this tutorial, you will save column widths and column order to `localStorage` as the user resizes or reorders columns. You will learn how to restore that layout on grid initialization so user preferences survive a page refresh.
diff --git a/docs/content/recipes/real-time/chartjs-sync/chartjs-sync.md b/docs/content/recipes/real-time/chartjs-sync/chartjs-sync.md
index 1e4ff25712..6e4a45469d 100644
--- a/docs/content/recipes/real-time/chartjs-sync/chartjs-sync.md
+++ b/docs/content/recipes/real-time/chartjs-sync/chartjs-sync.md
@@ -19,7 +19,7 @@ angular:
metaTitle: Sync selected rows to a Chart.js chart - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Real-time and Integrations
-type: tutorial
+type: how-to
---
In this tutorial, you will sync selected rows from a Handsontable grid to a Chart.js bar chart in real time. You will learn how to use `afterSelectionEnd` and `afterDeselect` hooks to read the current selection and update the chart without destroying and recreating it.
diff --git a/docs/content/recipes/real-time/real-time.md b/docs/content/recipes/real-time/real-time.md
index c5f3fe51e4..1cc1f40eb2 100644
--- a/docs/content/recipes/real-time/real-time.md
+++ b/docs/content/recipes/real-time/real-time.md
@@ -7,7 +7,7 @@ canonicalUrl: /recipes/real-time
searchCategory: Recipes
hotPlugin: false
editLink: false
-type: tutorial
+type: how-to
id: w4d6e8f0
react:
id: x5e7f9g1
diff --git a/docs/content/recipes/real-time/websocket-updates/websocket-updates.md b/docs/content/recipes/real-time/websocket-updates/websocket-updates.md
index 37c3da62f4..08a7dca26a 100644
--- a/docs/content/recipes/real-time/websocket-updates/websocket-updates.md
+++ b/docs/content/recipes/real-time/websocket-updates/websocket-updates.md
@@ -20,7 +20,7 @@ angular:
metaTitle: Real-time WebSocket Updates - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Real-time & Integrations
-type: tutorial
+type: how-to
---
In this tutorial, you will connect Handsontable to a WebSocket and update individual cells in real time. You will learn how to use `setDataAtCell` to apply streaming updates without re-rendering the entire grid.
diff --git a/docs/content/recipes/rendering-styling/conditional-row-coloring/conditional-row-coloring.md b/docs/content/recipes/rendering-styling/conditional-row-coloring/conditional-row-coloring.md
index 5cd860a557..acf9233ad6 100644
--- a/docs/content/recipes/rendering-styling/conditional-row-coloring/conditional-row-coloring.md
+++ b/docs/content/recipes/rendering-styling/conditional-row-coloring/conditional-row-coloring.md
@@ -18,7 +18,7 @@ angular:
metaTitle: Conditional row coloring - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Rendering and styling
-type: tutorial
+type: how-to
---
In this tutorial, you will color entire rows based on a status column value. You will learn how to use the `cells` callback and `className` to apply conditional CSS classes that update automatically after every edit.
diff --git a/docs/content/recipes/rendering-styling/frozen-summary-row/frozen-summary-row.md b/docs/content/recipes/rendering-styling/frozen-summary-row/frozen-summary-row.md
index b2cc58b465..e2ee569bba 100644
--- a/docs/content/recipes/rendering-styling/frozen-summary-row/frozen-summary-row.md
+++ b/docs/content/recipes/rendering-styling/frozen-summary-row/frozen-summary-row.md
@@ -19,7 +19,7 @@ angular:
metaTitle: Frozen summary row recipe - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Rendering and styling
-type: tutorial
+type: how-to
---
In this tutorial, you will pin a read-only totals row at the bottom of the grid. You will learn how to use `fixedRowsBottom`, recalculate aggregates on `afterChange`, and style the summary row with the `cells` callback.
diff --git a/docs/content/recipes/rendering-styling/rendering-styling.md b/docs/content/recipes/rendering-styling/rendering-styling.md
index 29242c628b..762590a388 100644
--- a/docs/content/recipes/rendering-styling/rendering-styling.md
+++ b/docs/content/recipes/rendering-styling/rendering-styling.md
@@ -6,7 +6,7 @@ canonicalUrl: /recipes/rendering-styling
searchCategory: Recipes
hotPlugin: false
editLink: false
-type: tutorial
+type: how-to
id: a8f3c91d
description: Practical recipes for row layout, summaries, custom renderers, and visual styling in Handsontable.
react:
diff --git a/docs/content/recipes/rendering-styling/sparkline-cell-renderer/sparkline-cell-renderer.md b/docs/content/recipes/rendering-styling/sparkline-cell-renderer/sparkline-cell-renderer.md
index 0888b5c6c4..1adc414b63 100644
--- a/docs/content/recipes/rendering-styling/sparkline-cell-renderer/sparkline-cell-renderer.md
+++ b/docs/content/recipes/rendering-styling/sparkline-cell-renderer/sparkline-cell-renderer.md
@@ -18,7 +18,7 @@ angular:
metaTitle: Sparkline cell renderer - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Rendering and styling
-type: tutorial
+type: how-to
---
In this tutorial, you will build a custom cell renderer that draws an inline SVG bar chart from an array of numbers in each cell. You will learn how to register a named renderer with `registerRenderer`, bundle it into a cell type with `registerCellType`, and assign it to a read-only sparkline column.
diff --git a/docs/content/recipes/themes/ant-design/ant-design.md b/docs/content/recipes/themes/ant-design/ant-design.md
index 8566711fcb..50a3171182 100644
--- a/docs/content/recipes/themes/ant-design/ant-design.md
+++ b/docs/content/recipes/themes/ant-design/ant-design.md
@@ -22,7 +22,7 @@ angular:
metaTitle: Handsontable with Ant Design - Angular Data Grid | Handsontable
searchCategory: Recipes
category: Themes
-type: tutorial
+type: how-to
---
In this tutorial, you will integrate Handsontable into a React app that uses Ant Design and align the grid with your design system tokens through the Theme API. You will learn how to map Ant Design tokens to Handsontable theme parameters so the grid matches your existing styles.
diff --git a/docs/content/recipes/themes/base-theme/base-theme.md b/docs/content/recipes/themes/base-theme/base-theme.md
index 07abc07939..5d78b4d2b2 100644
--- a/docs/content/recipes/themes/base-theme/base-theme.md
+++ b/docs/content/recipes/themes/base-theme/base-theme.md
@@ -1,5 +1,5 @@
---
-type: tutorial
+type: how-to
id: q7n4k2p9
title: Handsontable with Base Web
metaTitle: Handsontable with Base Web - React Data Grid | Handsontable
diff --git a/docs/content/recipes/themes/custom-theme/custom-theme.md b/docs/content/recipes/themes/custom-theme/custom-theme.md
index 02f5a68b19..ba8b989a03 100644
--- a/docs/content/recipes/themes/custom-theme/custom-theme.md
+++ b/docs/content/recipes/themes/custom-theme/custom-theme.md
@@ -1,5 +1,5 @@
---
-type: tutorial
+type: how-to
id: 8f3c91ab
title: Handsontable with shadcn/ui
metaTitle: Handsontable with shadcn/ui - React Data Grid | Handsontable
diff --git a/docs/content/recipes/themes/fluent-ui/fluent-ui.md b/docs/content/recipes/themes/fluent-ui/fluent-ui.md
index f23c0f3d9f..38ee1437bf 100644
--- a/docs/content/recipes/themes/fluent-ui/fluent-ui.md
+++ b/docs/content/recipes/themes/fluent-ui/fluent-ui.md
@@ -19,7 +19,7 @@ react:
metaTitle: Handsontable with Fluent UI - React Data Grid | Handsontable
searchCategory: Recipes
category: Themes
-type: tutorial
+type: how-to
---
In this tutorial, you will integrate Handsontable into a React app with Fluent UI so your grid follows Fluent colors, typography, and spacing. You will learn how to map Fluent UI tokens to Handsontable theme parameters through the Theme API.
diff --git a/docs/content/recipes/themes/mui-theme/mui-theme.md b/docs/content/recipes/themes/mui-theme/mui-theme.md
index fd0dc2377b..54f03663b4 100644
--- a/docs/content/recipes/themes/mui-theme/mui-theme.md
+++ b/docs/content/recipes/themes/mui-theme/mui-theme.md
@@ -1,5 +1,5 @@
---
-type: tutorial
+type: how-to
id: f2a7b9c1
title: Handsontable with MUI
metaTitle: Handsontable with MUI - JavaScript Data Grid | Handsontable
diff --git a/docs/content/recipes/themes/themes.md b/docs/content/recipes/themes/themes.md
index 1456321e63..98c2fffe0e 100644
--- a/docs/content/recipes/themes/themes.md
+++ b/docs/content/recipes/themes/themes.md
@@ -6,7 +6,7 @@ canonicalUrl: /recipes/themes
searchCategory: Recipes
hotPlugin: false
editLink: false
-type: tutorial
+type: how-to
id: a8f2d91c
description: Practical recipes for integrating Handsontable with design systems and UI libraries.
react: