Plone docs for Volto and cookieplone folder structure

I created a project using cookieplone and am going through the docs, but am not entirely clear on the relative location it is referring to. So let’s say I name my project “foobar”, I know have a directory frontend/packages/volto-foobar/src which I believe is a Volto Addon. So in this example Customizing Components — Plone Documentation v6 customizations/components/theme/Logo/Logo.svg is frontend/packages/volto-foobar/src/customizations/components/theme/Logo/Logo.svg. That works for customizations.

In a later section it covers registering new views Creating Volto Views — Plone Documentation v6 and wants me to edit config.js. Where is this relative to? Is this a new file under ./src?

In general, the folder structure from cookieplone is confusing me, whether I use cookieplone frontend or cookieplone frontend_addon. There’s some kind of package nesting here I do not understand, compared to something like GitHub - collective/volto-subblocks . Why is the code under packages/foobar/src instead of just putting src at the top; why are there two package.jsons? Can someone explain what is going on at a high level?

Maybe this will help?

With Volto 18, you no longer customize core Volto code. Instead you develop an add-on.

The rest of that section of the documentation may provide further guidance.

For a tutorial, see last year’s training from PloneConf at 2. Installation – Volto Customization for JavaScript Beginners — Plone Training 2025 documentation.

The training page has some useful info and confirms some of my assumptions. pnpm workspaces actually look very similar to uv Using workspaces | uv too.

Ok I see that there is a frontend/core which I think is @plone/volto. Am I to infer that in previous Volto you used to edit this area, but since you use an addon now, this core directory is now vestigial? That would make sense to me why it is set up this way.

I’ll go through the training some more, I see a lot of places where it clarifies the “why” and “how” that the docs don’t address directly :grinning_face:

frontend/core is the cloned monorepo from GitHub - plone/volto: React-based frontend for the Plone Content Management System. frontend/core/packages/volto is the npm package @plone/volto. I wouldn’t say it’s vestigial, because it is the Volto core. You add-on won’t touch it. Previously you might have edited files in there, but that is not easy to maintain for multiple projects, which is why the add-on approach is now strongly recommended.

Docs are always under revision, and contributions are welcome. There is a PLIP in progress in which one goal is to organize content according to the Diátaxis framework. This will make it easier for specific groups of readers to find what they need. We have the beginning of explanatory documentation in Conceptual guides.

config.js is the wrong filename there. The place to add configuration for your add-on is in frontend/packages/volto-foobar/src/index.js

packages/volto-foobar contains the actual add-on. Everything above that is infrastructure to help develop your add-on: CI configuration, a Makefile with commands, and a package.json which installs a full demo Volto site with your add-on installed. The volto-subblocks repository is simpler because it doesn’t include this infrastructure.

Since Volto 18, installing Volto clones the plone/volto repository into the core directory and installs it as part of the same pnpm workspace. This is useful for people who are working on changes to Volto and want to test them in the context of an add-on or project before they are merged and released. It’s not a good place to put customizations to Volto, and it never was.

2 Likes