@contentful/field-editors

This is the monorepo for all field editors and apps by Contentful.

Since these are developed using the App SDK, this will allow you to understand how each editor works, fork existing apps or create your own apps based on existing Contentful components' source rather than starting from scratch.

It uses Typescript, React, Forma36 (a design system & component library by Contentful) and is managed using Lerna. It supports translations with linguiJs. Code is automatically formatted with Prettier and checked with ESLint on every commit using Git hooks.

Available field editors

Playground with all components: http://contentful-field-editors.colorfuldemo.com/

This repository has all editorial components that you can find in the Contentful Web application. You can run each of these component as a custom field app or compose them into a custom entry app. You could also use these components as the basis for a custom Contentful App

• Single line editor
• Multi line editor
• Dropdown
• Tags
• List
• Checkbox
• Radio
• Boolean
• Rating
• Number
• Url
• JSON
• Location
• Date
• Markdown
• Slug
• Entry reference / Media
• Rich Text

Also this repository contains shared packages that simplify development and testing of field and entry apps.

Feel free to reach out to us with the ones that'd be the most useful to have here by filing a Github issue!

Styles

To achieve the same field editor look as in the Contentful UI, you need to render GlobalStyled component.

import { GlobalStyles } from '@contentful/f36-components';

function Root() {
  return (
    <>
      <GlobalStyles />
      <MyApp />
    </>
  );
}

Linting

Ratchet approach

This repo uses a ratchet linter pattern. Each package/app has an eslint-suppressions.json file that records the count of known violations per file per rule. ESLint silences those existing violations so they don't block CI or development — but only up to the recorded count. Any new violation of the same rule in the same file still surfaces as an error.

The suppression files are a baseline that should only ever shrink. They must never be edited by hand or grown to hide a violation — adding a suppression is always a deliberate engineering decision, made via the commands below, never by manually editing the JSON.

Commands

Lint all packages (via Lerna's --stream, one process per package):

yarn lint

Lint a single package (faster for local development):

cd packages/<name>
yarn lint

Pre-commit hook

On every commit, the pre-commit hook runs lint-staged inside each package via Lerna. It automatically removes stale suppressions (--prune-suppressions) for any file you changed. The updated eslint-suppressions.json is not included in the triggering commit — it appears as a modified file afterwards and must be committed separately (a post-commit hook reminds you of this).

Introducing a new lint rule

When a new ESLint rule triggers many existing violations across a package, use --suppress-all to baseline the current state before the rule becomes an error. Run this from inside the affected package:

cd packages/<name>
npx eslint src --suppress-all

This writes the current violations into that package's eslint-suppressions.json. Commit the updated suppression file together with the rule change. From that point on the ratchet applies: existing violations stay suppressed, all new code must comply.

Getting started & contributing

Requirements

• Node.js: >=20
• Yarn: >=1.21.1

To install all dependencies and build all packages run the following commands from the root of the project.

yarn
yarn build

See CONTRIBUTING.md for more information on how to get started.

We'd love to have your helping hand on @contentful/field-editors!

Creating a canary release

Canary releases allow you to test changes before they are merged to the main branch.

Steps

1. Create a pull request targeting the canary branch (instead of master)
2. Once the PR is merged to canary, CircleCI will automatically:
   • Build all packages
   • Run tests
   • Create a canary version (e.g., 1.2.3-canary.123.abc1234)
   • Publish to npm with the canary tag
3. You can install the canary version in your project:

   yarn add @contentful/field-editor-reference@canaryversion

Notes

• Canary releases are temporary and intended for testing only
• Each merge to the canary branch will create a new canary version
• Canary versions follow the format: {version}-canary.{prNumber}.{shortSha}

Links & related repositories

• App SDK
• Create Contentful App CLI
• Forma 36

Code of Conduct

We want to provide a safe, inclusive, welcoming, and harassment-free space and experience for all participants, regardless of gender identity and expression, sexual orientation, disability, physical appearance, socioeconomic status, body size, ethnicity, nationality, level of experience, age, religion (or lack thereof), or other identity markers.

Read our full Code of Conduct.

License

All field editor packages are open source software licensed as MIT.

Internationalization

The latest versions of field editors are internationalized with lingui. Any app using the latest field editors needs to include the @lingui/core and @lingui/message-utils packages and initialize lingui like this before rendering field editors:

import { i18n } from '@lingui/core';
import { compileMessage } from '@lingui/message-utils/compileMessage';

...

i18n.setMessagesCompiler(compileMessage);
i18n.activate('en-US');  // use desired locale code

const App = () => {
  ...
};