@webiny/app-page-builder-elements

A package that provides all the tools necessary to render pages created with Webiny's Page Builder application.

Table of Contents

• Installation
• Overview
• Examples
• Reference
  • Functions
    • createTheme

Installation

npm install --save @webiny/app-page-builder-elements

Or if you prefer yarn:

yarn add @webiny/app-page-builder-elements

ℹ️ NOTE

In most cases, manual installation is not needed as the package is already included in every Webiny project.

Overview

A package that provides all the tools necessary to render pages created with Webiny's Page Builder application. It not only contains a set od default page element renderers (paragraph, heading, block, cell, grid, ...), but also the necessary utilities to create new ones.

Examples

| Example | Description | | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Manual Setup | An example of manually setting up the PageElementsProvider, with all of the default renderers and modifiers. Useful when rendering pages in an external project, for example in a standalone Next.js application. |

Reference

Components

PageElementsProvider

export declare const PageElementsProvider: React.ComponentType<PageElementsProviderProps>;

Sets up all the page element renderers and modifiers. Must be mounted at the beginning of your React application.

import React from "react";
import { PageElementsProvider as PbPageElementsProvider } from "@webiny/app-page-builder-elements/PageElements";

// Import element renderers.
// ( ... )

// Import modifiers.
// ( ... )

// A theme object. For more info, see:
// https://github.com/webiny/webiny-js/tree/dev/packages/theme
import { theme } from "./theme";

interface PageElementsProviderProps {
  children: React.ReactNode;
}

export const PageElementsProvider = ({ children }: PageElementsProviderProps) => (
  <PbPageElementsProvider
    theme={theme}
    renderers={
      {
        /* ... */
      }
    }
    modifiers={{
      attributes: {
        /* ... */
      },
      styles: {
        /* ... */
      }
    }}
  >
    {children}
  </PbPageElementsProvider>
);