Get started

Page Composer is a React-based layout editor. You mount it into any element and it turns page JSON into a drag-and-drop editing surface of components, fields and templates — all of which are plain React and fully extensible.

Add the assets

Load the editor stylesheet and script. The bundle is self-contained — React ships inside app.js and is exposed as window.React after it loads (unless the page already defines one). Extensions that load before the bundle can't rely on window.React; they register with the factory form instead (see Creating fields / Component templates).

<link rel="stylesheet" href="/assets/css/app.css">
<script src="/assets/js/app.js"></script>

Mount an editor

Give an element a data-content JSON string and call pcEditor(selector, config). The editor persists changes to a hidden <input> it inserts right after the element, so a wrapping <form> still submits it.

<div id="my-editor" data-content='[{"name":"Row","components":[]}]'></div>
<script>
  pcEditor('#my-editor', {
    mode: 'widget',
    fields: ['text', 'wysiwyg'],
    requests: { driver: 'graphql', config: { url: 'https://host/graphql' } }
  });
</script>

Tag-style init

Prefer markup? Point data-pce-on-* attributes at global functions to wire callbacks without touching the pcEditor() call — comma-separate to attach several.

<div id="editor" data-pce-on-render="onRender, trackLoad"></div>