# Strapi Field Presentation **Design clearer, better organized Strapi Content Manager forms without changing your content schemas.** [![npm version](https://img.shields.io/npm/v/strapi-plugin-field-presentation?color=4945ff)](https://www.npmjs.com/package/strapi-plugin-field-presentation) [![npm downloads](https://img.shields.io/npm/dm/strapi-plugin-field-presentation)](https://www.npmjs.com/package/strapi-plugin-field-presentation) [![Strapi v5](https://img.shields.io/badge/Strapi-v5-4945ff)](https://strapi.io/) [![license](https://img.shields.io/npm/l/strapi-plugin-field-presentation)](./LICENSE)
Field Presentation plugin demo
## What it does Field Presentation adds a visual presentation layer to Strapi's Content Manager. Configure labels, contextual hints, descriptions, field order, and responsive 12-column layouts for every collection type and single type from one settings screen. Your content type schemas and stored entry data stay untouched. Presentation settings are stored separately by the plugin. | Feature | What editors get | | --- | --- | | Custom labels | Human-friendly field names without renaming schema attributes | | Clickable hints | Accessible information icons with hover, focus, and click tooltips | | Descriptions | Persistent helper text displayed below the input | | Field ordering | Drag-and-drop sorting with keyboard-friendly move controls | | 12-column grid | `3`, `4`, `6`, `8`, or `12` column widths with automatic row packing | | Broad coverage | The same workflow for collection types and single types | | Localization | English defaults with bundled English and Turkish translations | ## Screenshots ### Arrange fields on a 12-column canvas Set related fields side by side, reorder them, and preview the final row structure before saving. ![12-column field layout](https://cdn.jsdelivr.net/npm/strapi-plugin-field-presentation@1.0.1/assets/field-presentation-overview.png) ### Edit presentation settings in a modal Field editing stays in context. Labels, hints, descriptions, and width controls open in a focused modal with a live preview. ![Field presentation editor modal](https://cdn.jsdelivr.net/npm/strapi-plugin-field-presentation@1.0.1/assets/field-editor-modal.png) ### Give editors contextual help Hints use the native Strapi tooltip pattern and can be opened by hover, keyboard focus, or click. ![Clickable field hint tooltip](https://cdn.jsdelivr.net/npm/strapi-plugin-field-presentation@1.0.1/assets/field-hint-tooltip.png) ## Compatibility | Requirement | Supported version | | --- | --- | | Strapi | `>=5.52.0 <6.0.0` | | Node.js | `20` through `26` | The plugin is built and tested against the latest Strapi release, currently `5.52.0`. ## Installation Install the package in your Strapi application: ```bash npm install strapi-plugin-field-presentation ``` Enable it in `config/plugins.ts`: ```ts export default () => ({ 'field-presentation': { enabled: true, }, }); ``` Rebuild the admin panel and start Strapi: ```bash npm run build npm run develop ``` ## Usage 1. Open **Settings → Global Settings → Field Presentation**. 2. Select a collection type or single type. 3. Drag fields into the desired order. 4. Open a field to set its label, hint, description, and grid width. 5. Save the configuration and open the content type in Content Manager. For example, set two fields to `6 columns` to place them side by side, or three fields to `4 columns` to create a three-column row. Fields that Strapi marks as fixed-width retain their required width. ## Localization The plugin follows the active Strapi Admin locale. English is the fallback language, and English (`en`) and Turkish (`tr`) catalogs are bundled. Host applications can provide additional translations by overriding the plugin's namespaced message keys. Every key starts with `field-presentation.`. ## Permissions The settings screen is protected by the `plugin::field-presentation.settings.manage` admin permission. Hints remain visible to authenticated admin users who can open the relevant Content Manager form. ## Local development When developing the plugin inside a Strapi application, resolve its source directory explicitly: ```ts export default () => ({ 'field-presentation': { enabled: true, resolve: './src/plugins/field-presentation', }, }); ``` Then run the plugin checks from its directory: ```bash npm install npm run build npm run verify ``` ## License [MIT](./LICENSE)