Page Builder

The Page Builder is a powerful drag-and-drop tool for creating dynamic page layouts using pre-defined blocks.

Components

PageRenderer

The PageRenderer component is responsible for rendering the final page content based on the JSON structure.

import { PageRenderer } from '@orbitusdev/components/page-builder';
import type { PageContentData } from '@orbitusdev/business/schemas/page-block';
 
const content: PageContentData = {
  blocks: [
    { id: '1', type: 'hero', order: 0, data: { title: 'Welcome' } },
    { id: '2', type: 'content', order: 1, data: { text: 'Hello World' } }
  ]
};
 
export default function MyPage() {
  return <PageRenderer content={content} />;
}

PageEditor

The PageEditor provides a visual interface for managing page blocks. It handles adding, removing, reordering, and editing blocks.

'use client';
 
import { PageEditor } from '@orbitusdev/components/page-builder';
 
export default function EditorPage({ initialContent }) {
  const handleSave = async (data) => {
    await saveToBackend(data);
  };
 
  return (
    <PageEditor 
      pageId="123"
      locale="en"
      initialContent={initialContent}
      onSave={handleSave}
    />
  );
}

Available Blocks

The Page Builder currently supports the following blocks:

Architecture

• Registry: registry.ts maps block types to their definitions and components.
• State: The editor uses local state for instantaneous updates and propagates changes via onSave.
• Drag & Drop: Powered by @dnd-kit for accessible and performant drag-and-drop interactions.

Customizable Blocks

To add a new block:

1. Create the block component in blocks/.
2. Define its schema in @orbitusdev/business.
3. Register it in registry.ts and PageRenderer.