Creating Docs Examples

Required Elements in Every Example

1. Imports - use the base import and explicit registration:

   import Handsontable from 'handsontable/base';
   import { registerAllModules } from 'handsontable/registry';
   registerAllModules();
   

   For examples that demonstrate tree-shaking, import individual plugins and cell types instead of registerAllModules().

2. License key - always include:

   licenseKey: 'non-commercial-and-evaluation'
   

3. Container element - target the conventional #example div:

   const container = document.querySelector('#example');
   

Framework-Specific Patterns

React (TSX/JSX):

import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
registerAllModules();

const App = () => {
  return <HotTable data={data} licenseKey="non-commercial-and-evaluation" />;
};

Angular:

• Component logic goes in the .ts file.
• Template markup goes in the .html file using <hot-table>.

Vue 3:

• Component logic goes in the .js file.
• Template markup goes in the .html file using <hot-table>.

Embedding in the Guide

After creating example files, embed them in the guide's .md file using the @[code] directive inside an ::: example container. See the writing-docs-pages skill for the full embedding syntax.

Checklist

• TypeScript source written and tested.
• JS variant generated (not hand-written).
• licenseKey: 'non-commercial-and-evaluation' present.
• Imports use handsontable/base + registration pattern.
• Example stays within 25-60 lines.
• One concept per example with realistic data.