Guide to Content Studio

Enonic is a headless CMS where developers build the site/app, and editors manage content through Content Studio. Content Studio focuses on:

• Structured content (forms and reusable content types)
• Visual editing (page building with components, where supported by your solution)
• Fast navigation and previewing
• Workflow (ready-for-publish, publish requests, scheduled publishing, etc.)
• Extensibility (widgets, integrations, and add-ons)

Workbench (Project Shell)

The main Content Studio interface, or project shell, is called the Workbench. It has a Project bar at the top, a vertical Menu bar on the left, and a Main panel. Use the Project bar to switch between projects and layers, and the Menu bar to access Content Navigator, Archive, and other available tools.

Settings is located on the bottom-left on the Menu bar. Here you can switch between Light theme, Dark theme, and System preference in the upper right. Here you can also change Site settings like language, display name, access mode, and roles. 

Two Workspaces You’ll Use Every Day

This guide will mostly take place in the default Content Navigator workspace in the Menu bar. You’ll work primarily in two views:

• Content Navigator (also called Browse View):  
  • Browse the content tree, search, preview, and run actions like move, duplicate, sort, delete, and publish.
• Content Editor (also called Edit View):  
  • Create or edit an item in a separate browser tab. Edit its fields in the Content Form and observe the changes in the Preview Panel. For content with a page setup, arrange and configure components in the Preview Panel, or more correctly called the Page Editor in this instance. Visual editing depends on your solution’s front-end integration.

Each content item opens in its own editor tab, so you can keep several items open across projects and layers.

Both views provide access to a helpful tool:

• Context Panel (Widgets):  
  • A panel with tools like Details, Version history, Dependencies, and any additional widgets installed for your solution.

The Emulator is available in the preview toolbar and lets you check how content appears at different screen sizes.

Content-first

Even when you’re building pages visually, Content Studio is fundamentally content-first:

• All content items have types and fields
• Items can be referenced from other items (dependencies)
• The same content can be reused in many places (pages, lists, integrations, APIs)

This is why Content Studio is well suited to multi-channel delivery and headless setups: content is stored as structured data rather than locked into one page.

Search

Search is more than just finding content. You can use it to:

• Quickly locate a specific item
• Filter content by type, owner, language, and modification time
• Find and select content for bulk actions (publish, delete, move)
• Generate inventories by exporting search results

Common Search Filters

Use the free-text search to find content by ID, display name, or path. You can also narrow the results using these filters:

• Content type
• Workflow
• Last modified
• Last modified by
• Owner
• Language

The Last modified by and Owner filters include a Me option for quickly finding content you have edited or own.

Tip: Closing the Search Panel does not clear your search. The filters remain active until you clear them.

Export Search Results

When your search returns results, use the download icon beneath the search field to export them to a CSV file. The export contains basic metadata, such as ID, display name, and path. It does not include custom fields from your content types.

Preview

Previewing helps you catch mistakes before they go live:

• Check layout, spacing, and text flow
• Verify images and focal point behavior
• Click internal links to see if navigation works
• Review page components in context

In the Navigator, following an internal link in an interactive preview also selects the target content in the content list.

When Preview Is “Missing” or Looks Wrong

Common reasons:

• No available preview mode supports rendering the selected content
• Your site, template, or front-end integration is not configured to render it
• Required data is missing
• You are comparing a draft preview with a live version that does not yet include your changes (they are still unpublished)

If Automatic mode shows No preview available, you can still select JSON manually to inspect the content’s stored data.

Emulator and Mode

The Preview Panel includes an Emulator in its toolbar. Use it to check the preview at different screen sizes, such as:

• Desktop or monitor
• Mobile
• Tablet

The Preview Mode dropdown allows you to choose:

• Automatic: selects the first available preview mode that supports the content
• Media: displays images, videos, and other supported media
• Standard: renders content using the XP site service
• JSON: displays the content’s data in JSON format; available for all content, but not selected automatically as a fallback
• Custom preview modes: additional options supplied by applications installed for your solution

The preview toolbar also shows the item’s change status, such as New, Modified, or Published. Click this status to open Version history. Use the refresh control to reload the preview.

Tip: Use the Preview action in the Navigator or Content Editor toolbar to open the content in a separate browser tab. The new tab uses the preview mode selected in the panel.

Context Panel and Widgets

The Context Panel is available on the right-hand side of both Content Navigator and Content Editor. Use the toolbar toggle to show or hide it, and the panel selector to choose a widget. Widgets provide information and tools for the current content item.

• In Navigator, widgets, aka panels, give insight into selected items (details, versions, dependencies, etc.)
• In Editor, widgets provide the same tools and, where applicable, page-component settings

Built-in Widgets

These are some of the built-in widgets/panels you may use:

Details

Use Details to inspect information about the selected item, including:

• Content type, display name, and full path
• Change status, such as New, Modified, or Published
• Metadata (created/modified)
• Publishing schedule, where applicable
• Page template used, if any
• Attachments (downloadable binaries)
• User access and, when permitted, a shortcut to edit permissions

Version History

Version history records editorial changes and other activities for the content item. It lets you:

• Inspect previous versions and see who made changes and when
• Select two comparable entries and use Show changes to compare them
• Expand a restorable version and use Restore to make it the active draft

The panel shows editorial changes by default. Enable Show all activities to include events such as publishing, unpublishing, marking content as ready, and permission changes. Not every activity contains a version that can be restored.

Restoring an older version creates a new entry in the history and does not erase later versions. If the item is online, publish the restored draft when you want it to replace the live version.

Dependencies

Dependencies help you understand “what uses what.”

• Inbound dependencies: Other items that use this content
• Outbound dependencies: Items that this content uses

Dependencies matter for:

• Page components with explicit references to other content
• Internal content links
• Reused fragments or shared assets
• Shortcuts, featured content, or taxonomy references

Before deleting or unpublishing an item, check inbound dependencies and review any warnings to avoid breaking references.

Content Exports

Available to Content Administrators and System Administrators, the Content Exports panel lets you export and import content trees, including associated images and attachments.

This is different from exporting search results to CSV. Content exports contain the current draft content and are stored on the Enonic XP server. Transferring them between installations requires an administrator. They do not contain the project’s complete version or publishing history.

Workflow Tip

Before publishing important changes, use Version history to compare the current draft with the version that is online. This helps you verify exactly what you are about to publish.

Page Context Panel (in Page Editor)

When you’re editing pages or templates, select Page in the Context Panel to access:

• Insert tab: Add components to an editable page. Drag & drop into the preview is available when your front-end integration supports visual editing.
• Inspect tab: Configure the selected component or the page itself. Use Apply when shown to save configuration changes to the draft and refresh the preview.

The Insert tab is available when the content has its own editable page setup. If the page is still linked to a template, use Page settings to customize it before changing its component structure. Customizing creates an independent copy that no longer follows changes to the original template.

Pro Tip: Widgets and Integrations

Your team can extend the Context Panel with widgets for:

• Analytics dashboards
• SEO metadata checks
• Accessibility and quality tools
• Optimization/testing tools
• … and more

The available widgets depend on your installed applications, subscriptions, and permissions. These integrations let you access supporting tools directly inside Content Studio.

Content Editor

When you edit a content item, you typically see:

• Content Form (fields on the left)
• Preview/Page Editor (on the right, depending on content type)
• Toolbar Actions like Save, Delete, Duplicate, Move, Publish (context-dependent)
• Widgets via the right-hand Context Panel

Saving Habits That Reduce Mistakes

• Save early and often (especially before switching to another tab)
• Use preview after major changes
• If you’re about to publish: validate content, check dependencies, and check the right project/layer

Validation and Readiness

Many content types have required fields. Content may be:

• Incomplete (missing required fields)
• Valid but still “in progress”
• Ready for publishing

Publishing is blocked until content is valid and ready, or you exclude non-required items in publishing (if allowed).

Content Form

The Content Form is on the left side of the Page Editor. It can be collapsed and expanded. Some content types feature a simple form with few fields, while others can be complex.

Depending on the content type, populating the fields of the Content Form and saving will update the Page Preview accordingly. For example, if you fill in the title, intro, image, author, and body text of a news article, the preview will show these contents.

Other content types, like e.g. a landing page, may have few fields in the Content Form and instead focus on editing components directly in the Page Editor (more on this later).

The Content Form has at least one tab called “[Content Type]” and shows the fields unique to the specific content type.

If a content type has a page configuration, there is a second tab called “Page,” which displays an overview of the item’s components in a tree structure. Additional tabs can be added to the form through mixins, with fields that can further enrich the content. Some examples are “Menu” and “SEO”.

Component Tree

The tab “Page” reveals a schematic overview of all components on any given content item. This is especially useful on long and complex pages. Some content types will have few, others will have many.

The component tree shows where the components are placed in relation to each other, and what kind of components they are. Here you can drag and drop, as well as select parent component, insert a new one, inspect, reset, remove, duplicate, and save as fragment.

More on the Component Tree under “Building Pages” below.

Rich Text Editor

Some content types have rich text editor fields (HtmlArea). These are used for things like:

• Article body content
• Text components on landing pages
• Introductions, teasers, and formatted sections

Practical Ways to Work Faster

• Use familiar shortcuts (save, undo/redo, etc.)
• Use “paste as text” to avoid messy formatting from Word/Google Docs
• Use headings consistently (H2 → H3, avoid skipping)
• Prefer internal content links when linking to other content in the same solution

Images Inside Rich Text

Many setups support drag & drop images into the rich text editor. Alternatively insert images from the rich text toolbar (or use CTRL + L).

When uploading an image in the rich text editor, the image dialog requires you to choose between “Decorative image” and “Alternative text” for accessibility purposes.

Always:

• Set meaningful alt text (if you have chosen “Alternative text”)
• Leave width unspecified, but use style and alignment
• Confirm how images render on mobile via preview/emulator

Macros and Embedded Content

Macros are instructions that enrich your rich text field with additional content or functionality. There are two built in macros in Content Studio: “Embed iframe” and “Disable macros.” Your developers can configure custom macros, e.g. allowing you to insert:

• Videos
• Social embeds
• Special callouts
• Custom components inside text

Macros are powerful. Use them for consistent formatting and brand compliance.

Image Handling

You can upload images in both Content Navigator (through the Create content dialog) and Content Editor (through an image field or a rich text editor if applicable).

If you have the AI Juke Content Operator (see below) installed and assigned to a project or site, all images uploaded therein will receive an automatic alt text. This will be in the content's language and in compliance with the WCAG guidelines for text alternatives. Existing alt text is not overwritten.

Uploading an image creates an image content item with metadata like caption, credits, and technical EXIF. You can edit images by:

• Cropping
• Rotating
• Flipping (mirroring)

You can always undo these changes by selecting “Reset.” One final action is Focal Point (also known as Autofocus):

Focal Point

If the same image is used in multiple aspect ratios (cards, hero banners, etc.), focal point helps keep the important part visible at all times.

Typical focal point workflow:

1. Open the image content item
2. Activate focal point (icon)
3. Click the point that must stay in frame (e.g., a face)
4. Apply and save

This section is about the Page Editor: how to build pages using components (layouts, parts, and fragments). Available components come from applications assigned to your site. Visual editing in the preview depends on your solution’s front-end integration.

Templates vs. Customizing a Page

Many solutions work like this:

• A content type (e.g., Article) is rendered using a page template
• The template gives you a consistent structure of components
• For landing pages (and sometimes other types), editors may customize the page and build with components

In Page Settings in the Context Panel, you can use automatic template selection or select a specific compatible template for your content type. Selecting a template keeps the page linked to it and any changes that may be performed on it.

Developers can turn on the ability to Automatically Customize a content item of a given type. This speeds up the process for editors who create e.g. landing pages. Now they can immediately drag and drop components from the Context Panel into the Page Editor and start building.

Content types like landing pages may use an ‘empty’ template so you can build from scratch when you customize it (i.e. detach it from the template).

PS: Your developers can turn off the feature that sets automatic customization as default. This inserts a few manual steps into the process if that is desirable.

Components

Components are the building blocks of a page. They can display content from the form or have their own configuration. The root Page component defines the overall structure, including regions where other components can be placed.

There are three types of components:

• Part
• Layout
• Fragment

Part

Parts are configurable components with specific functions. Examples:

• Article lists
• Employee listings
• Contact forms
• Banners, buttons, or cards
• Dynamic elements pulling in content
• Rich text sections

Parts usually have configuration fields in the Inspect tab of the right-hand Context Panel.

Layout

A layout is a container with regions that hold other components. Layouts cannot be nested inside other layouts.

Depending on the layouts supplied by your application, use them for:

• Multi-column sections
• Structured blocks (hero + text + CTA)
• Consistent spacing and alignment
• Custom background colors and spacing/margins

Fragment

Fragments are reusable component structures. You create a fragment by:

1. Selecting a component, such as a Part or Layout, on an editable page
2. Opening its context menu and choosing Save as Fragment

This creates a Fragment content item beneath the current item and replaces the original component with a reference to it.

Use fragments for:

• Recurring sections (newsletter signup, contact info)
• Shared disclaimers/legal blocks
• Campaign modules reused across pages

A typical fragment workflow:

1. Build a section once
2. Save it as a fragment
3. Insert a Fragment component on another page and choose the saved fragment in the Inspect tab

Fragment edits update its draft. Publish the fragment to make those changes available to published pages that reference it; those pages do not each need republishing. Check inbound dependencies before changing widely reused fragments.

Use Detach from Fragment to replace a reference with an independent copy of the components on that page. Later fragment changes will no longer affect the now detached components.

Page Widget

Select Page in the right-hand Context Panel to access:

• Insert: Add components to an editable page; drag & drop into the preview when supported
• Inspect: Edit settings for the selected component or the page itself

Page-structure operations save automatically to the draft. Use Apply when shown to save configuration changes. Neither operation publishes the page.

Example of Landing Page Workflow

1. Create the landing page content item
2. Complete its fields, including Display Name, and save
3. Open Page settings from the Context Panel or the locked preview’s menu
4. For a template-based page, click Customize and confirm; otherwise select a Page component
5. Insert a Layout if needed
6. Add an application-provided rich-text Part for text sections
7. Add other Parts (e.g., hero banner, CTA, latest articles)
8. Insert a Fragment for shared sections (e.g., signup)
9. Apply configuration changes, resolve validation errors, and check the page using preview/emulator
10. Publish or request publishing, reviewing dependencies in the publishing flow

Component Tree

The Component Tree is located in the Page tab of the Content Form. It shows the Page root, regions, and components. Selecting a component opens its configuration.

On long or complex pages, the tree helps you:

• See structure at a glance
• Select hard-to-click or empty components
• Reorganize components by dragging them between compatible positions
• Access component actions through the context menu

Use it when the page becomes difficult to manage by clicking in the preview, or when interactive visual editing is unavailable.

Projects

Projects let you organize content into separate repositories for teams, sites, or initiatives. Each project has:

• Its own project roles, permissions, and access settings
• A default language
• Applications that provide content types and other CMS features
• Separate Draft and Master branches for editing and publishing

The current project is visible in the project bar. Use the project selector to switch between projects and layers you can access.

A project’s access mode can be Public, Private, or Custom. This controls default read access to published content. Choosing Public does not expose unpublished drafts.

Project applications supply features for content outside sites. Applications needed within a site must also be assigned directly to that site. Layers inherit their parent project’s applications and can have additional applications of their own.

Project Management (Admins)

Projects and layers are managed under Settings at the bottom-left of the Workbench. Settings is not limited to the currently selected project. Depending on your roles, you may be able to:

• Create projects and layers
• Configure the default language and access mode
• Assign project roles to users and groups
• Configure project applications
• Delete projects

A project’s identifier and parent project cannot be changed after creation. Changing its default language affects newly created content, not the language of existing items.

Important: Deleting a project removes its repository and all its data. This cannot be undone through Content Studio.

Layers

Layers let you reuse and adapt content across languages, regions, brands, or channels:

• A layer is a project that inherits content from a parent project.
• Inherited content can be localized, renamed, moved, sorted, and deleted independently.
• Inheritance updates the layer’s draft; publishing is handled separately in each layer.

Inheritance is tracked separately for content data, path name, parent location, and child sort order. Changing one does not stop the others from inheriting. For example, a localized item may still inherit its name and location.

Inherited content appears with a visually subdued layer indicator next to the publishing status in the Navigator. Inherited and localized content receives a normally colored indicator. Clicking it provides access to the Layers widget/panel in the Context Panel when available.

Localizing an Item

A typical localization flow:

1. Open the inherited item in the intended layer
2. Click Localize to enable editing and assign the layer’s default language
3. Edit and save the localized content
4. Publish in that layer when ready

After an item is first marked Ready in its parent, subsequent content updates propagate when marked Ready.

Reset restores inheritance for all locally changed dimensions, replacing local content, name, location, and sorting with the parent’s values.

Content Studio+

Content Studio+ is a companion application that requires a valid Enonic subscription. Its advanced capabilities include:

• Layers Panel (inspect localization and publishing status across layers, and open the corresponding item in another accessible layer)
• Archive Browser (browse, restore, and permanently delete archived content)
• Variants (create and manage related content alternatives that can be edited and published independently)
• Publishing Report (compare published versions over a selected period and review when content was online or offline)

Deleting content is available without Content Studio+, but the dedicated Archive browser and its restore and permanent-delete actions require the subscription.

Variants can support A/B testing, but an external testing or delivery system must serve the alternatives and measure results. Content Studio does not run the test or select a winner.

Juke AI skills also require a valid subscription and their respective applications. For example, the Content Translator can assist when localizing content; see the AI chapter for details.

Available features depend on the installed applications, a valid license, and your permissions. Installing Content Studio+ without a valid license does not activate its interface features.

Integrations and Custom Widgets

Beyond built-in widgets, Content Studio can be extended with:

• Custom widgets built for your solution
• Widgets installed via applications
• Dashboards and tools for analytics, SEO, accessibility, and optimization
• Custom preview modes for your content
• Additional views in the Workbench’s left-hand menu

Check with your Enonic team to see which widgets and integrations are available in your solution.

This section describes the shortcuts that are available for content editors in Content Studio.

Tip: Press F2 inside a view to reveal all available shortcuts for that view.