Volto is a React-based frontend for content management systems, currently supporting three backend implementations: Plone, Guillotina and a NodeJS reference implementation.
Plone is a CMS built on Python with over 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 mature REST API. Volto has the ability of being highly themable and customizable.
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 Nodejs-based backend reference API implementation that demos how other systems could also use Volto to display and create content through it.
You can try a Volto online demo in https://6.demo.plone.org/
Try the demo locally
If you want to give Volto a quick try and you have Docker installed in your computer, bootstrap the demo using
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.
Create a Volto project using the generator
Create a new Volto project by using the
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
Bootstrap the Plone API backend
We recommend Plone as backend of choice for Volto.
You can bootstrap a ready Docker Plone container with all the dependencies and ready for Volto use:
docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e VERSIONS="plone.restapi=8.16.2 plone.app.iterate=4.0.2 plone.rest=2.0.0a1 plone.app.vocabularies=4.3.0" -e ADDONS="plone.volto" -e ZCML="plone.volto.cors" -e PROFILES="plone.volto:default-homepage" plone
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 buildout in the
api folder by issuing the command:
Go to http://localhost:3000 in your browser.
Volto in Production
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 backery ingrediences manufactors 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 reaseach 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 specialising 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)
You can find the documentation in https://docs.voltocms.com
- Mastering Plone 6 Development The comprehensive training on Plone 6 with best practice tips for developers and integrators.
- Volto A detailed training on how to create your own website using Volto frontend.
- Volto Hands-On
- Volto Add-ons Development
- Plone Deployment
Plone Conference Ferrara 2019
Plone Conference Tokyo 2018
- Node 16: Supported since Volto 14
- Node 14: Supported since Volto 8.8.0
- Node 12: Supported since Volto 4
- Node 10: Deprecated from Volto 13 onwards. It was supported since Volto 1 (and its predecessor "plone-react")
Volto works well with any modern (and updated) browser, including their mobile flavors: Chrome, Firefox, Safari, Edge.
We do not guarantee that browsers who were deprecated by their vendors (e.g. Internet Explorer 11) will be supported by Volto in the future.
You can find the upgrade guide here: https://docs.voltocms.com/upgrade-guide/
For Volto development you need all the requirements already mentioned on the Quick Start section.
Checkout the Volto repository
git clone https://github.com/plone/volto.git
Install a backend
Either using a Docker image
docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e ADDONS="plone.volto" -e ZCML="plone.volto.cors" -e PROFILES="plone.volto:default-homepage" plone
or using the convenience makefile command:
or running Plone on your machine (advanced), additional dependencies might be required, only for Plone experienced integrators/developers. Check the Plone Installation Documentation.
It still doesn't support the full API/features that Plone provides.
docker-compose -f g-api/docker-compose.yml up -d
or using the convenience makefile command:
Either using Docker
docker run -it --rm --name=volto --link plone -p 3000:3000 plone/volto # or with Volto add-ons enabled: docker run -it --rm --name=volto --link plone -e ADDONS="volto-testaddon volto-slate:asDefault" -p 3000:3000 plone/volto
or using the convenience yarn command:
Browse to http://localhost:3000 in your browser.
For ease the release process, we use
release-it utility that helps with the process.
For using it and start a release you need to fulfill the requirements:
- Have permissions to push on master branch
- Have permissions on the @plone org on npmjs.com
- Have a environment variable (
GITHUB_TOKEN) with a GitHub personal token with permissions to write the Volto Release page on GitHub (https://www.npmjs.com/package/release-it#github-releases)
Then the command for release:
a dry-release command for testing the output is also available:
Volto uses Cypress for browser-based acceptance testing.
Run acceptance tests (with the Plone backend):
Run acceptance tests (with the Guillotina backend):
Writing new acceptance tests
When writing new acceptance tests you usually want to minimize the time it takes to run the tests.
To do so, start three individual terminal sessions for running the Plone backend, the Volto frontend and the acceptance tests.
Start the Plone backend:
Start the Volto frontend:
Open Cypress and start acceptance tests:
Go to the
cypress/integration folder to see existing tests.
This directory is hot reloaded with your changes as you write the tests. For more information on how to write Cypress tests:
Running the acceptance tests with Guillotina backend
If you want to use Guillotina as backend to run the tests you should run:
If you would like contribute to translate Volto into several languages, please, read the Internationalization (i18n) guide.
MIT License. Copyrights hold the Plone Foundation.
See LICENSE.md for details.