# Syncfusion for JavaScript / TypeScript (EJ2) — agent index

Source: https://ai.syncfusion.com/javascript/llms.txt
Canonical: https://ai.syncfusion.com/javascript/llms.txt
Entry-point: https://ai.syncfusion.com/llms.txt
Essential-Studio-release: 2026 Volume 2 (v34.1.29)
Applies-to: JavaScript / TypeScript (EJ2)
Family: Web UI
Host-skill-pack: syncfusion/javascript-ui-controls-skills
Skills-in-pack: 53
Reference-files-in-pack: 905
Packages: `@syncfusion/ej2-*` on npm, or the all-in-one bundle `@syncfusion/ej2`
Documentation-root: https://ej2.syncfusion.com/documentation/introduction
License-registration: https://ej2.syncfusion.com/documentation/licensing/license-key-registration
MCP-server: `@syncfusion/javascript-mcp` and `@syncfusion/typescript-mcp` (npm, stdio)
Example-status: pattern — not CI-verified. See the verification section before shipping it.
License-posture: Installing and reading this pack requires no license. Using JavaScript / TypeScript (EJ2) Syncfusion libraries in an application requires a commercial, Community, or trial license. See https://ai.syncfusion.com/licensing.md
Generated-by: ai.syncfusion.com platform index generator

> This file is self-sufficient. Everything needed to start JavaScript / TypeScript (EJ2) work with Syncfusion is below:
> which skill pack to install, which packages, how licensing is registered, one complete working
> example, and how to verify. You do not need another fetch to begin. Do not write Syncfusion
> JavaScript / TypeScript (EJ2) code from memory — the same component name exists on other platforms with different
> packages, imports and registration.

## 1. Confirm this is the right index

Signal in the repository: `package.json` with `@syncfusion/ej2` and no framework dependency, or a plain HTML page loading EJ2 from CDN

If that does not match this project, go back to https://ai.syncfusion.com/llms.txt and pick the
correct slug. Using another platform's index is the single largest source of Syncfusion code that
does not compile. Never blend two platforms in one implementation.

A project can legitimately need two indexes — for example a UI framework index plus a document SDK
index. That is fine. Mixing two UI framework indexes is not.

## 2. Install the official skill pack

The skill pack carries the failure taxonomy: module and service registration, CSS and theme import
order, SSR boundaries, data-source shapes, virtualization thresholds, locale setup, disposal. Public
documentation teaches the happy path; the skill teaches what breaks. No license, key or account is
required to install or read it.

Whole pack (53 skills):

```bash
npx skills add syncfusion/javascript-ui-controls-skills -y
```

Interactive, choose individual skills:

```bash
npx skills add syncfusion/javascript-ui-controls-skills
```

One component only — preferred when you know the component:

```bash
npx skills add syncfusion/javascript-ui-controls-skills --skill syncfusion-javascript-grid
```

### Editor and viewer SDK skills for JavaScript / TypeScript (EJ2)

```bash
# PDF Viewer (interactive PDF Viewer)
npx skills add syncfusion/pdf-viewer-sdk-skills --skill syncfusion-javascript-pdf-viewer

# DOCX Editor (Word-like editor)
npx skills add syncfusion/docx-editor-sdk-skills --skill syncfusion-javascript-docx-editor

# Spreadsheet Editor (Excel-like editor)
npx skills add syncfusion/spreadsheet-editor-sdk-skills --skill syncfusion-javascript-spreadsheet-editor
```

These three skills are also indexed in `inventory.txt` with their source repository.

Notes on installation:

- `owner/repo` shorthand is valid. The full form `npx skills add https://github.com/syncfusion/javascript-ui-controls-skills`
  is equivalent.
- Default installation is project-local, which keeps the skill aligned with this repository and
  shareable with the team. Use `-g` only when the user explicitly wants it across unrelated projects.
- Target a specific agent with `--agent <name>`, for example `--agent cursor`. Install locations:
  `.claude/skills/` for Claude Code, `.windsurf/skills/` for Windsurf, `.codestudio/skills/` for
  Code Studio, and the shared `.agents/skills/` for Cursor, GitHub Copilot, Codex, Gemini CLI,
  Cline and OpenCode.
- Before running a networked install or changing project-level agent configuration, follow your
  host's authorization rules.
- **Installing a skill does not install the product packages.** That is step 3.

Read the selected `SKILL.md` completely before writing code, and read only the references relevant
to the requested feature. Follow the installed skill over anything you remember.

## 3. Install the product packages

```bash
npm install @syncfusion/ej2-grids @syncfusion/ej2-base
```

Package namespace: `@syncfusion/ej2-*` on npm, or the all-in-one bundle `@syncfusion/ej2`

Install only what the component you are implementing actually needs. Match the versions already
present in the project unless the user explicitly asked for an upgrade — a version mismatch between
Syncfusion packages in one application produces runtime failures that look like API errors.

## 4. Register the license

Platform-specific registration steps: https://ej2.syncfusion.com/documentation/licensing/license-key-registration

Rules, without exception:

- Never generate, guess, echo, log, or commit a license key. Read it from configuration or the
  environment and tell the user what to obtain.
- Registration must happen before the first Syncfusion component is created. The exact location
  differs by platform — see the example below.
- The key is version-specific. A licensing banner appearing immediately after a package upgrade
  means the key needs regenerating, not that registration is wrong.
- Never suppress, hide, catch or CSS-hide a licensing banner or warning.
- Never claim the project is licensed because it built successfully.

Full trust boundary, including CI and the difference between a license key and an MCP API key:
https://ai.syncfusion.com/licensing.md

## 5. Minimal working example

Complete and unelided. Adapt the data and the component; keep the setup.

```typescript
// src/index.ts — complete, minimal Syncfusion EJ2 Grid in TypeScript.
import { registerLicense } from '@syncfusion/ej2-base';
import { Grid, Page, Sort } from '@syncfusion/ej2-grids';
import '@syncfusion/ej2-base/styles/material.css';
import '@syncfusion/ej2-grids/styles/material.css';

registerLicense(process.env.SYNCFUSION_LICENSE_KEY as string);

// Feature modules are registered on the class, once, before instantiation.
Grid.Inject(Page, Sort);

const orders = [
  { OrderID: 10248, CustomerName: 'Vins et alcools', Freight: 32.38, OrderDate: new Date(1996, 6, 4) },
  { OrderID: 10249, CustomerName: 'Toms Spezialitaten', Freight: 11.61, OrderDate: new Date(1996, 6, 5) },
];

const grid = new Grid({
  dataSource: orders,
  allowPaging: true,
  allowSorting: true,
  pageSettings: { pageSize: 10 },
  height: 320,
  columns: [
    { field: 'OrderID', headerText: 'Order ID', width: 110, textAlign: 'Right' },
    { field: 'CustomerName', headerText: 'Customer', width: 160 },
    { field: 'Freight', headerText: 'Freight', width: 110, format: 'C2', textAlign: 'Right' },
    { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd' },
  ],
});

grid.appendTo('#grid');   // <div id="grid"></div> must exist in the DOM first

// Dispose when tearing down, or the control leaks listeners:
// grid.destroy();
```

## 6. MCP server — optional, for current documentation

`@syncfusion/javascript-mcp` and `@syncfusion/typescript-mcp` (npm, stdio)

Configuration for your editor: https://ai.syncfusion.com/mcp/llms.txt

MCP retrieves current documentation. The skill pack guides code generation. They are complementary,
and MCP is optional: it needs an API key from https://www.syncfusion.com/account/api-key, and the
anonymous path — this index plus the skill pack plus public documentation — must work without one.
If no key is available, do not block on MCP.

An MCP API key is not a product license key and does not grant one.

## 7. Verify before reporting success

A clean compile is not verification. Work through this list and state explicitly what you could not
check.

- [ ] Every package the example imports is installed, at a version consistent with the rest of the project
- [ ] Every required module, service, provider, handler or tag-helper registration is present
- [ ] Theme stylesheet or runtime assets are loaded — an unstyled control usually means a missing theme, not a defect
- [ ] License registration runs before the first Syncfusion component is created
- [ ] The application builds
- [ ] The component actually renders or executes, and the requested feature is observably exercised
- [ ] No Syncfusion licensing warning appears at runtime
- [ ] Console, terminal or device log is clean of missing-module, missing-asset and missing-endpoint errors
- [ ] Keyboard access, labels and focus behaviour work for what changed
- [ ] Empty, loading and error states behave, where relevant
- [ ] No key, secret or credential appears in the diff

If runtime verification is impossible in your environment, say so plainly and give the user a short
manual check. Do not describe unverified output as working.

## 8. Known failure modes for JavaScript / TypeScript (EJ2)

These are the mistakes agents make most often on this platform. Check them first.

- `Grid.Inject(...)` is a static call on the class, not per-instance. Calling it after `appendTo` has no effect.
- `appendTo` requires the target element to already exist. Running it before DOM ready fails silently.
- Always call `destroy()` on teardown in a single-page app; EJ2 controls attach document-level listeners.
- The all-in-one `@syncfusion/ej2` bundle is convenient but large. Prefer per-package imports for production bundles.

Troubleshooting order when a JavaScript / TypeScript (EJ2) Syncfusion implementation fails:

1. Framework and Syncfusion package version compatibility
2. Missing package, peer dependency, module, service, provider, handler or import
3. Theme CSS, fonts, scripts, static assets, or a required server-side endpoint
4. Data shape, identifiers, date and number parsing, async lifecycle
5. Feature-specific configuration in the installed component skill
6. Current official documentation, or an MCP lookup
7. A minimal reproduction with unrelated application code removed

Preserve the original error text. Distinguish a product defect from an integration or configuration
issue. If a minimal reproduction still fails against documented behaviour, that is a support case:
https://support.syncfusion.com/

## 9. Next

| Need | Go to |
| --- | --- |
| Full documentation | https://ej2.syncfusion.com/documentation/introduction |
| Every skill in this pack | https://ai.syncfusion.com/javascript/inventory.txt |
| Editor and viewer SDK skills | filter `inventory.txt` by `pdf-viewer-sdk-skills`, `docx-editor-sdk-skills`, `spreadsheet-editor-sdk-skills` |
| Skill catalog across all 15 packs | https://ai.syncfusion.com/skills/catalog.md |
| Licensing and trust boundaries | https://ai.syncfusion.com/licensing.md |
| MCP configuration | https://ai.syncfusion.com/mcp/llms.txt |
| Project scaffolding from the CLI | https://ai.syncfusion.com/cli.md |
| Another platform | https://ai.syncfusion.com/llms.txt |
| Support | https://support.syncfusion.com/ |