DOCSEARCHbyAlgolia
Submit Docs

Volto

repository·main·Indexed 20 days ago

https://github.com/plone/volto

The default React-based frontend for Plone 6, featuring a block-based content editor (Pastanaga) that communicates with the Plone CMS via a REST API. The project includes a monorepo of supporting packages: @plone/components (a headless UI library built on React Aria Components), @plone/types (TypeScript definitions for Plone unified typings), @plone/razzle (a maintained fork of the Razzle project for SPA and SSR applications), and various development utilities for Babel, ESLint, and i18n automation.

Tokens
172K
Snippets
539
Records
803
Agent score
70%

What's inside plone-volto

  1. What is volto-slate

    main

    volto-slate is an interactive text editor for Volto built on top of the Slate framework. It serves as the default text block in Volto (added in version 16.0.0-alpha.15) and provides enhanced WYSIWYG functionality with deep integration into the Volto block system.

    Key features include:

    • Smart Pasting: Pasting complex documents into a volto-slate block automatically converts elements into native Volto blocks (e.g., images become Volto image blocks, tables become Volto table blocks).
    • Drag-and-Drop: Supports dragging images directly into the text block to trigger uploads as Volto image blocks.
    • Block Conversion: Includes UI elements like a Table button that creates actual Volto table blocks rather than just inline HTML tables.

    Note on Deprecation: The previous text text block based on Draft.js is deprecated and scheduled for removal in Volto 18. If you are using the old text block, you should refer to the Volto Upgrade Guide to migrate to volto-slate.

  2. Overview of @plone/registry

    main
    @plone/registry provides infrastructure for building pluggable and extensible add-on and configuration registries for JavaScript and TypeScript-based applications. It is designed to help developers move beyond building one-off applications by providing a standardized way to manage components, utilities, routes, and configurations in a way that allows the application to be extended via add-ons.

  3. Overview of the Plone REST API JavaScript client

    main
    The Plone REST API JavaScript client is a framework-agnostic library designed to interact with the Plone REST API. It is built on top of TanStack Query, providing robust data fetching, caching, and synchronization capabilities. Because it is framework-agnostic, it can be used in various JavaScript environments beyond just Volto.

  5. What is Volto?

    main

    Volto is a React-based frontend for the Plone Content Management System (CMS). It serves as the default frontend for Plone 6 and communicates with the Plone backend via the Plone REST API.

    Key features include:

    • Pastanaga Editor: A modern, block-based content layout editor that is extensible and customizable.
    • Extensibility: Volto can be extended using add-ons. You can find community-released add-ons on NPM by searching for the volto-addon keyword or via the Volto Awesome list.

  6. Explore Volto websites in production

    main
    Volto has been used in production since 2018 for a wide variety of websites. You can find an authoritative list of production websites in the Awesome Volto repository. Additionally, the Plone Marketing Team maintains a list of Plone 6 websites here.

  8. Understand @plone/razzle

    main

    @plone/razzle is a maintained fork of the original Razzle project, integrated into the Volto monorepo. It is designed to abstract the complex configuration required for building Single Page Applications (SPAs) and Server-Side Rendered (SSR) applications.

    Unlike opinionated frameworks like Next.js or Nuxt, Razzle provides the developer experience of create-react-app but leaves architectural decisions regarding frameworks, routing, and data fetching up to the developer. While commonly used with React, it is compatible with Preact, Vue, Svelte, and Angular.

    Note: This fork exists to ensure dependencies remain updated and security issues are addressed, as the upstream Razzle project is unmaintained.

  9. Common Volto development tasks

    main

    Depending on your goals, Volto development tasks can be categorized into three levels of complexity:

    Basic Development

    • Customizing (shadowing) built-in components.
    • Writing new blocks.
    • Adjusting built-in settings and extending the Pastanaga theme.
    • Extending volto-slate richtext editor capabilities.
    • Using the Redux store.

    Routine Development

    • Writing new Redux actions and reducers.
    • Creating new views for Plone content.
    • Creating new Volto add-ons.
    • Writing schema-based forms and form widgets.
    • Writing tests using Vitest (unit) or Cypress (integration).
    • Implementing Higher Order Components (HOCs) for reusable logic.

    Occasional/Advanced Development

    • Writing plone.restapi endpoints or adapters for backend integration.
    • Implementing block transformers for backend integration.
    • Writing Express middleware for the Volto server.
    • Customizing Webpack configuration via Razzle.
    • Writing Redux middleware.

  10. Introduction to Blocks in Volto

    main
    Volto uses the Pastanaga Editor Engine, which allows users to visually compose pages using a block-based approach. Instead of a single monolithic text area, content is divided into discrete, manageable blocks that can be moved, styled, and configured independently.

  11. What is a Volto add-on?

    main

    Volto add-ons are CommonJS or ESM packages used to encapsulate logic, configuration, components, customizations, or themes in a reusable way. They allow you to extend the Plone CMS user interface by:

    • Providing additional views and blocks.
    • Overriding or extending built-in views, blocks, and settings.
    • Shadowing or customizing modules from Volto or other add-ons.
    • Registering custom routes.
    • Providing custom Redux actions and reducers.
    • Registering custom Express middleware.
    • Tweaking webpack/Razzle configuration.
    • Providing custom themes.

  12. What is the AppExtras component?

    main
    The AppExtras component serves as a global insertion point for code that needs to span the entire application or integrate third-party services. Common use cases include analytics (like Google Analytics), general-purpose utility code, or specialized UI components that depend on specific routes. These components are rendered by the main App component.