Volto is a ReactJS-based frontend for the Plone Content Management System. It will become the default UI for the upcoming Plone 6 release.

Plone is a CMS built on Python with more than 20 years of history and experience.

Plone has very interesting features that appeal to developers and users alike, such as customizable content types, hierarchical URL object traversing and a sophisticated content workflow powered by a granular permissions model. This allows you to build anything from simple websites to enterprise-grade intranets.

Volto exposes all these features and communicates with Plone via its REST API. Volto has the ability of being easily extensible, themeable, and customizable.

It features the Pastanaga editor, a modern block-based content layout editor. It is extensible and customizable, so you can adapt the default blocks provided to match your requirements, or build new ones to cover them.

Volto is extensible using add-ons. You can build your own or choose from the community released ones:

• Volto Add-ons in NPM
• Volto Awesome

You can try a Volto online demo in https://6.demo.plone.org/

If you want to give Volto a quick try and you have Docker installed in your computer, bootstrap the demo using docker-compose:

git clone https://github.com/plone/volto.git
cd volto
docker-compose up

Go to http://localhost:3000 in your browser.

First get all the requirements installed on your system.

• Node.js LTS (18.x)
• Python - See below for specific versions.
• Docker (if using the Plone docker images)

The versions of Python that are supported in Volto depend on the version of Plone that you use.

Create a new Volto project by using the @plone/generator-volto utility.

It will bootstrap a Volto project in a folder of your choice with all the required boilerplate to start customizing your Volto site.

npm install -g yo @plone/generator-volto
yo @plone/volto

follow the prompts questions, provide myvoltoproject as project name then, when it finishes:

cd myvoltoproject

You can bootstrap a ready Docker Plone container with all the dependencies and ready for Volto use. We recommend to use the Plone docker builds based in pip plone/plone-backend image:

docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e PROFILES="plone.volto:default-homepage" plone/plone-backend:6.0.5

or as an alternative if you have experience with Plone and you have all the dependencies installed on your system, you can use the supplied convenience buildout in the api folder by issuing the command:

make build-backend

Volto is the default UI for Plone 6, so it will work for all Plone 6 released versions.

For the Plone 5 series, the latest released version of Plone 5 (with Python 3) is recommended (at the time of writing 5.2.10).

On Plone 6, we recommend using the known good set (KGS) of package versions that are specified in the Plone release.

On Plone 5, Volto is currently tested with the following packages pinned to specific versions, and we recommend using the same versions, which are:

• plone.restapi 8.32.6
• plone.rest 2.0.0
• plone.volto 4.0.3

This would be the docker command to spawn a Plone 5 container with the right KGS versions:

docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e ADDONS="plone.restapi==8.32.6 plone.volto==4.0.3 plone.rest==2.0.0" -e PROFILES="plone.volto:default-homepage" plone/plone-backend

yarn start

Go to http://localhost:3000 in your browser.

Volto is actively developed since 2017 and used in production since 2018 on the following websites:

• VHS Ehrenamtsportal (Website to help volunteers that help refugees for the German Adult Education Association, developed by kitconcept GmbH, 2018)
• Zeelandia (Corporate website for one of the leading bakery ingredients manufacturers in Germany, developed by kitconcept GmbH, 2019)
• Excellence at Humboldt-Universität zu Berlin (Website for the excellence initiative of the Humboldt University Berlin, developed by kitconcept GmbH, 2019)
• Forest Information System for Europe (Thematic website focusing on European forests, developed by Eau de Web, 2019)
• Industrial Emissions portal for Europe (Thematic website focusing on European industrial emissions, developed by Eau de Web, 2020)
• Energy Climate Union portal for Europe (Thematic website focusing on European strides towards mitigating climate change, developed by Eau de Web, 2020)
• Talke Carrer Website (Carrer website for Talke, one of the leading a chemical and petrochemical logistics companies in Germany, developed by kitconcept GmbH, 2020)
• Stradanove (Website of the Department of Youth Policies of the Municipality of Modena, developed by RedTurtle, 2020)
• VisitModena (Tourist website of the Municipality of Modena, developed by RedTurtle, 2020)
• Study guide at University of Jyväskylä (Static website where Volto is used as a headless CMS for authoring additional content, 2020)
• Nuova Voce Ecologista (Website of Nuova Voce Ecologista, an Italian green Party, 2020)
• BISE (Biodiversity Information System for Europe, developed by Eau de Web, 2019)
• MEDICE Webseite (Website for MEDICE Arzneimittel Pütter GmbH & Co. KG), developed by Werkbank GmbH, 2020)
• Jobfamilie MEDICE (Carrer website for MEDICE Arzneimittel Pütter GmbH & Co. KG), developed by Werkbank GmbH, 2020)
• Baccanale Imola (Baccanale is a food fair that happens every year in Imola, Italy. Developed by RedTurtle, 2020)
• ResOU (ResOU is introducing official researched releases by the University of Osaka, Japan. Developed by CMScom, 2020)
• Humboldt Labor (The Humboldt Lab is a website where the Humboldt University Berlin presents its latest research projects and findings. Developed by WLDX and kitconcept GmbH, 2020)
• Osaka University (Osaka University is considered one of the most prestigious universities in Japan. Developed by CMScom, 2021)
• Comune di Modena (Website of the Municipality of Modena. Developed by RedTurtle, 2020)
• Comune di Camposanto (Website of the Municipality of Camposanto. Developed by RedTurtle, 2021)
• Comune di Cantagallo (Website of the Municipality of Cantagallo. Developed by RedTurtle, 2021)
• Comune di Vernio (Website of the Municipality of Vernio. Developed by RedTurtle, 2021)
• Unione dei Comuni della Val Bisenzio (Website of the Municipality union of Val Bisenzio. Developed by RedTurtle, 2021)
• Comune di Vaiano (Website of the Municipality of Vaiano. Developed by RedTurtle, 2021)
• ASP Area Nord (Website of the Public company of personal services of the Modena municipalities in the north area. Developed by RedTurtle, 2021)
• Comune di San Possidonio (Website of the Municipality of San Possidonio. Developed by RedTurtle, 2021)
• Comune di Mirandola (Website of the Municipality of Mirandola. Developed by RedTurtle, 2021)
• Comune di Medolla (Website of the Municipality of Medolla. Developed by RedTurtle, 2021)
• Camera di Commercio dell'Umbria (Website Chamber of Commerce of Umbria. Developed by RedTurtle, 2021)
• Biblioteche Pianura Est (Website of the Associated libraries of eastern plain. Developed by RedTurtle, 2021)
• Camera di Commercio di Reggio Emilia (Website Chamber of Commerce of Reggio Emilia. Developed by RedTurtle, 2021)
• RawMaterial (Company's website. Developed by RawMaterial, 2021)
• WISE-Freshwater (WISE-Freshwater, the Freshwater Information System for Europe. Developed by Eau de web for the European Environmental Agency, 2021)
• EEA-IMSv4 (EEA Indicator Management System v4. Developed by Eau de web for the European Environmental Agency, 2021)
• Memori (Corporate website for Memori, startup specializing in technologies applied to the experience of memory through the development of Artificial Intelligences. Developed by RawMaterial, 2021)
• TwinCreator (TwinCreator allows you to design and train multiple AI’s through simple conversation through NLP. Developed by RawMaterial, 2021)
• MemoryTwin (Product website, MemoryTwin allows you to create your personal artificial intelligence, able to remember and speak. Developed by RawMaterial, 2022)
• Forschungszentrum Jülich (Website for Forschungzentrum Jülich, which is one of the largest research institutions in Europe, developed by kitconcept GmbH, 2022)
• ILPO (the registration portal of continuous learning at the University of Jyväskylä. Developed by University of Jyväskylä, 2022)
• Debabarreneko mankomunitatea (Website of the Commonwealth of Debabarrena, community of municipalities to centralize waste handling services, developed by CodeSyntax, 2022)
• Debako Udala / Ayuntamiento de Deba (Website of the municipality of Deba, developed by CodeSyntax, 2022)
• Helmholtz-Institut Erlangen-Nürnberg für Erneuerbare Energien (HI-ERN) (Website for HI ERN, a research institution for renewable energies, developed by kitconcept GmbH, 2022)
• Lanku (Website for Lanku Kultur Zerbitzuak, a company offering cultural services and improvised Basque verse singing sessions across the Basque Country, developed by CodeSyntax, 2023)
• UEU (Website for Udako Euskal Unibertsitatea, a non-profit University offering all its service only in Basque: courses, publications, ... developed by CodeSyntax, 2023)
• German Aerospace Center (DLR) (The German Aerospace Center (DLR) is the Federal Republic of Germany's research center for aeronautics. With more than 10.000 employees and a yearly budget of more than 1 billion euros, it is one of the largest research institutions in Germany, developed by kitconcept GmbH, 2023)

Please create a new issue or pull request to add your Volto-site here!

You can find the latest (in-progress) documentation in https://6.docs.plone.org/

On the Plone Training website, you'll find Volto-dedicated training materials, plus other JavaScript-centered trainings.

• Mastering Plone 6 Development The comprehensive training on Plone 6 with best practice tips for developers and integrators.
• Volto Hands-On
• Volto Add-ons Development
• Effective Volto
• Plone Deployment
• Volto (archived)
• JavaScript For Plone Developers (archived)

Víctor Fernández de Alba - Plone Beyond 2020: Jump into Volto today!

Rob Gietema - How to create your own Volto site!

Timo Stollenwerk - On the Road - Plone 6 and Beyond

Rodrigo Ferreira de Souza - Data migration to Plone 5.2 and Volto

Nicola Zambello - A Volto story: building a website by prototyping

Luca Pisani - Plone and React.js: An interview to Volto

Rob Gietema - Volto

Rob Gietema / Víctor Fernández de Alba - Volto Extensibility Story

Víctor Fernández de Alba - Theming Volto

Timo Stollenwerk / Víctor Fernández de Alba / Ramon Navarro - Volto Case Studies

Timo Stollenwerk - Reinventing Plone, Roadmap to the Modern Web

• Node.js 20: Supported since Volto 17
• Node.js 18: Supported since Volto 17
• Node.js 16: No longer supported. It was supported from Volto 14 - 16
• Node.js 14: No longer supported. It was supported from Volto 8.8.0 - 16
• Node.js 12: No longer supported. It was supported from Volto 4 - 15
• Node.js 10: No longer supported. It was supported from Volto 1 - 12

Volto works well with any modern (evergreen) browser, including their mobile flavors: Chrome, Firefox, Safari, Edge.

We do not guarantee that deprecated browsers (e.g., Internet Explorer 11) are supported by Volto. Although proven possible, it's too great an effort to maintain. It is left to the integrator to provide support for it.

You can find the upgrade guide here: https://6.docs.plone.org/volto/upgrade-guide/index.html

For Volto development you need all the requirements already mentioned on the Quick Start section.

git clone https://github.com/plone/volto.git

yarn

Either using a Docker command:

docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e PROFILES="plone.volto:default-homepage" plone/plone-backend:6.0.5

or using the convenience makefile command:

make start-backend-docker

or running Plone on your machine (advanced), additional dependencies might be required, only for Plone experienced integrators/developers. Check the Plone Installation Documentation.

make build-backend

Either using a Docker command:

docker run -it --rm --name=volto --link backend -p 3000:3000 -e RAZZLE_INTERNAL_API_PATH=http://backend:8080/Plone -e RAZZLE_DEV_PROXY_API_PATH=http://backend:8080/Plone plone/plone-frontend:latest

or using the convenience makefile command:

make start-frontend-docker

or from the local repository code:

yarn && yarn start

Browse to http://localhost:3000 in your browser.

yarn test

Here you can find a guide on how acceptance testing is done in Volto:

https://6.docs.plone.org/volto/developer-guidelines/acceptance-tests.html

If you would like contribute to translate Volto into several languages, please, read the Internationalization (i18n) guide.

Volto also supports other APIs like Guillotina, a Python resource management system, inspired by Plone and using the same basic concepts like traversal, content types, and permissions model.

Last but not least, it also supports a Volto Node.js-based backend reference API implementation that demos how other systems could also use Volto to display and create content through it.

Disclaimer: Guillotina doesn't support the full API/features that Plone provides. Contributors are welcome.

docker-compose -f g-api/docker-compose.yml up -d

or using the convenience makefile command:

make start-backend-docker-guillotina

If you want to use Guillotina as a backend to run the tests you should run:

yarn ci:start-api-plone-guillotina

MIT License. Copyrights hold the Plone Foundation.

See LICENSE.md for details.