Menu
Use when creating standalone examples in examples/next/docs/ for visual regression testing or documentation demos - covers the Vite-based example structure, sample data patterns, and multi-feature demonstration
Use for ANY work touching the `handsontable/` core package: fixing bugs, adding features, modifying TypeScript types, removing as-casts, writing or debugging plugins, editors, renderers, validators, cell types, hooks, shortcuts, selection, helpers, index translations, or i18n. Also use for how-to questions about core internals (plugin lifecycle, coordinate systems, hook registration, TypeScript conventions). Triggers on file paths under `handsontable/src/` (excluding `3rdparty/walkontable/` which has its own skill), or when the user describes a symptom in the core grid without naming a file. This is the primary entry point for all core Handsontable development — when in doubt, load it.
Use when creating code examples for documentation pages - JavaScript, TypeScript, React, Angular, and Vue variants with proper imports, registration, and license key
Use the pre-built code-review-graph knowledge graph for ANY cross-file task in this monorepo — exploring code, debugging symptom→root-cause, planning a safe refactor/rename, or reviewing a branch/PR. Reach for this BEFORE manual Grep+Read of call chains; results are 2-6x cheaper. Trigger on "who calls X", "what imports Y", "where is X used", "dependency chain", "blast radius", "trace this bug", "rename X across the codebase", "find dead code", "what would break if I change", "review this PR" — or any question that spans multiple files, even when Grep seems enough.
Use when working with row or column indexes in Handsontable - translating between physical, visual, and renderable coordinates, using IndexMapper, or debugging index-related bugs where rows or columns appear in wrong positions
Use when creating or modifying a Handsontable cell type that composes an editor, renderer, and validator into a reusable configuration object registered by name
Use when reviewing changed or staged code, a branch, or a PR in the Handsontable monorepo across architecture, code quality, performance, and accessibility. Covers SOLID / Law of Demeter / plugin decoupling / breaking-changes policy, custom ESLint rules / JSDoc / naming / cognitive complexity, large-array and render-batching performance, and WCAG 2.1 AA + keyboard navigation. Trigger when asked to review changes, check a diff against Handsontable conventions, assess architectural correctness, spot performance regressions, or verify accessibility — and as the design lens before or while implementing any core change.
| name | creating-visual-test-examples |
| path | examples/** |
| description | Use when creating standalone examples in examples/next/docs/ for visual regression testing or documentation demos - covers the Vite-based example structure, sample data patterns, and multi-feature demonstration |
This skill covers how to build standalone Vite-based examples in examples/next/docs/. These examples serve as both visual regression test targets and live documentation demos.
All standalone demos live under examples/next/docs/js/. Each demo gets its own directory (e.g., examples/next/docs/js/demo/).
examples/next/docs/js/demo/
index.html # Minimal HTML: just <div id="example"> and a script tag
package.json # Dependencies (handsontable, vite)
vite.config.js # Vite build configuration
LICENSE.txt # License file
src/
index.js # Main entry - imports, registers, creates the grid
constants.js # Sample data arrays and configuration constants
styles.css # Custom styles for the demo
spec/
Smoke.spec.js # Puppeteer smoke test
1. Import from handsontable/base and register explicitly. Do not use the full bundle. Import only the plugins, cell types, and features the demo needs:
import Handsontable from 'handsontable/base';
import { registerPlugin, ContextMenu, Filters } from 'handsontable/plugins';
import { registerCellType, NumericCellType } from 'handsontable/cellTypes';
registerPlugin(ContextMenu);
registerPlugin(Filters);
registerCellType(NumericCellType);
2. Demonstrate multiple features together. Unlike documentation examples (one concept each), visual test examples should combine several features in a single grid to verify they render correctly together. For example: column sorting + filters + dropdown menu + hidden columns + context menu.
3. Use comprehensive, realistic sample data. Extract data into src/constants.js. Use domain-appropriate content (company names, dates, currencies, countries) rather than placeholder strings. Aim for enough rows (20-50+) to demonstrate scrolling behavior.
4. Always include licenseKey: 'non-commercial-and-evaluation'.
5. Target the #example container defined in index.html.
Every example must include a smoke test in spec/Smoke.spec.js. The smoke test launches Puppeteer, navigates to the dev server, and asserts that the grid rendered:
it('should render Handsontable', async () => {
const hotCell = await page.$('.handsontable td');
await expect(hotCell).toBeTruthy();
});
Use process.env.TEST_URL || 'http://localhost:8080' as the base URL.
See examples/next/docs/js/demo/src/index.js for a complete working example that registers plugins and cell types individually, configures column types, enables multiple features, and uses helper functions for sample data generation.