---
menu-title: JavaScript package
meta-title: Package generator JavaScript package content | CKEditor 5 Framework Documentation
meta-description: Learn how to generate a standalone JavaScript package with the CKEditor 5 package generator, including setup and build configuration.
category: package-generator
order: 42
modified_at: 2026-01-21
---

# JavaScript package content

This guide describes the contents of the `JavaScript` package generated by the {@link framework/development-tools/package-generator/using-package-generator Package Generator}.

## Structure of the project

An overview of the project's directory structure:

```plain
├─ lang
│  └─ contexts.json                # Entries used for creating translations.
├─ sample
│  ├─ index.html                   # The HTML file for the development sample.
│  └─ index.js                     # Editor setup used when running the `start` command.
├─ scripts
│  └─ synchronize-translations.js  # Validates and synchronizes translation files.
├─ src
│  ├─ pluginname.js                # The plugin with example functionality.
│  ├─ index.js                     # The modules exported by the package.
│  └─ **/*.js                      # All JavaScript source files should be saved here.
├─ tests
│  ├─ pluginname.js
│  └─ **/*.js                      # All tests should be saved here.
├─ theme
│  ├─ icons
│  │  ├─ ckeditor.svg              # The CKEditor 5 icon displayed in the toolbar.
│  │  └─ **/*.svg                  # All icon files should be saved here.
│  ├─ styles
│  │  └─ **/*.css                  # All stylesheet files should be saved here.
│  └─ **/*.css                     # All CSS files should be saved here.
├─ .editorconfig                   # See link below for details.
├─ .gitattributes                  # See link below for details.
├─ .gitignore                      # See link below for details.
├─ .stylelintrc                    # Stylelint configuration file.
├─ ckeditor5-metadata.json         # See link below for details.
├─ eslint.config.js                # ESLint configuration file.
├─ LICENSE.md                      # All created packages fall under the MIT license.
├─ package.json                    # See link below for details.
├─ README.md                       # Description of your project and usage instructions.
└─ vite.config.js                  # Vite configuration file.
```

Guides for developing some of the files:

* [.editorconfig](https://editorconfig.org/)
* [.gitattributes](https://git-scm.com/docs/gitattributes)
* [.gitignore](https://git-scm.com/docs/gitignore)
* {@link framework/contributing/package-metadata ckeditor5-metadata.json}
* [package.json](https://docs.npmjs.com/cli/v7/configuring-npm/package-json)
* [vitest.config.js](https://vitest.dev/config/)

## Npm scripts

The npm scripts are a convenient way to provide commands in a project. They are defined in the `package.json` file and shared with other people contributing to the project. It ensures that the developers use the same commands with the same options (flags).

You can execute all the scripts by running `npm run <script>`. Pre-commands and post-commands with matching names will be run for those as well.

The following scripts are available in the package.

### `start`

Starts an HTTP server with the live-reload mechanism that allows previewing and testing of plugins available in the package.

Examples:

```bash
# Starts the server and opens the browser.
npm run start
```

### `test`

Allows executing unit tests for the package specified in the `tests/` directory using [Vitest](https://vitest.dev/) testing framework. To check the code coverage, add the `--coverage` modifier. See other [CLI flags](https://vitest.dev/guide/cli.html) in Vitest.

Examples:

```bash
# Execute tests.
npm run test

# Generate code coverage report after each change in the sources.
npm run test -- --coverage --watch
```

### `test:debug`

Allows executing unit tests for the package specified in the `tests/` directory using [Vitest](https://vitest.dev/) testing framework with the possibility of debugging them. Once Vitest starts, it will stop execution and wait for you to open developer tools that can connect to Node.js inspector.

Examples:

```bash
# Execute tests in the debug mode.
npm run test:debug
```

### `lint`

Runs ESLint, which analyzes the code (all `*.js` files) to quickly find problems.

Examples:

```bash
# Execute ESLint.
npm run lint
```

### `stylelint`

Similar to the `lint` task, `stylelint` analyzes the CSS code (`*.css` files in the `theme/` directory) in the package.

Examples:

```bash
# Execute stylelint.
npm run stylelint
```

### `build`

Creates npm and browser builds of your plugin. These builds can be added to the editor by following the {@link getting-started/setup/configuration Configuring CKEditor&nbsp;5 features} guide.

Examples:

```bash
# Builds the `npm` and browser files thats are ready to publish.
npm run build
```

### `translations:synchronize`

Synchronizes translation messages (arguments of the `t()` function) by performing the following steps:

 * Collect all translation messages from the package by finding `t()` calls in source files.
 * Perform the validations to detect if translation context is valid. It checks whether the provided values do not interfere with the values specified in the `@ckeditor/ckeditor5-core` package, and there is no missing, unused or duplicated context entries.
 * If there are no validation errors, update all translation files (`*.po` files) to be in sync with the context file:
   * unused translation entries are removed,
   * missing translation entries are added with empty string as the message translation,
   * missing translation files are created for languages that do not have own `*.po` file yet.

The task may end with an error if one of the following conditions is met:

* Found the `Unused context` error &ndash; entries specified in the `lang/contexts.json` file are not used in source files. They should be removed.
* Found the `Duplicated contex` error &ndash; some of the entries are duplicated. Consider removing them from the `lang/contexts.json` file, or rewriting them.
* Found the `Missing context` error &ndash; entries specified in source files are not described in the `lang/contexts.json` file. They should be added.

Examples:

```bash
npm run translations:synchronize
```

### `translations:validate`

Performs only validation steps described in [`translations:synchronize`](#translationssynchronize) script without modifying any files. It only checks the correctness of the context file against the `t()` function calls.

Examples:

```bash
npm run translations:validate
```

### `prepare`

Npm supports some special [life cycle scripts](https://docs.npmjs.com/cli/v7/using-npm/scripts#life-cycle-scripts). They allow automatically performing operations in certain situations:

* `prepare` &ndash; Triggers during package creation and before publishing.

This script creates npm and browser builds of your plugin.

## How to change ESLint configuration

To change the ESLint configuration, edit the [.eslintrc.js](https://github.com/ckeditor/ckeditor5-package-generator/blob/master/eslint.config.js) file. It is also a good idea to check out the [ESLint documentation](https://eslint.org/docs/rules/).

### Why are the predefined ESLint rules recommended

To make CKEditor&nbsp;5 plugins compatible with each other, we needed to introduce certain limitations when importing files from packages. To learn more, visit the {@link updating/nim-migration/dll-builds Migrating from DLL builds} guide.

## Translations

Packages created by this tool, just like the entirety of the CKEditor&nbsp;5 ecosystem, include support for localization. If you wish to include translations for your package, visit the {@link framework/deep-dive/localization dedicated translation guide} to learn more.

The package generator provides a synchronization tool to help preparing files needed for translation into other languages. We recommend the following flow when dealing with translations:

1. Call `npm run translations:synchronize` &ndash; Prepare the translation files in all supported languages. It creates files for each language in `lang/translations` directory in [PO format](https://www.gnu.org/software/gettext/manual/html_node/PO-Files.html). Each `*.po` file contains empty entry for every message found in the `lang/contexts.json` file.
2. Provide translations to messages in the generated `lang/translations/*.po` files.

## Reporting issues

If you found a problem with CKEditor&nbsp;5 or the package generator, report an issue:

* [CKEditor&nbsp;5](https://github.com/ckeditor/ckeditor5/issues/new/choose)
* [The package generator](https://github.com/ckeditor/ckeditor5-package-generator/issues/new)
