From fd9a13fb680bf39334ca4c2c30b38b10b60c6678 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Fri, 16 Aug 2024 14:34:15 +0200
Subject: [PATCH] :alembic: Implemented full form previews POC

---
 src/components/ComponentPreview.tsx           |   9 +-
 src/components/FormPreview.stories.ts         | 148 +++++++++++
 src/components/FormPreview.tsx                | 251 ++++++++++++++++++
 src/components/form-preview.scss              |  97 +++++++
 src/registry/addressNL/index.ts               |   4 +-
 src/registry/bsn/index.ts                     |   2 +-
 src/registry/checkbox/index.ts                |   2 +-
 src/registry/columns/index.ts                 |  11 +-
 .../{preview.tsx => panel-preview.tsx}        |  71 +++--
 .../columns/{preview.scss => previews.scss}   |  21 ++
 src/registry/columns/structure-preview.tsx    |  28 ++
 src/registry/columns/webform-preview.tsx      |  25 ++
 src/registry/content/index.ts                 |  15 +-
 src/registry/content/webform-preview.tsx      |   9 +
 src/registry/cosignV1/index.ts                |   2 +-
 src/registry/cosignV2/index.ts                |   2 +-
 src/registry/currency/index.ts                |   2 +-
 src/registry/date/index.ts                    |   2 +-
 src/registry/datetime/index.ts                |   2 +-
 src/registry/editgrid/index.ts                |  11 +-
 .../{preview.tsx => panel-preview.tsx}        |   0
 src/registry/editgrid/previews.scss           |   3 +
 src/registry/editgrid/structure-preview.tsx   |  21 ++
 src/registry/editgrid/webform-preview.tsx     |  48 ++++
 src/registry/email/index.ts                   |   2 +-
 src/registry/fieldset/index.ts                |  10 +-
 .../{preview.tsx => panel-preview.tsx}        |   0
 src/registry/fieldset/structure-preview.tsx   |  10 +
 src/registry/fieldset/webform-preview.tsx     |  18 ++
 src/registry/file/index.ts                    |   2 +-
 src/registry/iban/index.ts                    |   2 +-
 src/registry/{index.tsx => index.ts}          |   0
 src/registry/licenseplate/index.ts            |   2 +-
 src/registry/map/index.ts                     |   2 +-
 src/registry/npFamilyMembers/index.ts         |   2 +-
 src/registry/number/index.ts                  |   2 +-
 src/registry/password/index.ts                |   2 +-
 src/registry/phonenumber/index.ts             |   2 +-
 src/registry/postcode/index.ts                |   2 +-
 src/registry/radio/index.ts                   |   2 +-
 src/registry/select/index.ts                  |   2 +-
 src/registry/selectboxes/index.ts             |   2 +-
 src/registry/signature/index.ts               |   2 +-
 src/registry/textarea/index.ts                |   2 +-
 src/registry/textfield/index.ts               |   2 +-
 src/registry/time/index.ts                    |   2 +-
 src/registry/types.ts                         |  60 ++++-
 47 files changed, 836 insertions(+), 82 deletions(-)
 create mode 100644 src/components/FormPreview.stories.ts
 create mode 100644 src/components/FormPreview.tsx
 create mode 100644 src/components/form-preview.scss
 rename src/registry/columns/{preview.tsx => panel-preview.tsx} (51%)
 rename src/registry/columns/{preview.scss => previews.scss} (74%)
 create mode 100644 src/registry/columns/structure-preview.tsx
 create mode 100644 src/registry/columns/webform-preview.tsx
 create mode 100644 src/registry/content/webform-preview.tsx
 rename src/registry/editgrid/{preview.tsx => panel-preview.tsx} (100%)
 create mode 100644 src/registry/editgrid/previews.scss
 create mode 100644 src/registry/editgrid/structure-preview.tsx
 create mode 100644 src/registry/editgrid/webform-preview.tsx
 rename src/registry/fieldset/{preview.tsx => panel-preview.tsx} (100%)
 create mode 100644 src/registry/fieldset/structure-preview.tsx
 create mode 100644 src/registry/fieldset/webform-preview.tsx
 rename src/registry/{index.tsx => index.ts} (100%)

diff --git a/src/components/ComponentPreview.tsx b/src/components/ComponentPreview.tsx
index 5c9e2813..5d55e08e 100644
--- a/src/components/ComponentPreview.tsx
+++ b/src/components/ComponentPreview.tsx
@@ -85,8 +85,11 @@ const GenericComponentPreview: React.FC<GenericComponentPreviewProps> = ({
 }) => {
   const {key} = component;
   const entry = getRegistryEntry(component);
-  const {preview: PreviewComponent, defaultValue = ''} = entry;
-  if (PreviewComponent === null) {
+  const {
+    preview: {panel: PanelPreviewComponent},
+    defaultValue = '',
+  } = entry;
+  if (PanelPreviewComponent === null) {
     return null;
   }
   const isMultiple = hasOwnProperty(component, 'multiple') ? component.multiple : false;
@@ -106,7 +109,7 @@ const GenericComponentPreview: React.FC<GenericComponentPreviewProps> = ({
       component={component}
       initialValues={initialValues}
     >
-      <PreviewComponent component={component} />
+      <PanelPreviewComponent component={component} />
     </ComponentPreviewWrapper>
   );
 };
diff --git a/src/components/FormPreview.stories.ts b/src/components/FormPreview.stories.ts
new file mode 100644
index 00000000..4c2bfe6a
--- /dev/null
+++ b/src/components/FormPreview.stories.ts
@@ -0,0 +1,148 @@
+import {Meta, StoryObj} from '@storybook/react';
+import {expect, userEvent, waitFor, within} from '@storybook/test';
+
+import {BuilderContextDecorator} from '@/sb-decorators';
+
+import FormPreview from './FormPreview';
+
+export default {
+  title: 'Public API/FormPreview (⚠️ UNSTABLE)',
+  component: FormPreview,
+  decorators: [BuilderContextDecorator],
+  parameters: {
+    modal: {noModal: true},
+  },
+} satisfies Meta<typeof FormPreview>;
+
+type Story = StoryObj<typeof FormPreview>;
+
+export const SingleTextField: Story = {
+  name: 'Form with text field',
+  args: {
+    components: [
+      {
+        id: 'oiejwa',
+        type: 'textfield',
+        key: 'parent.aTextField',
+        label: 'A text field',
+        defaultValue: 'a default value',
+      },
+    ],
+  },
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button', {name: 'Edit'}));
+    await waitFor(async () => {
+      expect(await canvas.findByRole('dialog')).toBeVisible();
+    });
+  },
+};
+
+export const FieldSet: Story = {
+  name: 'Form with fieldset',
+  args: {
+    components: [
+      {
+        id: 'oiejwa',
+        type: 'textfield',
+        key: 'aTextField',
+        label: 'A text field',
+      },
+      {
+        id: 'wieurq4',
+        type: 'fieldset',
+        key: 'aFieldset',
+        label: 'Fieldset with nested components',
+        hideHeader: false,
+        components: [
+          {
+            id: 'vr832jc',
+            type: 'textfield',
+            key: 'nestedTextfield',
+            label: 'Nested textfield',
+          },
+          {
+            id: 'vrekjc',
+            type: 'textfield',
+            key: 'nestedTextfield2',
+            label: 'Nested textfield 2',
+          },
+        ],
+      },
+      {
+        id: 'cols1',
+        type: 'columns',
+        key: 'cols1',
+        columns: [
+          {
+            size: 6,
+            sizeMobile: 4,
+            components: [
+              {
+                id: 'number1',
+                type: 'number',
+                key: 'number1',
+                label: 'Number',
+              },
+            ],
+          },
+          {
+            size: 3,
+            sizeMobile: 4,
+            components: [
+              {
+                id: 'email1',
+                type: 'email',
+                key: 'email1',
+                label: 'Email 1',
+                validateOn: 'blur',
+              },
+              {
+                id: 'email2',
+                type: 'email',
+                key: 'email2',
+                label: 'Email 2',
+                validateOn: 'blur',
+              },
+            ],
+          },
+          {
+            size: 3,
+            sizeMobile: 4,
+            components: [
+              {
+                id: 'content1',
+                type: 'content',
+                key: 'content1',
+                html: '<p>Some free form content</p>',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'editgrid1',
+        type: 'editgrid',
+        key: 'editgrid1',
+        label: 'Contacts',
+        groupLabel: 'Person',
+        disableAddingRemovingRows: false,
+        components: [
+          {
+            id: 'editgridNested1',
+            type: 'textfield',
+            key: 'editgridNested1',
+            label: 'Name',
+          },
+          {
+            id: 'editgridNested2',
+            type: 'phoneNumber',
+            key: 'editgridNested2',
+            label: 'Phone number',
+            inputMask: null,
+          },
+        ],
+      },
+    ],
+  },
+};
diff --git a/src/components/FormPreview.tsx b/src/components/FormPreview.tsx
new file mode 100644
index 00000000..9c0c15ad
--- /dev/null
+++ b/src/components/FormPreview.tsx
@@ -0,0 +1,251 @@
+import {AnyComponentSchema} from '@open-formulieren/types';
+import clsx from 'clsx';
+import {Formik} from 'formik';
+import {set} from 'lodash';
+import {useState} from 'react';
+import {FormattedMessage, useIntl} from 'react-intl';
+
+import ComponentEditForm from '@/components/ComponentEditForm';
+import Modal from '@/components/Modal';
+import ModeToggle from '@/components/ModeToggle';
+import {getRegistryEntry} from '@/registry';
+import {hasOwnProperty} from '@/types';
+
+import './form-preview.scss';
+
+interface ActionIconProps {
+  icon: string;
+  label: string;
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const ActionIcon: React.FC<ActionIconProps> = ({icon, label, onClick}) => (
+  <button type="button" onClick={onClick} className="offb-form-preview-action" title={label}>
+    <i className={`fa fa-fw fa-${icon}`} aria-hidden="true" />
+    <span className="sr-only">{label}</span>
+  </button>
+);
+
+export type PreviewMode = 'structure' | 'webform';
+
+export interface RenderComponentProps {
+  component: AnyComponentSchema;
+  previewMode: PreviewMode;
+}
+
+/**
+ * Render a single component for the form preview.
+ *
+ * This component may be nested inside a parent component. The component configuration
+ * is looked up in the registry, and the appropriate preview render handler is taken:
+ *
+ * 1. Check for an explicit form preview handler
+ * 2. If not present, render the edit form preview handler
+ * 3. Ultimately, fall back and display a message the component is unknown.
+ */
+export const RenderComponent: React.FC<RenderComponentProps> = ({component, previewMode}) => {
+  switch (previewMode) {
+    case 'structure': {
+      return <StructurePreview component={component} />;
+    }
+    case 'webform': {
+      return <WebformPreview component={component} />;
+    }
+  }
+};
+
+const getDefaultSummary = (component: AnyComponentSchema): string => {
+  if (hasOwnProperty(component, 'label')) {
+    return String(component.label);
+  }
+  return component.id || '-';
+};
+
+interface StructurePreviewProps {
+  component: AnyComponentSchema;
+}
+
+const StructurePreview: React.FC<StructurePreviewProps> = ({component}) => {
+  const intl = useIntl();
+  const [editModalOpen, setEditModalOpen] = useState(false);
+
+  const {
+    getSummary = getDefaultSummary,
+    preview: {structureSubtree: StructureSubtree},
+  } = getRegistryEntry(component);
+
+  const className = clsx(
+    'offb-form-preview-component',
+    `offb-form-preview-component--${component.type}`,
+    {
+      'offb-form-preview-component--hidden': component.hidden,
+    }
+  );
+
+  const subtree = StructureSubtree ? (
+    <StructureSubtree
+      component={component}
+      renderSubtree={components => (
+        <RenderComponents components={components} previewMode="structure" />
+      )}
+    />
+  ) : null;
+
+  return (
+    <div className={className}>
+      <button className="offb-form-preview-component__drag-handle">
+        <i
+          className="fa fa-grip-vertical"
+          aria-label={intl.formatMessage({
+            description: 'Accessible label for drag-and-drop handle icon',
+            defaultMessage: 'Hold to drag',
+          })}
+        />
+      </button>
+      <div className="offb-form-preview-component__representation">
+        <span className="offb-form-preview-component__representation-text">
+          {getSummary(component)}
+        </span>
+        <span className="offb-form-preview-component__component-type">
+          {/* TODO: add translations for the type values -> grab this from the builderInfo */}
+          {component.type}
+        </span>
+      </div>
+      <div className="offb-form-preview-component__controls">
+        <ActionIcon icon="pencil" label="Edit" onClick={() => setEditModalOpen(true)} />
+        <ActionIcon icon="times" label="Delete" onClick={() => alert('TODO')} />
+      </div>
+      {subtree && <div className="offb-form-preview-component__children">{subtree}</div>}
+
+      <Modal
+        isOpen={editModalOpen}
+        closeModal={() => setEditModalOpen(false)}
+        className="component-settings"
+      >
+        <div className="component-edit-container">
+          <ComponentEditForm
+            isNew={false}
+            component={component}
+            builderInfo={{
+              title: 'TODO',
+              group: 'TODO',
+              icon: 'todo',
+              schema: component,
+              weight: 10,
+            }}
+            onCancel={() => setEditModalOpen(false)}
+            onRemove={() => {
+              console.log('REMOVE component', component);
+              setEditModalOpen(false);
+            }}
+            onSubmit={() => {
+              console.log('ALTER component', component);
+              setEditModalOpen(false);
+            }}
+          />
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+interface WebformPreviewProps {
+  component: AnyComponentSchema;
+}
+
+const WebformPreview: React.FC<WebformPreviewProps> = ({component}) => {
+  const entry = getRegistryEntry(component);
+  const {webform: WebformPreview, panel: PanelPreview} = entry.preview;
+  if (WebformPreview) {
+    return (
+      <WebformPreview
+        component={component}
+        renderSubtree={components => (
+          <RenderComponents components={components} previewMode="webform" />
+        )}
+      />
+    );
+  }
+  if (PanelPreview) return <PanelPreview component={component} />;
+  return <>NO PREVIEW AVAILABLE FOR COMPONENT TYPE '{component.type}'</>;
+};
+
+export interface FormPreviewProps {
+  components: AnyComponentSchema[];
+}
+
+/**
+ * Renders a preview of a Formio form definition.
+ *
+ * Pass the formio form configuration as an array of component definitions, and they
+ * will be rendered in order (and recursively). Preview components get controls for
+ * editing and some visual feedback about state (such as hidden/visible).
+ */
+const FormPreview: React.FC<FormPreviewProps> = ({components}) => {
+  const [previewMode, setPreviewMode] = useState<PreviewMode>('structure');
+
+  const initialValues: Record<string, unknown> = {};
+
+  // TODO: delegate this to the registry so that we can get default values for nested
+  // components too (basically the equivalent of iter_components)
+  for (const component of components) {
+    const entry = getRegistryEntry(component);
+    const defaultValue = hasOwnProperty(component, 'defaultValue')
+      ? component.defaultValue
+      : entry.defaultValue ?? '';
+    set(initialValues, component.key, defaultValue);
+  }
+
+  return (
+    <div className={clsx('offb-form-preview', `offb-form-preview--${previewMode}`)}>
+      <ModeToggle<PreviewMode>
+        name="previewMode"
+        currentMode={previewMode}
+        onToggle={mode => setPreviewMode(mode)}
+        modes={[
+          {
+            value: 'structure',
+            label: (
+              <FormattedMessage
+                description="Form 'structure' preview mode"
+                defaultMessage="Structure"
+              />
+            ),
+          },
+          {
+            value: 'webform',
+            label: (
+              <FormattedMessage description="Form 'Form' preview mode" defaultMessage="Form" />
+            ),
+          },
+        ]}
+        className="offb-form-preview__mode-toggle"
+      />
+
+      <Formik
+        enableReinitialize
+        initialValues={initialValues}
+        onSubmit={() => {
+          window.alert("Can't submit a preview form.");
+        }}
+      >
+        <RenderComponents components={components} previewMode={previewMode} />
+      </Formik>
+    </div>
+  );
+};
+
+interface RenderComponentsProps {
+  components: AnyComponentSchema[];
+  previewMode: PreviewMode;
+}
+
+const RenderComponents: React.FC<RenderComponentsProps> = ({components, previewMode}) => (
+  <>
+    {components.map(component => (
+      <RenderComponent key={component.id} component={component} previewMode={previewMode} />
+    ))}
+  </>
+);
+
+export default FormPreview;
diff --git a/src/components/form-preview.scss b/src/components/form-preview.scss
new file mode 100644
index 00000000..f805cb9a
--- /dev/null
+++ b/src/components/form-preview.scss
@@ -0,0 +1,97 @@
+.offb-form-preview {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+
+  &--form {
+    gap: 0;
+
+    .offb-form-preview__mode-toggle {
+      margin-bottom: 5px;
+    }
+  }
+
+  &__mode-toggle {
+    align-self: flex-end;
+  }
+}
+
+.offb-form-preview-component {
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
+  grid-template-areas:
+    'drag-handle representation controls'
+    'drag-handle children children';
+
+  align-items: center;
+
+  border: 1px solid var(--offb-form-preview-component-border-color, #ccc);
+  border-radius: 0.2rem;
+
+  &__drag-handle {
+    all: initial;
+    grid-area: drag-handle;
+    padding-inline: 10px;
+    cursor: move;
+    align-self: stretch;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-inline-end: 1px dotted var(--offb-form-preview-component-border-color, #ccc);
+    outline: revert !important;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  &__representation {
+    grid-area: representation;
+    flex-grow: 1;
+    padding-inline: 10px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  &__component-type {
+    color: #aaa;
+    text-transform: lowercase;
+  }
+
+  &__controls {
+    --_offb-form-preview-action-padding-inline: 3px;
+    grid-area: controls;
+    border-inline-start: 1px dotted var(--offb-form-preview-component-border-color, #ccc);
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-inline: var(--_offb-form-preview-action-padding-inline);
+  }
+
+  &__children {
+    grid-area: children;
+    margin-block-end: 5px;
+    margin-inline-end: -1px;
+    padding-block-start: 5px;
+    padding-inline-start: 5px;
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+    border-block-start: 1px dotted var(--offb-form-preview-component-border-color, #ccc);
+  }
+}
+
+.offb-form-preview-action {
+  border: none;
+  appearance: none;
+  background-color: transparent;
+  padding-inline: var(--_offb-form-preview-action-padding-inline);
+  padding-block: 5px;
+
+  &:hover {
+    transform: scale(1.2);
+  }
+}
diff --git a/src/registry/addressNL/index.ts b/src/registry/addressNL/index.ts
index 8a7e4bd6..e0b2cd24 100644
--- a/src/registry/addressNL/index.ts
+++ b/src/registry/addressNL/index.ts
@@ -9,7 +9,9 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {
+    panel: Preview,
+  },
   defaultValue: {
     postcode: '',
     houseNumber: '',
diff --git a/src/registry/bsn/index.ts b/src/registry/bsn/index.ts
index de53c621..9481dab8 100644
--- a/src/registry/bsn/index.ts
+++ b/src/registry/bsn/index.ts
@@ -9,6 +9,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: '',
 } satisfies RegistryEntry<BsnComponentSchema>;
diff --git a/src/registry/checkbox/index.ts b/src/registry/checkbox/index.ts
index 622cd207..afe51179 100644
--- a/src/registry/checkbox/index.ts
+++ b/src/registry/checkbox/index.ts
@@ -9,7 +9,7 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: false, // formik field value
   comparisonValue: ComparisonValueInput,
 } satisfies RegistryEntry<CheckboxComponentSchema>;
diff --git a/src/registry/columns/index.ts b/src/registry/columns/index.ts
index 2960e363..0be72300 100644
--- a/src/registry/columns/index.ts
+++ b/src/registry/columns/index.ts
@@ -4,11 +4,18 @@ import {RegistryEntry} from '@/registry/types';
 
 import EditForm from './edit';
 import validationSchema from './edit-validation';
-import Preview from './preview';
+import PanelPreview from './panel-preview';
+import './previews.scss';
+import StructureSubtreePreview from './structure-preview';
+import WebformPreview from './webform-preview';
 
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {
+    panel: PanelPreview,
+    structureSubtree: StructureSubtreePreview,
+    webform: WebformPreview,
+  },
   defaultValue: undefined, // a column component does not hold a value itself
 } satisfies RegistryEntry<ColumnsComponentSchema>;
diff --git a/src/registry/columns/preview.tsx b/src/registry/columns/panel-preview.tsx
similarity index 51%
rename from src/registry/columns/preview.tsx
rename to src/registry/columns/panel-preview.tsx
index 4f1f57cb..123fbdde 100644
--- a/src/registry/columns/preview.tsx
+++ b/src/registry/columns/panel-preview.tsx
@@ -3,56 +3,49 @@ import clsx from 'clsx';
 import {useState} from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import ModeToggle from '@/components/ModeToggle';
+
 import {ComponentPreviewProps} from '../types';
-import './preview.scss';
 
-interface ViewportToggleProps {
-  mobile: boolean;
-  onChange: (isMobile: boolean) => void;
-}
-
-const ViewportToggle: React.FC<ViewportToggleProps> = ({mobile, onChange}) => {
-  return (
-    <div className="btn-group btn-group-toggle">
-      <label className={clsx('btn', 'btn-sm', 'btn-light', {active: !mobile})}>
-        <input
-          type="radio"
-          name="previewViewport"
-          value="desktop"
-          autoComplete="off"
-          checked={!mobile}
-          onChange={() => onChange(false)}
-        />
-        <FormattedMessage
-          description="Columns 'desktop' preview viewport"
-          defaultMessage="Default"
-        />
-      </label>
-      <label className={clsx('btn', 'btn-sm', 'btn-light', {active: mobile})}>
-        <input
-          type="radio"
-          name="previewViewport"
-          value="mobile"
-          autoComplete="off"
-          checked={mobile}
-          onChange={() => onChange(true)}
-        />
-        <FormattedMessage description="Columns 'mobile' preview viewport" defaultMessage="Mobile" />
-      </label>
-    </div>
-  );
-};
+type ViewportMode = 'desktop' | 'mobile';
 
 /**
  * Show a formio columns component preview.
  */
 const Preview: React.FC<ComponentPreviewProps<ColumnsComponentSchema>> = ({component}) => {
-  const [isMobile, setIsMobile] = useState(false);
+  const [viewportMode, setViewportMode] = useState<ViewportMode>('desktop');
+
   const {columns} = component;
+  const isMobile = viewportMode === 'mobile';
   return (
     <>
       <div className="d-flex justify-content-end align-items-center">
-        <ViewportToggle mobile={isMobile} onChange={newIsMobile => setIsMobile(newIsMobile)} />
+        <ModeToggle<ViewportMode>
+          name="previewViewport"
+          currentMode={viewportMode}
+          btnClassName="btn-light"
+          onToggle={setViewportMode}
+          modes={[
+            {
+              value: 'desktop',
+              label: (
+                <FormattedMessage
+                  description="Columns 'desktop' preview viewport"
+                  defaultMessage="Default"
+                />
+              ),
+            },
+            {
+              value: 'mobile',
+              label: (
+                <FormattedMessage
+                  description="Columns 'mobile' preview viewport"
+                  defaultMessage="Mobile"
+                />
+              ),
+            },
+          ]}
+        />
       </div>
 
       <div className={clsx('offb-columns-preview', {'offb-columns-preview--mobile': isMobile})}>
diff --git a/src/registry/columns/preview.scss b/src/registry/columns/previews.scss
similarity index 74%
rename from src/registry/columns/preview.scss
rename to src/registry/columns/previews.scss
index 2e93b898..27e7130b 100644
--- a/src/registry/columns/preview.scss
+++ b/src/registry/columns/previews.scss
@@ -26,6 +26,16 @@
     margin-inline: auto;
   }
 
+  &--ui {
+    background: transparent;
+
+    .offb-columns-preview__column {
+      background: transparent;
+      margin-block: unset;
+      border: none;
+    }
+  }
+
   &__column {
     background-color: var(--offb-columns-preview-background-color, #eee);
     padding-inline: 5px;
@@ -38,3 +48,14 @@
     grid-column: span var(--_col-preview-span);
   }
 }
+
+.offb-form-preview-column {
+  display: flex;
+  flex-direction: column;
+  row-gap: 5px;
+
+  &__label {
+    font-size: 0.8em;
+    margin-block-start: 5px;
+  }
+}
diff --git a/src/registry/columns/structure-preview.tsx b/src/registry/columns/structure-preview.tsx
new file mode 100644
index 00000000..bec1c1fe
--- /dev/null
+++ b/src/registry/columns/structure-preview.tsx
@@ -0,0 +1,28 @@
+import type {ColumnsComponentSchema} from '@open-formulieren/types';
+import {FormattedMessage} from 'react-intl';
+
+import type {StructureSubtreeProps} from '@/registry/types';
+
+const StructureSubtreePreview: React.FC<StructureSubtreeProps<ColumnsComponentSchema>> = ({
+  component: {columns},
+  renderSubtree,
+}) => {
+  return (
+    <>
+      {columns.map(({components}, index) => (
+        <div key={`column-${index}`} className="offb-form-preview-column">
+          <span className="offb-form-preview-column__label">
+            <FormattedMessage
+              description="Columns component: label for column in structure preview"
+              defaultMessage="Column {index} (of {total})"
+              values={{index: index + 1, total: columns.length}}
+            />
+          </span>
+          {renderSubtree(components)}
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default StructureSubtreePreview;
diff --git a/src/registry/columns/webform-preview.tsx b/src/registry/columns/webform-preview.tsx
new file mode 100644
index 00000000..8337ab44
--- /dev/null
+++ b/src/registry/columns/webform-preview.tsx
@@ -0,0 +1,25 @@
+import type {ColumnsComponentSchema} from '@open-formulieren/types';
+
+import type {FormPreviewProps} from '@/registry/types';
+
+/**
+ * Show a formio columns component preview.
+ */
+const WebformPreview: React.FC<FormPreviewProps<ColumnsComponentSchema>> = ({
+  component: {columns},
+  renderSubtree,
+}) => (
+  <div className="offb-columns-preview offb-columns-preview--ui">
+    {columns.map((column, index) => (
+      <div
+        key={`column-${index}`}
+        className="offb-columns-preview__column"
+        style={{'--_col-preview-span': column.size} as React.CSSProperties}
+      >
+        {renderSubtree(column.components)}
+      </div>
+    ))}
+  </div>
+);
+
+export default WebformPreview;
diff --git a/src/registry/content/index.ts b/src/registry/content/index.ts
index db4559a2..367b0d3b 100644
--- a/src/registry/content/index.ts
+++ b/src/registry/content/index.ts
@@ -3,10 +3,23 @@ import {ContentComponentSchema} from '@open-formulieren/types';
 import {RegistryEntry} from '../types';
 import EditForm from './edit';
 import validationSchema from './edit-validation';
+import WebformPreview from './webform-preview';
+
+const SUMMARY_TRUNCATE_SIZE = 20;
 
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: null,
+  getSummary: component => {
+    // use browser to strip tags
+    const doc = new DOMParser().parseFromString(component.html, 'text/html');
+    const summary = doc.body.textContent || component.id;
+    if (summary.length <= SUMMARY_TRUNCATE_SIZE) return summary;
+    return `${summary.substring(0, SUMMARY_TRUNCATE_SIZE - 1)}…`;
+  },
+  preview: {
+    panel: null,
+    webform: WebformPreview,
+  },
   defaultValue: undefined, // a content component does not hold a value itself
 } satisfies RegistryEntry<ContentComponentSchema>;
diff --git a/src/registry/content/webform-preview.tsx b/src/registry/content/webform-preview.tsx
new file mode 100644
index 00000000..ed3936de
--- /dev/null
+++ b/src/registry/content/webform-preview.tsx
@@ -0,0 +1,9 @@
+import type {ContentComponentSchema} from '@open-formulieren/types';
+
+import type {FormPreviewProps} from '@/registry/types';
+
+const WebformPreview: React.FC<FormPreviewProps<ContentComponentSchema>> = ({
+  component: {html},
+}) => <div dangerouslySetInnerHTML={{__html: html}} />;
+
+export default WebformPreview;
diff --git a/src/registry/cosignV1/index.ts b/src/registry/cosignV1/index.ts
index 198a02d1..9104f50d 100644
--- a/src/registry/cosignV1/index.ts
+++ b/src/registry/cosignV1/index.ts
@@ -9,7 +9,7 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   // component does not have a submission value but acts as a marker
   defaultValue: undefined,
 } satisfies RegistryEntry<CosignV1ComponentSchema>;
diff --git a/src/registry/cosignV2/index.ts b/src/registry/cosignV2/index.ts
index 6452fe84..8046e136 100644
--- a/src/registry/cosignV2/index.ts
+++ b/src/registry/cosignV2/index.ts
@@ -9,6 +9,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: '',
 } satisfies RegistryEntry<CosignV2ComponentSchema>;
diff --git a/src/registry/currency/index.ts b/src/registry/currency/index.ts
index 87180ccc..77578d6a 100644
--- a/src/registry/currency/index.ts
+++ b/src/registry/currency/index.ts
@@ -9,7 +9,7 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: undefined, // formik field value
   comparisonValue: ComparisonValueInput,
 } satisfies RegistryEntry<CurrencyComponentSchema>;
diff --git a/src/registry/date/index.ts b/src/registry/date/index.ts
index 61506034..9232959a 100644
--- a/src/registry/date/index.ts
+++ b/src/registry/date/index.ts
@@ -9,6 +9,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: '',
 } satisfies RegistryEntry<DateComponentSchema>;
diff --git a/src/registry/datetime/index.ts b/src/registry/datetime/index.ts
index 573b760c..e3a32b09 100644
--- a/src/registry/datetime/index.ts
+++ b/src/registry/datetime/index.ts
@@ -9,6 +9,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: '',
 } satisfies RegistryEntry<DateTimeComponentSchema>;
diff --git a/src/registry/editgrid/index.ts b/src/registry/editgrid/index.ts
index 3b718ff7..e6c74fbc 100644
--- a/src/registry/editgrid/index.ts
+++ b/src/registry/editgrid/index.ts
@@ -4,11 +4,18 @@ import {RegistryEntry} from '@/registry/types';
 
 import EditForm from './edit';
 import validationSchema from './edit-validation';
-import Preview from './preview';
+import PanelPreview from './panel-preview';
+import './previews.scss';
+import StructureSubtreePreview from './structure-preview';
+import WebformPreview from './webform-preview';
 
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {
+    panel: PanelPreview,
+    structureSubtree: StructureSubtreePreview,
+    webform: WebformPreview,
+  },
   defaultValue: [],
 } satisfies RegistryEntry<EditGridComponentSchema>;
diff --git a/src/registry/editgrid/preview.tsx b/src/registry/editgrid/panel-preview.tsx
similarity index 100%
rename from src/registry/editgrid/preview.tsx
rename to src/registry/editgrid/panel-preview.tsx
diff --git a/src/registry/editgrid/previews.scss b/src/registry/editgrid/previews.scss
new file mode 100644
index 00000000..3d3aafb2
--- /dev/null
+++ b/src/registry/editgrid/previews.scss
@@ -0,0 +1,3 @@
+.offb-form-preview-editgrid-description {
+  font-size: 0.8em;
+}
diff --git a/src/registry/editgrid/structure-preview.tsx b/src/registry/editgrid/structure-preview.tsx
new file mode 100644
index 00000000..a5c1d9e9
--- /dev/null
+++ b/src/registry/editgrid/structure-preview.tsx
@@ -0,0 +1,21 @@
+import type {EditGridComponentSchema} from '@open-formulieren/types';
+import {FormattedMessage} from 'react-intl';
+
+import type {StructureSubtreeProps} from '@/registry/types';
+
+const StructureSubtreePreview: React.FC<StructureSubtreeProps<EditGridComponentSchema>> = ({
+  component: {components},
+  renderSubtree,
+}) => (
+  <>
+    <span className="offb-form-preview-editgrid-description">
+      <FormattedMessage
+        description="Edit grid structure preview description"
+        defaultMessage="Every item has:"
+      />
+    </span>
+    {renderSubtree(components)}
+  </>
+);
+
+export default StructureSubtreePreview;
diff --git a/src/registry/editgrid/webform-preview.tsx b/src/registry/editgrid/webform-preview.tsx
new file mode 100644
index 00000000..84bdc7c5
--- /dev/null
+++ b/src/registry/editgrid/webform-preview.tsx
@@ -0,0 +1,48 @@
+import type {EditGridComponentSchema} from '@open-formulieren/types';
+import {FormattedMessage} from 'react-intl';
+
+import {Component, Description} from '@/components/formio';
+import type {FormPreviewProps} from '@/registry/types';
+
+/**
+ * Show a formio fieldset component preview.
+ */
+const WebformPreview: React.FC<FormPreviewProps<EditGridComponentSchema>> = ({
+  component,
+  renderSubtree,
+}) => {
+  const {
+    label,
+    key,
+    description,
+    validate = {},
+    tooltip,
+    groupLabel,
+    hideLabel,
+    components,
+  } = component;
+  const {required = false} = validate;
+  return (
+    <Component
+      type="editgrid"
+      field={key}
+      required={required}
+      htmlId={`editform-${key}`}
+      label={hideLabel ? undefined : label}
+      tooltip={tooltip}
+    >
+      {/* TODO: properly use formik arrayhelper here */}
+      <div>
+        <FormattedMessage
+          description="Edit grid preview content description"
+          defaultMessage="{groupLabel} 1"
+          values={{groupLabel}}
+        />
+      </div>
+      {renderSubtree(components)}
+      {description && <Description text={description} />}
+    </Component>
+  );
+};
+
+export default WebformPreview;
diff --git a/src/registry/email/index.ts b/src/registry/email/index.ts
index 334cf48e..f12256d6 100644
--- a/src/registry/email/index.ts
+++ b/src/registry/email/index.ts
@@ -9,6 +9,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: '',
 } satisfies RegistryEntry<EmailComponentSchema>;
diff --git a/src/registry/fieldset/index.ts b/src/registry/fieldset/index.ts
index 0c318d1a..2f4f7975 100644
--- a/src/registry/fieldset/index.ts
+++ b/src/registry/fieldset/index.ts
@@ -4,11 +4,17 @@ import {RegistryEntry} from '@/registry/types';
 
 import EditForm from './edit';
 import validationSchema from './edit-validation';
-import Preview from './preview';
+import PanelPreview from './panel-preview';
+import StructureSubtreePreview from './structure-preview';
+import WebformPreview from './webform-preview';
 
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {
+    panel: PanelPreview,
+    structureSubtree: StructureSubtreePreview,
+    webform: WebformPreview,
+  },
   defaultValue: undefined, // a fieldset component does not hold a value itself
 } satisfies RegistryEntry<FieldsetComponentSchema>;
diff --git a/src/registry/fieldset/preview.tsx b/src/registry/fieldset/panel-preview.tsx
similarity index 100%
rename from src/registry/fieldset/preview.tsx
rename to src/registry/fieldset/panel-preview.tsx
diff --git a/src/registry/fieldset/structure-preview.tsx b/src/registry/fieldset/structure-preview.tsx
new file mode 100644
index 00000000..8b18cebd
--- /dev/null
+++ b/src/registry/fieldset/structure-preview.tsx
@@ -0,0 +1,10 @@
+import type {FieldsetComponentSchema} from '@open-formulieren/types';
+
+import type {StructureSubtreeProps} from '@/registry/types';
+
+const StructureSubtreePreview: React.FC<StructureSubtreeProps<FieldsetComponentSchema>> = ({
+  component: {components},
+  renderSubtree,
+}) => <>{renderSubtree(components)}</>;
+
+export default StructureSubtreePreview;
diff --git a/src/registry/fieldset/webform-preview.tsx b/src/registry/fieldset/webform-preview.tsx
new file mode 100644
index 00000000..3e2725d8
--- /dev/null
+++ b/src/registry/fieldset/webform-preview.tsx
@@ -0,0 +1,18 @@
+import type {FieldsetComponentSchema} from '@open-formulieren/types';
+
+import {FieldSet} from '@/components/formio';
+import type {FormPreviewProps} from '@/registry/types';
+
+const WebformPreview: React.FC<FormPreviewProps<FieldsetComponentSchema>> = ({
+  component,
+  renderSubtree,
+}) => {
+  const {label, hideHeader, tooltip, components} = component;
+  return (
+    <FieldSet label={hideHeader ? undefined : label} tooltip={tooltip}>
+      {renderSubtree(components)}
+    </FieldSet>
+  );
+};
+
+export default WebformPreview;
diff --git a/src/registry/file/index.ts b/src/registry/file/index.ts
index 6329296e..4bf3b014 100644
--- a/src/registry/file/index.ts
+++ b/src/registry/file/index.ts
@@ -9,6 +9,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: [],
 } satisfies RegistryEntry<FileComponentSchema>;
diff --git a/src/registry/iban/index.ts b/src/registry/iban/index.ts
index e78c55a8..1c62bdd2 100644
--- a/src/registry/iban/index.ts
+++ b/src/registry/iban/index.ts
@@ -9,6 +9,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: '',
 } satisfies RegistryEntry<IbanComponentSchema>;
diff --git a/src/registry/index.tsx b/src/registry/index.ts
similarity index 100%
rename from src/registry/index.tsx
rename to src/registry/index.ts
diff --git a/src/registry/licenseplate/index.ts b/src/registry/licenseplate/index.ts
index 951326c4..99197737 100644
--- a/src/registry/licenseplate/index.ts
+++ b/src/registry/licenseplate/index.ts
@@ -9,6 +9,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: '',
 } satisfies RegistryEntry<LicensePlateComponentSchema>;
diff --git a/src/registry/map/index.ts b/src/registry/map/index.ts
index 3986efd1..27f07328 100644
--- a/src/registry/map/index.ts
+++ b/src/registry/map/index.ts
@@ -11,6 +11,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: undefined,
 } satisfies RegistryEntry<MapComponentSchema>;
diff --git a/src/registry/npFamilyMembers/index.ts b/src/registry/npFamilyMembers/index.ts
index bd5cdbbb..3b51e3a2 100644
--- a/src/registry/npFamilyMembers/index.ts
+++ b/src/registry/npFamilyMembers/index.ts
@@ -9,6 +9,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: {},
 } satisfies RegistryEntry<NpFamilyMembersComponentSchema>;
diff --git a/src/registry/number/index.ts b/src/registry/number/index.ts
index 34ba2664..23c13758 100644
--- a/src/registry/number/index.ts
+++ b/src/registry/number/index.ts
@@ -9,7 +9,7 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: undefined, // formik field value
   comparisonValue: ComparisonValueInput,
 } satisfies RegistryEntry<NumberComponentSchema>;
diff --git a/src/registry/password/index.ts b/src/registry/password/index.ts
index 1cc7f42a..c3bb7905 100644
--- a/src/registry/password/index.ts
+++ b/src/registry/password/index.ts
@@ -9,6 +9,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: '',
 } satisfies RegistryEntry<PasswordComponentSchema>;
diff --git a/src/registry/phonenumber/index.ts b/src/registry/phonenumber/index.ts
index 05dad2d7..4c5128f9 100644
--- a/src/registry/phonenumber/index.ts
+++ b/src/registry/phonenumber/index.ts
@@ -9,6 +9,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: '',
 } satisfies RegistryEntry<PhoneNumberComponentSchema>;
diff --git a/src/registry/postcode/index.ts b/src/registry/postcode/index.ts
index e0cd1b0c..28ef4f4f 100644
--- a/src/registry/postcode/index.ts
+++ b/src/registry/postcode/index.ts
@@ -9,6 +9,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: '',
 } satisfies RegistryEntry<PostcodeComponentSchema>;
diff --git a/src/registry/radio/index.ts b/src/registry/radio/index.ts
index 4323ba7d..cbb1a2ac 100644
--- a/src/registry/radio/index.ts
+++ b/src/registry/radio/index.ts
@@ -9,7 +9,7 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   // default empty value for Formik - this ignores any manually configured options!
   defaultValue: '',
 } satisfies RegistryEntry<RadioComponentSchema>;
diff --git a/src/registry/select/index.ts b/src/registry/select/index.ts
index d16b9d40..92643ea1 100644
--- a/src/registry/select/index.ts
+++ b/src/registry/select/index.ts
@@ -9,7 +9,7 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   // default empty value for Formik - this ignores any manually configured options!
   defaultValue: '',
 } satisfies RegistryEntry<SelectComponentSchema>;
diff --git a/src/registry/selectboxes/index.ts b/src/registry/selectboxes/index.ts
index 1d3e1dd7..b3dc46d1 100644
--- a/src/registry/selectboxes/index.ts
+++ b/src/registry/selectboxes/index.ts
@@ -9,7 +9,7 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   // default empty value for Formik - this ignores any manually configured options!
   defaultValue: {},
 } satisfies RegistryEntry<SelectboxesComponentSchema>;
diff --git a/src/registry/signature/index.ts b/src/registry/signature/index.ts
index 311132ac..64b12dae 100644
--- a/src/registry/signature/index.ts
+++ b/src/registry/signature/index.ts
@@ -9,6 +9,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: '',
 } satisfies RegistryEntry<SignatureComponentSchema>;
diff --git a/src/registry/textarea/index.ts b/src/registry/textarea/index.ts
index c57686ae..e9d33d47 100644
--- a/src/registry/textarea/index.ts
+++ b/src/registry/textarea/index.ts
@@ -9,6 +9,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: '',
 } satisfies RegistryEntry<TextareaComponentSchema>;
diff --git a/src/registry/textfield/index.ts b/src/registry/textfield/index.ts
index d932be08..6f8c5f08 100644
--- a/src/registry/textfield/index.ts
+++ b/src/registry/textfield/index.ts
@@ -9,6 +9,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: '',
 } satisfies RegistryEntry<TextFieldComponentSchema>;
diff --git a/src/registry/time/index.ts b/src/registry/time/index.ts
index a358cddd..c70f4434 100644
--- a/src/registry/time/index.ts
+++ b/src/registry/time/index.ts
@@ -9,6 +9,6 @@ import Preview from './preview';
 export default {
   edit: EditForm,
   editSchema: validationSchema,
-  preview: Preview,
+  preview: {panel: Preview},
   defaultValue: '',
 } satisfies RegistryEntry<TimeComponentSchema>;
diff --git a/src/registry/types.ts b/src/registry/types.ts
index 36caf657..a04f2555 100644
--- a/src/registry/types.ts
+++ b/src/registry/types.ts
@@ -10,6 +10,15 @@ export interface EditFormProps<S> {
   component: S;
 }
 
+// Component schema-specific input validation for the edit form
+
+export interface EditSchemaArgs {
+  intl: IntlShape;
+  builderContext: BuilderContextType;
+}
+
+export type EditSchema = (args: EditSchemaArgs) => z.ZodFirstPartySchemaTypes;
+
 export interface EditFormDefinition<S> extends React.FC<EditFormProps<S>> {
   // the ternary is a trick to force typescript to distribute unions inside S - otherwise
   // it will operate on the intersection of the union and it loses type information
@@ -18,18 +27,19 @@ export interface EditFormDefinition<S> extends React.FC<EditFormProps<S>> {
 }
 
 // Component preview
-export interface ComponentPreviewProps<S extends AnyComponentSchema> {
+export interface ComponentPreviewProps<S extends AnyComponentSchema = AnyComponentSchema> {
   component: S;
 }
 
-export type Preview<S extends AnyComponentSchema> = React.FC<ComponentPreviewProps<S>>;
-
-export interface EditSchemaArgs {
-  intl: IntlShape;
-  builderContext: BuilderContextType;
+export interface StructureSubtreeProps<S extends AnyComponentSchema = AnyComponentSchema> {
+  component: S;
+  renderSubtree: (components: AnyComponentSchema[]) => React.ReactNode;
 }
 
-export type EditSchema = (args: EditSchemaArgs) => z.ZodFirstPartySchemaTypes;
+export interface FormPreviewProps<S extends AnyComponentSchema = AnyComponentSchema> {
+  component: S;
+  renderSubtree: (components: AnyComponentSchema[]) => React.ReactNode;
+}
 
 export interface ComparisonValueProps {
   name: string;
@@ -39,10 +49,44 @@ export interface ComparisonValueProps {
 
 // Registry entry
 
+export interface Previews {
+  /**
+   * The component preview rendered next to the component configuration form.
+   *
+   * The preview updates live as the component configuration itself is modified through
+   * form field interaction.
+   */
+  panel: React.FC<ComponentPreviewProps> | null;
+  /**
+   * The rendered structure of the children of a component.
+   *
+   * Component types that act as containers can render their structural preview with
+   * this component.
+   *
+   * The prop `renderSubtree` prop is a callback function taking a list of nested
+   * components and will render their structure preview.
+   */
+  structureSubtree?: React.FC<StructureSubtreeProps>;
+
+  /**
+   * The component preview rendered as part of the whole form definition.
+   *
+   * The form can be interacted with to give an impression of the published form in the
+   * SDK, but the goal is NOT to implement the SDK here too. If not specified, then
+   * the `panel`` preview will be rendered.
+   */
+  webform?: React.FC<FormPreviewProps>;
+}
+
 export interface RegistryEntry<S extends AnyComponentSchema> {
   edit: EditFormDefinition<S>;
   editSchema: EditSchema;
-  preview: Preview<S> | null;
+  preview: Previews;
+  /**
+   * Return a summary to act as (string) representation of the component.
+   */
+  getSummary?: (component: S) => React.ReactNode;
+
   // textfield -> string, numberfield -> number etc. This is used for the formik
   // initial data
   defaultValue: unknown; // TODO: there must be a way to grab S['defaultValue'] if it's set...