# Shared sections

Reuse one published section across layouts while keeping deliberate copies independent.

GroCMS 0.1.0 · Website design · Administrators and designers · Reviewed 15 September 2026

## One section, multiple places

A shared section is a separate resource containing a composition. A Shared section component points to that resource and renders its published composition wherever it is used. This is useful for a standard introduction, recurring contact information, a site-wide call to action, or other material that should stay consistent across layouts.

A copied pattern is different. Patterns → Insert a copy adds independent blocks to the current resource. Changes to those blocks do not change the source section, and later changes to the source do not update the copy. Decide whether the wording should stay synchronized before choosing between a live Shared section component and a pattern copy.

Sources: Configured website components (repository: `apps/cms/src/cms/components/config.tsx`); Public page selection and resource resolution (repository: `apps/cms/src/cms/services/public.ts`); Built-in layout patterns (repository: `apps/cms/src/cms/editor/patterns.ts`).

## Create a reusable section

1. Open Shared sections and create a section with a title colleagues will recognize, such as Contact the editorial team.
2. Open Visual editor. Add a Section for spacing and tone, then place Rich text and Button components inside it. For example, introduce the team and link the button to /about.
3. Keep the content suitable for every place that will use it. A fixed Rich text block repeats the same wording; Content body instead reads the current page or article body.
4. Wait for saving to finish, inspect Preview, and publish the section. It must be published before it can be selected through the live shared-section picker.

The section's Title and slug identify the resource in the CMS. Creating a section does not create a standalone public page at that slug. Place it in a template or Page composition to make it part of a visitor's journey.

Sources: Resource editor and design resource fields (repository: `apps/cms/src/components/admin/resource-editor.tsx`); Puck integration and editor configuration (repository: `apps/cms/src/cms/editor/composition-editor.tsx`); Configured website components (repository: `apps/cms/src/cms/components/config.tsx`); Revision and publication service (repository: `apps/cms/src/cms/services/content.ts`).

## Place and update a live section

1. Open the receiving Page or template's Visual editor and add Shared section from Connected content.
2. Choose the Shared section field, search for the published resource, and use the selected entry. The chooser supports later result pages; older sections are not limited to the canvas's recent samples.
3. Position the component in the layout, save, preview, and publish the receiving resource.
4. For a later shared wording change, edit the source in Shared sections and publish that source. Every live reference resolves its current published version.

The link remains a resource reference, not a frozen copy of the source's original text. Draft changes to the source remain private until that source is published. Conversely, publishing a receiving Page does not publish an unfinished source section on your behalf. A private or unavailable required dependency blocks publication rather than becoming public accidentally.

Sources: Puck integration and editor configuration (repository: `apps/cms/src/cms/editor/composition-editor.tsx`); Searchable reference selection (repository: `apps/cms/src/components/admin/reference-picker.tsx`); Configured website components (repository: `apps/cms/src/cms/components/config.tsx`); Public page selection and resource resolution (repository: `apps/cms/src/cms/services/public.ts`); Revision and publication service (repository: `apps/cms/src/cms/services/content.ts`).

## Global headers and footers

The public frame can use designated shared resources whose stored role key is header or footer. These render outside the page's main composition. When they are absent, the frame supplies its built-in navigation header and footer. This is separate from inserting a Shared section block inside the body of a particular Page.

> **Global role assignment is not a normal form control**
>
> The current Shared sections editor does not expose a header/footer role selector. Edit an existing designated resource if your installation has one. Assigning a newly created section to a global header or footer role requires an authorized developer or API change. Naming a section Header by itself does not assign that role.

A global header usually contains Site navigation, which reads the selected menu and brand. A body composition that also contains Site navigation will render another navigation area. Preview the complete page to catch duplicates that may not be obvious when editing the shared resource in isolation.

Sources: Public page selection and resource resolution (repository: `apps/cms/src/cms/services/public.ts`); Public website frame and theme application (repository: `apps/cms/src/app/site-view.tsx`); Resource editor and design resource fields (repository: `apps/cms/src/components/admin/resource-editor.tsx`); Reference website content (repository: `apps/cms/scripts/seed.ts`).

## References, nesting, and safe removal

A shared section follows the same composition rules as other layouts: only Section and Columns have child slots, a composition is limited to 200 components and the configured eight-level nesting-depth check, and serialized layout data is limited to 500,000 characters. Shared references have an additional maximum-depth check and cannot create a cycle.

Never point a section back to itself, directly or through another section. A chain such as A → B → A is recursive, even when the individual canvases look small. The publication service rejects recursive required references, and rendering also has a defensive depth guard. Before retiring a section, replace or remove its references and publish the receiving layouts; do not use deletion as a way to hide a still-required component.

Sources: Content and composition validation (repository: `apps/cms/src/cms/validation.ts`); Revision and publication service (repository: `apps/cms/src/cms/services/content.ts`); Configured website components (repository: `apps/cms/src/cms/components/config.tsx`).

## Permissions and troubleshooting

Administrators and designers manage Shared sections. An editor may be able to change a receiving Page while being unable to edit its source design resource. Coordinate the source change with someone who has design permissions. If a read-only view appears, it reflects the current resource permission rather than a failure of the canvas.

- If the picker cannot find a section, confirm it is published and public, then search its title and check later result pages.
- If a source update does not reach a Page, verify the Page contains a Shared section reference rather than a copied pattern.
- If a block shows a placeholder in Preview, check its selected resource and publication state.
- To reverse a shared change, restore the appropriate source revision as a working draft, inspect it, and publish it. The live references then use that restored published content.

Sources: Role and resource permissions (repository: `apps/cms/src/cms/policy/index.ts`); Resource editor and design resource fields (repository: `apps/cms/src/components/admin/resource-editor.tsx`); Puck integration and editor configuration (repository: `apps/cms/src/cms/editor/composition-editor.tsx`); Revision and publication service (repository: `apps/cms/src/cms/services/content.ts`).

## References

- Configured website components — repository path: `apps/cms/src/cms/components/config.tsx`. The actual component labels, editable fields, slot definitions, and rendering behavior.

- Public page selection and resource resolution — repository path: `apps/cms/src/cms/services/public.ts`. Homepage and template precedence, published resource selection, connected collections, menus, and shared dependencies.

- Built-in layout patterns — repository path: `apps/cms/src/cms/editor/patterns.ts`. Welcome, article, and two-column layouts; copied components receive independent identifiers.

- Resource editor and design resource fields — repository path: `apps/cms/src/components/admin/resource-editor.tsx`. Native controls, autosave, publication actions, permissions, template keys, homepage settings, and navigation link editing.

- Puck integration and editor configuration — repository path: `apps/cms/src/cms/editor/composition-editor.tsx`. Available canvas sizes, native rich text, remote resource pickers, patterns, and read-only behavior.

- Revision and publication service — repository path: `apps/cms/src/cms/services/content.ts`. Immutable revisions, required published dependencies, cycle checks, preview selection, and publication actions.

- Searchable reference selection — repository path: `apps/cms/src/components/admin/reference-picker.tsx`. Remote search, pagination, selected entry resolution, and published-only choices.

- Public website frame and theme application — repository path: `apps/cms/src/app/site-view.tsx`. Header, footer, default layouts, archive listings, brand colors, and WOFF2 font application.

- Reference website content — repository path: `apps/cms/scripts/seed.ts`. Initial home template, shared resources, brand, navigation, and example content.

- Content and composition validation — repository path: `apps/cms/src/cms/validation.ts`. Layout size, nesting, supported components, safe links, menu limits, color validation, and resource references.

- Role and resource permissions — repository path: `apps/cms/src/cms/policy/index.ts`. Design resources belong to administrator and designer capabilities; content permissions differ.

## Related guides

- [Visual editor](https://grocms.com/docs/visual-editor)

- [Templates](https://grocms.com/docs/templates)

- [Navigation](https://grocms.com/docs/navigation)

- [Homepage](https://grocms.com/docs/homepage)

- [Pages](https://grocms.com/docs/pages)

- [How the CMS works](https://grocms.com/docs/how-cms-works)

- [Troubleshooting](https://grocms.com/docs/troubleshooting)