@foomo/contentfultree

A React component that displays a navigable tree of Contentful entries and their references inside a Contentful App.

Features

• Recursively loads and displays entry hierarchies from Contentful
• Expand/collapse child nodes on demand
• Click-to-edit opens entries in a slide-in panel
• Publishing status indicators (draft, changed, published)
• Configurable icon registry with built-in SVG icons
• Multi-locale support

Installation

pnpm add @foomo/contentfultree

Peer dependencies

Package	Version
react	>= 18
@contentful/app-sdk	>= 4
contentful-management	>= 12

Tailwind CSS setup

This library uses Tailwind CSS utility classes for styling. It does not ship its own CSS — the consumer's Tailwind build generates the styles.

Add the @source directive to your CSS entry point so Tailwind scans the library's output:

@import "tailwindcss";
@source "../node_modules/@foomo/contentfultree/dist";

Usage

import { ContentTree } from '@foomo/contentfultree'

const ContentTreePage = ({ sdkInstance, cma }) => (
  <ContentTree
    sdkInstance={sdkInstance}
    cma={cma}
    rootType="siteRoot"
    nodeContentTypes={['nodes', 'homepages']}
    titleFields={['name', 'title']}
    locales={['de', 'fr', 'en']}
    iconRegistry={{
      siteRoot: 'WORLD',
      contentPage: 'PAGE',
      frontendApp: 'APP',
      shopCategory: 'CART',
      folder: 'FOLDER',
      shortcut: 'SHORTCUT',
      shopBrands: 'LOVE',
    }}
  />
)

Props

Prop	Type	Required	Description
sdkInstance	PageAppSDK	Yes	Contentful App SDK instance
cma	PlainClientAPI	Yes	Contentful Management API client
rootType	string	Yes	Content type ID of the root entries
nodeContentTypes	string[]	Yes	Field names that contain child references
titleFields	string[]	Yes	Field names to use as the display title (first match wins)
locales	string[]	Yes	Locale codes to support (first is the default)
indentation	number	No	Base indentation depth in em (default: 1)
iconRegistry	Record<string, IconId>	No	Maps content type IDs to icon identifiers

Available icons

WORLD PAGE APP CART FOLDER LOVE SHORTCUT

Entries with content types not in the registry display a default circle icon.

Development

pnpm install
pnpm build       # compile with tsc
pnpm dev         # watch mode
pnpm lint        # biome check
pnpm rebuild     # clean + build

License

Distributed under MIT License, please see license file within the code for more details.

Made with ♥ foomo by bestbytes