syncfusion-javascript-common

Q: How do I install syncfusion-javascript-common?

Run npx skills add https://github.com/syncfusion/javascript-ui-controls-skills --skill syncfusion-javascript-common in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-javascript-common/ (personal) or .claude/skills/syncfusion-javascript-common/ (project).

by syncfusionFrontend & Design

Common utilities and features for Syncfusion JavaScript controls. Use this skill when the user needs to implement animations, drag-and-drop, state persistence, RTL support, localization, globalization, security, templates, and advanced features for Syncfusion JavaScript controls.

Installs: 74
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/javascript-ui-controls-skills --skill syncfusion-javascript-common

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-javascript-common automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Common Features in Syncfusion JavaScript Controls

Syncfusion JavaScript controls include comprehensive common utilities and features that enhance user experience, ensure cross-cultural support, and provide foundational capabilities across all controls. This skill covers installation setup, animations, globalization, state management, and security considerations for building robust JavaScript applications.

Documentation and Navigation Guide
Quick Start
Common Features

Documentation and Navigation Guide

Getting Started & Installation

📄 Read: references/getting-started.md

Webpack Setup - Integrating Syncfusion controls with Webpack bundler
Electron Setup - Using Syncfusion controls in Electron desktop applications
Cordova Setup - Integrating controls in Apache Cordova mobile apps
Ionic Setup - Configuring Syncfusion controls for Ionic framework
Meteor Setup - Setting up controls in Meteor.js applications
SharePoint Setup - Deploying Syncfusion controls in SharePoint environments

Globalization

📄 Read: references/globalization.md

Right-to-left (RTL) support for Arabic, Hebrew, Persian languages
Localization (l10n) for multi-language support
Internationalization (i18n) with CLDR data
Number and currency formatting
Date and time formatting

Advanced Features

📄 Read: references/advanced-features.md)

Animation effects (FadeIn, ZoomOut, SlideUp, etc.)
Animation timing (duration, delay, global settings)
Drag-and-drop interactions (Draggable, Droppable)
Template customization and optimization
State persistence with enablePersistence
Security best practices and HTML sanitization

Quick Start

Install Syncfusion JavaScript control package and theme package

npm install @syncfusion/ej2-grids@latest @syncfusion/ej2-tailwind3-theme@latest --save

Note: The @syncfusion/ej2-base package is a dependency for all Syncfusion controls and will be automatically installed when you install any Syncfusion JavaScript package. You don't need to explicitly add it to your package.json file.

Import Styles

@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/grid/index.css";

Register License Key

Step 1: Set the environment variable:

# Windows
setx SYNCFUSION_LICENSE "Your_License_Key_Here"

# Mac/Linux
export SYNCFUSION_LICENSE='Your_License_Key_Here'

Step 2: Activate the license using NPX command:

npx syncfusion-license activate

Note: For alternative license registration methods, kindly refer to the Syncfusion license key registration documentation.

Basic Control Setup

import { Grid, Page } from '@syncfusion/ej2-grids';

const data: Object[] = [
  { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
  { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 }
];

const grid: Grid = new Grid({
  dataSource: data,
  allowPaging: true,
  columns: [
    { field: 'OrderID', width: 100 },
    { field: 'CustomerID', width: 100 },
    { field: 'Freight', width: 100, format: 'C2' }
  ]
});

// Inject required services
Grid.Inject(Page);

grid.appendTo('#grid');

<div id="grid"></div>

Common Features

Enable State Persistence

import { Grid } from '@syncfusion/ej2-grids';

const grid: Grid = new Grid({
  dataSource: data,
  enablePersistence: true
});

grid.appendTo('#grid');

Enable RTL Support

import { enableRtl } from '@syncfusion/ej2-base';
import { ListView } from '@syncfusion/ej2-lists';

// Global RTL enablement
enableRtl(true);

// OR per-control
const listView: ListView = new ListView({
  enableRtl: true
});
listView.appendTo('#listview');

Add Animation Effects

import { Animation } from '@syncfusion/ej2-base';

const element: HTMLElement | null = document.getElementById('element');

if (element) {
  const animation: Animation = new Animation({ 
    duration: 5000, 
    delay: 2000 
  });
  animation.animate(element, { name: 'FadeOut' });
}

Implement Drag-and-Drop

import { Draggable, Droppable } from '@syncfusion/ej2-base';

const draggableElement: HTMLElement | null = document.getElementById('draggable');
const droppableElement: HTMLElement | null = document.getElementById('droppable');

if (draggableElement && droppableElement) {
  const draggable: Draggable = new Draggable(draggableElement, { 
    clone: false 
  });
  
  const droppable: Droppable = new Droppable(droppableElement, {
    drop: (e: DropEventArgs) => {
      if (e.droppedElement) {
        e.droppedElement.textContent = 'Dropped!';
      }
    }
  });
}

<div id="draggable">Drag me</div>
<div id="droppable">Drop here</div>

FAQ

What does the syncfusion-javascript-common skill do?

How do I install syncfusion-javascript-common?

Run npx skills add https://github.com/syncfusion/javascript-ui-controls-skills --skill syncfusion-javascript-common in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-javascript-common/ (personal) or .claude/skills/syncfusion-javascript-common/ (project).

Which AI agents can use syncfusion-javascript-common?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-javascript-common safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-javascript-common?

It is published by syncfusion in syncfusion/javascript-ui-controls-skills. It has 74 recorded installs.