Awesome
awesome-volto<!-- omit in toc -->
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<!-- omit in toc -->
- Official websites
- Community
- Addons
- Training, example code, tutorials
- Open-source websites built with Volto
- Companies
Official websites
Community
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.
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-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.
More
- 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
- Writing resilient react components
- React rendering behavior
- React Algebraic Effects
- Code Splitting - deeper understanding
- High Performance React
- A Complete Guide to useEffect (and more)
- On the intricacies on React's onClick event handlers
- React rendering order
- Using AbortController to deal with race conditions
- Exploring Render Props Vs. React Hooks In 2020
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)
- 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.
Companies
- kitconcept
- Redturtle
- Eau de Web
- Rohberg
- Simples Consultoria
- CodeSyntax
- Nicola Zambello
- PretaGov AU/UK
- FrescoMedia
- ... please add yourself here