Awesome

awesome-volto

A curated list of things that make Volto awesome. Please feel free to contribute directly or send a PR! For add-ons for the CMS Plone which is the backend of Volto please see the awesome-plone list

Contents

Official websites
Community
Addons
Training, example code, tutorials
- Awesome React articles, relevant to any Volto developer
Open-source websites built with Volto
Companies

Official websites

Community

#volto on Discord

Addons

:warning: While we try to list them all, some of these addons might be a Work in Progress, require special branches of Volto or dedicated Plone addons.

Various addons that can't fit in a specific category, in mostly random order:

volto-site-settings - Makes available the site settings to any Volto block / component.
volto-outdooractive - Integration with OutdoorActive, an external service
volto-middleware-helmet - Middleware to add security to Volto's HTTP headers
volto-customer-satisfaction - Gather feedback from site users
volto-tito-block - Volto block to integrate with Tito, a platform to sell tickets online
volto-block-banner - Volto block for a customizable visual banner
volto-cookie-banner - Volto cookie banner integration addon. To be used with: collective.volto.cookieconsent
volto-dropdownmenu - Volto addon for a customizable dropdown menu. Intended to be used with collective.volto.dropdownmenu
volto-navigation-dropdown - Volto addon for Plone website navigation dropdown menus.
volto-menu-customization - Volto addon provides a customization of Volto's default menu that adds a dropdown menu to display subcontent.
volto-geocoding - A widget for Volto to search addresses and save coordinates.
volto-venue - An addon for Volto as a frontend for collective.venue
volto-google-analytics - Google Analytics integration for Volto.
volto-social-settings - Add-on for manage a list of social network links on Volto
volto-controlpanel - Enhance Version Overview information in Control Panel. Requires eea.api.controlpanel Plone backend add-on.
volto-embed - GDPR compliant external resource embedding Volto Block
volto-plotlycharts - (EEA) Powerful chart editor based on Plotly
volto-block-data-figure - (EEA) Volto add-on for Daviz specific SVG charts.
volto-datablocks - (EEA) Provides primitives for data connectivity to volto-plotlycharts and other blocks
volto-corsproxy - A CORS-proxy integrated with Volto, enables access to third-party API servers.
volto-block-toc - An extensible TOC block alternative to Volto's Table of Contents block.
volto-matomo - Basic Matomo Tracker integration for Volto
volto-form-block Volto customizable form block
volto-subsites
volto-bookmarks – Add and manage bookmarks of pages and searchkit queries.
volto-slate-glossary - Tooltips for glossary terms
volto-plausible - Volto integration for Plausible.io privacy-first analytics
volto-newsblock - Volto block with selected news items
@plone-collective/volto-authomatic - Social (OpenID) login for Plone ( Using pas.plugins.authomatic)
volto-leaflet-block - A Leaflet map for Volto block
volto-fullcalendar-block - A block for adding a FullCalendar to display events from an ics/iCal file
volto-subfooter Volto addon for a customizable subfooter
volto-middleware-static Volto configurable middleware to serve dynamic static resources
volto-taxonomy - Controlled Vocabulary management in Volto control panel
volto-tableau - Integration with Tableau
volto-openlayers-map - Specific implementation of OpenLayers map
volto-sentry-rancher-config - Auto-configure Sentry from Rancher metadata
volto-banner - Adds a banner to highlight staging, demo or dev websites
volto-listingadvanced-variation - Adds a new variation to the listing block with advanced configuration options.
volto-staticrender-bots - For crawl spiders, serve static rendering of Volto pages
volto-arcgis-block - ArcGIS Map integration for Volto blocks
volto-carousel-block - A carousel block, with slick integration
volto-separator-block - A divider visual indicator type of block
volto-slider-block - A slider with react-slick
volto-blocks - Miscellaneous blocks
volto-dsgvo-banner - A privacy protection / GDPR banner (mandatory in Europe)
volto-button-block - A button (call to action) block
volto-heading-block - A heading block. Can select the heading level
volto-text-with-background-color-block A Volto Text With Background Color Block allows editors to add text with a background color to a Volto page
volto-social-blocks - A Social Blocks support for Volto block
volto-code-block - Insert code blocks, with syntax highlight, into Volto.
volto-twitter-block - Embed Tweets into Volto pages.
volto-social-sharing - Show "share in social networks" links in pages.
volto-network-block - Volto Social Networks blocks and components.
volto-educal-hero-block - Volto block for a customizable visual hero
volto-cookiebot - CookieBot integration package for Volto. CookieBot is a comercial service to comply with the so-called "cookie-law", asking user content before loading any third-party cookie.
volto-countdown-block - A Volto block to count down to any date specified, with optional display of hours, minutes and seconds.
volto-advanced-variations - Based on codesyntax/volto-listingadvanced-variation this addon adds events options including dates, times and location, displaying the listing or search as a carousel/slider or background image.
volto-existing-block - A Volto block that show content from another page based on the id selected.
volto-modal-block - A Volto addon block that has a button with image when clicked it open the text in an overlay.
@codesyntax/volto-maplibre-block - A Volto block and component to render maps based on maplibre-gl-js
@codesyntax/volto-countup-block - A Volto block to show a going-up counter
volto-videohero-block - a hero section with a video background, and optional preheader, title, description, call-to-actions and more.
volto-chatbot - Volto Chatbot allows the integration of an AI-powered chatbot into your Volto project with Danswer AI Assistant connected to your company's docs, apps, and people.

Bundles

volto-eea-kitkat - A "known good set" of Volto add-ons, mostly specific to EEA websites.
eea.kitkat - The back-end support for the volto-eea-kitkat add-on.

Rich text editing

Enhance the basic text editing experience

volto-slate-footnote - Footnote (and references) plugin for the rich text editor.
volto-slate-metadata-mentions - Plugin for the rich text editor to embed dynamic text that renders Plone metadata fields
volto-slate-zotero - Plugin for the rich text editor to connect footnotes to Zotero and OpenAire references
volto-slate-dataentity - Connect text entities in the rich text editor to volto-datablocks connected data
volto-workflow-progress - Shows workflow steps for content editors.

Layout addons

Enhancements to the way blocks can be used, to create custom layouts

volto-subblocks - A framework to edit and embed blocks into other blocks. (Note: Volto provides a sub-blocks framework that is not compatible with this. Consider looking at volto-columns-block, volto-accordion-block, volto-tabs-block for example if you need to embed block in block).
volto-tabs-block - Split a Volto page into tabs, complete with editing form integration, using just a simple tabs block.
volto-metadata-block - Custom Volto Block to insert Plone metadata fields
volto-accordion-block - Create group based accordions in blocks.
volto-columns-block - Enables grouping Volto blocks as columns
volto-group-block - Group blocks in sections and filter available blocks per content-type per section
volto-blocks-grid - Unidimensional (x-axis) grids for blocks
volto-block-divider - Block to render a section separator
volto-pdf-block - Flexible PDF integration in Volto
volto-listing-block - Extension for the Volto listing block adding more templates
volto-block-style - A generic framework to configure block decorations and CSS styles
volto-anchors - Slug based anchor links for volto blocks
volto-statistic-block - A Statistic Text for Volto blocks
volto-featured-block: Volto block to create pages with arbitrary content based on a simple schema (title + text + image), with variation support, and not based on existing content of the site (in contraposition to teaser blocks being based on existing content of the site)

Widgets

Input components, to be reused in the form library

volto-vocabulary-icons-widget - Widget to edit vocabularies where term key is associated with a Fontawesome icon. Volto addon for vocabularies with icons
volto-object-widget - Widget for generic JS objects
volto-widget-geolocation - Geolocation with GeoNames integration.
volto-widget-temporal-coverage - Volto widget: Temporal coverage.
volto-widgets-view - Provides the "view" counterpart for the "edit" widgets in Volto
volto-multilingual-widget - Enabled multi-language editing of data, used internally by the cookie consent addon
volto-widget-toggle - Replace checkbox widgets with a visually nicer toggle widget
volto-blocks-widget - Volto addon to use blocks inside fields
volto-react-table-widget - Widget to replace Volto's ObjectListWidget to edit data-grid like widgets in a more performant way with a table based on react-table
volto-image-crop-widget - Extends built-in FileWidget to be able to crop images in-place
volto-data-grid-widget - A field to edit lists of data in a data-grid like fashion. Please note that Volto ships already with a widget for "lists of data", the ObjectListWidget, which uses an accordion for the list.
volto-icon-selector-widget - A widget to search and select an icon from a list, by default it use awesome font icon implementation in semantic ui, but it can be customized.
volto-widget-theme-picker - A theme color picker for themes in Volto blocks
volto-doublerange-facet - Adds a double range facet filter to the Volto Search block

Themes

volto-eea-website-theme - Volto Theme for European Environment Agency web sites
volto-forests-theme - Volto theme for "Forest Information System For Europe"
volto-energy-theme - Volto theme for "Climate and energy in the EU"
volto-quanta - A new theme for Volto, right now only styles a few form controls
volto-theme-plone-regional - Volto Theme for Plone regional sites (i.e. plone.de, plone.org.br)
volto-educal-theme - Volto theme for Educational websites
volto-museumhilversum-theme - Volto theme for Museum Hilversum
volto-intkwebsite-theme - Volto theme for INTK
volto-theme-twenty-twenty-one - Volto "Twenty Twenty One" theme
volto-brasil-theme - Volto visual theme for "PortalBrasil" / Tema visual para o PortalBrasil
volto-dsgov-theme - Volto visual theme for "DSGov" / Tema visual para Volto baseado no DSGov
volto-pimaker-theme - Plone 6 Volto Theme for "Pi Maker"
volto-happy-theme - Plone 6 Volto Theme for "Happy Baseball"
volto-light-theme - Plone 6 Volto Light Theme (by kitconcept)
volto-mountain-theme - Plone 6 Volto Theme for "Mountain"
volto-itxbb-theme - Plone 6 Volto Theme for "In The Stix Broadband"
zeeuwsmuseum-jaarverslag - Plone 6 Volto Theme for "ANNUAL REPORTS" of Centraal Museum & Rietveld.

See all volto-addon tagged packages on NPM.

Plone backend add-ons for Volto

plone.volto - Official Volto integration package for Plone.
collective.volto.dropdownmenu - Add-on for manage a Dropdown Menu in Volto.
collective.volto.subsites - This add-on enable a new Subsite content-type and provides some utilities for Volto.
collective.volto.formsupport - Add some helper routes and functionalities for Volto sites with form blocks provided by volto-form-block Volto plugin.
collective.bookmarks -Bookmarks (aka favorites, wishlists). The Plone pendent is volto-bookmarks
collective.volto.secondarymenu - Add-on for Volto to manage a secondary menu (right column) for Dropdown Menu
collective.volto.blocksfield - Custom z3c.form field that allows to use Volto blocks. This field can replace RichText fields in your custom content-types.
collective.volto.socialsettings - Add-on for manage a list of social network links on Volto
eea.api.controlpanel - Backend add-on to be used with volto-controlpanel
eea.api.layout - DX fixed blocks layout behavior with auto-sync support
eea.schema.slate - DX TTW Slate JSONField to be used with DX Content-Types metadata and volto-slate
volto-plone-reloader (volto addon) - Use plone.reload's /@@reload feature through a volto frontend

Training, example code, tutorials

Several online training sessions have been recorded, they are available on Youtube by searching volto training
Volto Hands-On – Practice your skills by recreating the plone.com site using Volto.
Volto Add-ons Development – Build custom Volto add-ons, explore more advanced Volto topics.
Mastering Plone 6 Development – Learn the best practices of Plone development for frontend and backend using Volto as well as Plone Classic.
Volto Customization for JavaScript Beginners - Master Volto customization from the ground up.
Effective Volto - Learn advanced topics, good practices, and build upon your basic experience with Volto.
Demo project for Volto addons

Awesome React articles, relevant to any Volto developer

Websites built with Volto

ASP Area Nord (Website of the Public company of personal services of the Modena municipalities in the north area. Developed by RedTurtle, 2021)
Baccanale Imola (Baccanale is a food fair that happens every year in Imola, Italy. Developed by RedTurtle, 2020)
Biblioteche Pianura Est (Website of the Associated libraries of eastern plain. Developed by RedTurtle, 2021)
BISE (Biodiversity Information System for Europe, developed by Eau de Web, 2019)
Camera di Commercio dell'Umbria (Website Chamber of Commerce of Umbria. Developed by RedTurtle, 2021)
Camera di Commercio di Reggio Emilia (Website Chamber of Commerce of Reggio Emilia. Developed by RedTurtle, 2021)
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 Medolla (Website of the Municipality of Medolla. Developed by RedTurtle, 2021)
Comune di Mirandola (Website of the Municipality of Mirandola. Developed by RedTurtle, 2021)
Comune di Modena (Website of the Municipality of Modena. Developed by RedTurtle, 2020)
Comune di San Possidonio (Website of the Municipality of San Possidonio. Developed by RedTurtle, 2021)
Comune di Vaiano (Website of the Municipality of Vaiano. Developed by RedTurtle, 2021)
Comune di Vernio (Website of the Municipality of Vernio. Developed by RedTurtle, 2021)
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)
European Environment Agency (Website of the European Environment Agency. Developed by Eau de Web, 2023)
Energy Climate Union portal for Europe (Thematic website focusing on European strides towards mitigating climate change, developed by Eau de Web, 2020)
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)
Forschungszentrum Jülich (Website for Forschungzentrum Jülich, which is one of the largest research institutions in Europe, developed by kitconcept GmbH, 2022)
Geosphere Austria (Website of the Austrian Federal Institute, national geological, geophysical, climatological and meteorological service, 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)
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)
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)
ILPO (the registration portal of continuous learning at the University of Jyväskylä. Developed by University of Jyväskylä, 2022)
Industrial Emissions portal for Europe (Thematic website focusing on European industrial emissions, developed by Eau de Web, 2020)
iTlent - Basque Institute of Talent in VET (developed by CodeSyntax, 2024)
Jobfamilie MEDICE (Carrer website for MEDICE Arzneimittel Pütter GmbH & Co. KG), developed by Werkbank GmbH, 2020)
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)
Leibniz Institute for Science and Mathematics Education (IPN) (Website of the IPN, a research institute dedicated to issues related to learning and teaching of science, mathematics and computer science in and outside of schools, developed by Starzel, 2023)
MEDICE Webseite (Website for MEDICE Arzneimittel Pütter GmbH & Co. KG), developed by Werkbank GmbH, 2020)
Nuova Voce Ecologista (Website of Nuova Voce Ecologista, an Italian green Party, 2020)
Osaka University (Osaka University is considered one of the most prestigious universities in Japan. Developed by CMScom, 2021)
ResOU (ResOU is introducing official researched releases by the University of Osaka, Japan. Developed by CMScom, 2020)
Stradanove (Website of the Department of Youth Policies 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)
Talke Carrer Website (Carrer website for Talke, one of the leading a chemical and petrochemical logistics companies in Germany, developed by kitconcept GmbH, 2020)
UEU (Website for Udako Euskal Unibertsitatea, a non-profit University offering all its service only in Basque: courses, publications, ... developed by CodeSyntax, 2023)
Unione dei Comuni della Val Bisenzio (Website of the Municipality union of Val Bisenzio. Developed by RedTurtle, 2021)
VHS Ehrenamtsportal (Website to help volunteers that help refugees for the German Adult Education Association, developed by kitconcept GmbH, 2018)
VisitModena (Tourist website of the Municipality of Modena, developed by RedTurtle, 2020)
WISE-Freshwater (WISE-Freshwater, the Freshwater Information System for Europe. Developed by Eau de web for the European Environmental Agency, 2021)
Zeelandia (Corporate website for one of the leading bakery ingredients manufacturers in Germany, developed by kitconcept GmbH, 2019)

Open-source websites built with Volto

The following websites have been built with Volto. You can find their complete source code by following their links. Please note that complex websites are built on top of Volto add-ons, and most of the time they're just an empty shell for the add-ons. You should check the dependencies in their package.json for more details.

Forest Information System for Europe - Volto project for Forest Information System for Europe website
Freshwater Information System for Europe - Volto project for Freshwater Information System for Europe website
European Industrial Emissions Portal - Volto project for European Industrial Emissions Portal website
Biodiversity Information System for Europe - Volto project for Biodiversity Information System for Europe website
EEA Main Website frontend - Plone 6 Volto frontend for European Environment Agency
Climate and energy in the EU - Volto project for Climate and energy in the EU website
volto-bise - A Volto project packaged as an addon. It provides Theming using a razzle.extend.js provided alias.
design-volto-theme Volto theme for Italian Public Administration
2021.ploneconf.org - Volto project for Plone Conference 2021 site
2022.ploneconf.org - Volto project for Plone Conference 2022 site
2023.ploneconf.org - Volto project for Plone Conference 2023 site
plone.org.br - Volto project for the Brazilian Plone Community
nsw-design-system-plone6-kit - NSW Design System Plone 6 Kit Volto project for NSW.gov.au sites
volto-centraalmuseum-theme - Volto project for the Centraal Museum & Rietveld made for INTK.
volto-eea-design-system - EEA Design System Plone 6 Kit Volto project for European Environment Agency web sites
volto-eea-kitkat - A known good set of Volto add-ons to be used within all EEA projects and beyond, made for European Environment Agency
volto-rietveldschroderhuis-theme - Volto project for the Rietveld Schröder House made for INTK.
volto-zeeuwsmuseum-theme - Volto project for the Zeeuws Museum made for INTK.