diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index 4b2fd78a7cb..095606a15dc 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
@@ -1,5 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
+import { graphql } from '@keystone-6/core';
 import { jsx } from '@keystone-ui/core';
 import {
   FieldContainer,
@@ -50,6 +51,22 @@ export type FormField<Value extends FormFieldValue, Options> = {
    * a potentially malicious client
    */
   validate(value: unknown): boolean;
+  preview?: PreviewComponent;
+};
+
+export type FormFieldWithGraphQLField<Value extends FormFieldValue, Options> = FormField<
+  Value,
+  Options
+> & {
+  graphql: {
+    output: graphql.Field<
+      { value: Value },
+      Record<string, graphql.Arg<graphql.InputType, boolean>>,
+      graphql.OutputType,
+      'value'
+    >;
+    input: graphql.NullableInputType;
+  };
 };
 
 type InlineMarksConfig =
@@ -100,6 +117,7 @@ export type ChildField = {
 export type ArrayField<ElementField extends ComponentSchema> = {
   kind: 'array';
   element: ElementField;
+  preview?: PreviewComponent;
 };
 
 export type RelationshipField<Many extends boolean> = {
@@ -108,6 +126,7 @@ export type RelationshipField<Many extends boolean> = {
   selection: string | undefined;
   label: string;
   many: Many;
+  preview?: PreviewComponent;
 };
 
 export interface ObjectField<
@@ -115,6 +134,7 @@ export interface ObjectField<
 > {
   kind: 'object';
   fields: Fields;
+  preview?: PreviewComponent;
 }
 
 export type ConditionalField<
@@ -126,8 +146,14 @@ export type ConditionalField<
   kind: 'conditional';
   discriminant: DiscriminantField;
   values: ConditionalValues;
+  preview?: PreviewComponent;
 };
 
+type PreviewComponent = (props: unknown) => ReactElement | null;
+type TypedPreviewComponent<Field extends ComponentSchema> = (
+  props: PreviewProps<Field> & { autoFocus?: boolean }
+) => ReactElement | null;
+
 export type ComponentSchema =
   | ChildField
   | FormField<any, any>
@@ -135,16 +161,29 @@ export type ComponentSchema =
   | ConditionalField<FormField<any, any>, { [key: string]: ComponentSchema }>
   | RelationshipField<boolean>
   // this is written like this rather than ArrayField<ComponentSchema> to avoid TypeScript erroring about circularity
-  | { kind: 'array'; element: ComponentSchema };
+  | { kind: 'array'; element: ComponentSchema; preview?: PreviewComponent };
+
+export type ComponentSchemaForGraphQL =
+  | FormFieldWithGraphQLField<any, any>
+  | ObjectField<Record<string, ComponentSchemaForGraphQL>>
+  | ConditionalField<
+      FormFieldWithGraphQLField<any, any>,
+      { [key: string]: ComponentSchemaForGraphQL }
+    >
+  | RelationshipField<boolean>
+  // this is written like this rather than ArrayField<ComponentSchemaForGraphQL> to avoid TypeScript erroring about circularity
+  | { kind: 'array'; element: ComponentSchemaForGraphQL; preview?: PreviewComponent };
 
 export const fields = {
   text({
     label,
     defaultValue = '',
+    preview,
   }: {
     label: string;
     defaultValue?: string;
-  }): FormField<string, undefined> {
+    preview?: TypedPreviewComponent<FormFieldWithGraphQLField<string, undefined>>;
+  }): FormFieldWithGraphQLField<string, undefined> {
     return {
       kind: 'form',
       Input({ value, onChange, autoFocus }) {
@@ -166,15 +205,22 @@ export const fields = {
       validate(value) {
         return typeof value === 'string';
       },
+      graphql: {
+        input: graphql.String,
+        output: graphql.field({ type: graphql.String }),
+      },
+      preview: preview as PreviewComponent,
     };
   },
   url({
     label,
     defaultValue = '',
+    preview,
   }: {
     label: string;
     defaultValue?: string;
-  }): FormField<string, undefined> {
+    preview?: TypedPreviewComponent<FormFieldWithGraphQLField<string, undefined>>;
+  }): FormFieldWithGraphQLField<string, undefined> {
     const validate = (value: unknown) => {
       return typeof value === 'string' && (value === '' || isValidURL(value));
     };
@@ -203,17 +249,24 @@ export const fields = {
       options: undefined,
       defaultValue,
       validate,
+      graphql: {
+        input: graphql.String,
+        output: graphql.field({ type: graphql.String }),
+      },
+      preview: preview as PreviewComponent,
     };
   },
   select<Option extends { label: string; value: string }>({
     label,
     options,
     defaultValue,
+    preview,
   }: {
     label: string;
     options: readonly Option[];
     defaultValue: Option['value'];
-  }): FormField<Option['value'], readonly Option[]> {
+    preview?: TypedPreviewComponent<FormFieldWithGraphQLField<Option['value'], readonly Option[]>>;
+  }): FormFieldWithGraphQLField<Option['value'], readonly Option[]> {
     const optionValuesSet = new Set(options.map(x => x.value));
     if (!optionValuesSet.has(defaultValue)) {
       throw new Error(
@@ -244,17 +297,32 @@ export const fields = {
       validate(value) {
         return typeof value === 'string' && optionValuesSet.has(value);
       },
+      graphql: {
+        input: graphql.String,
+        output: graphql.field({
+          type: graphql.String,
+          // TODO: investigate why this resolve is required here
+          resolve({ value }) {
+            return value;
+          },
+        }),
+      },
+      preview: preview as PreviewComponent,
     };
   },
   multiselect<Option extends { label: string; value: string }>({
     label,
     options,
     defaultValue,
+    preview,
   }: {
     label: string;
     options: readonly Option[];
     defaultValue: readonly Option['value'][];
-  }): FormField<readonly Option['value'][], readonly Option[]> {
+    preview?: TypedPreviewComponent<
+      FormFieldWithGraphQLField<readonly Option['value'][], readonly Option[]>
+    >;
+  }): FormFieldWithGraphQLField<readonly Option['value'][], readonly Option[]> {
     const valuesToOption = new Map(options.map(x => [x.value, x]));
     return {
       kind: 'form',
@@ -281,15 +349,28 @@ export const fields = {
           value.every(value => typeof value === 'string' && valuesToOption.has(value))
         );
       },
+      graphql: {
+        input: graphql.list(graphql.nonNull(graphql.String)),
+        output: graphql.field({
+          type: graphql.list(graphql.nonNull(graphql.String)),
+          // TODO: investigate why this resolve is required here
+          resolve({ value }) {
+            return value;
+          },
+        }),
+      },
+      preview: preview as PreviewComponent,
     };
   },
   checkbox({
     label,
     defaultValue = false,
+    preview,
   }: {
     label: string;
     defaultValue?: boolean;
-  }): FormField<boolean, undefined> {
+    preview?: TypedPreviewComponent<FormFieldWithGraphQLField<boolean, undefined>>;
+  }): FormFieldWithGraphQLField<boolean, undefined> {
     return {
       kind: 'form',
       Input({ value, onChange, autoFocus }) {
@@ -312,6 +393,11 @@ export const fields = {
       validate(value) {
         return typeof value === 'boolean';
       },
+      graphql: {
+        input: graphql.Boolean,
+        output: graphql.field({ type: graphql.Boolean }),
+      },
+      preview: preview as PreviewComponent,
     };
   },
   empty(): FormField<null, undefined> {
@@ -384,8 +470,13 @@ export const fields = {
             },
     };
   },
-  object<Fields extends Record<string, ComponentSchema>>(fields: Fields): ObjectField<Fields> {
-    return { kind: 'object', fields };
+  object<Value extends Record<string, ComponentSchema>>(
+    value: Value,
+    opts?: {
+      preview?: TypedPreviewComponent<ObjectField<Value>>;
+    }
+  ): ObjectField<Value> {
+    return { kind: 'object', fields: value, preview: opts?.preview as PreviewComponent };
   },
   conditional<
     DiscriminantField extends FormField<string | boolean, any>,
@@ -394,7 +485,10 @@ export const fields = {
     }
   >(
     discriminant: DiscriminantField,
-    values: ConditionalValues
+    values: ConditionalValues,
+    opts?: {
+      preview?: TypedPreviewComponent<ConditionalField<DiscriminantField, ConditionalValues>>;
+    }
   ): ConditionalField<DiscriminantField, ConditionalValues> {
     if (
       (discriminant.validate('true') || discriminant.validate('false')) &&
@@ -408,16 +502,19 @@ export const fields = {
       kind: 'conditional',
       discriminant,
       values: values,
+      preview: opts?.preview as PreviewComponent,
     };
   },
   relationship<Many extends boolean | undefined = false>({
     listKey,
     selection,
     label,
+    preview,
     many,
   }: {
     listKey: string;
     label: string;
+    preview?: TypedPreviewComponent<RelationshipField<Many extends true ? true : false>>;
     selection?: string;
   } & (Many extends undefined | false ? { many?: Many } : { many: Many })): RelationshipField<
     Many extends true ? true : false
@@ -428,10 +525,14 @@ export const fields = {
       selection,
       label,
       many: (many ? true : false) as any,
+      preview: preview as PreviewComponent,
     };
   },
-  array<ElementField extends ComponentSchema>(element: ElementField): ArrayField<ElementField> {
-    return { kind: 'array', element };
+  array<ElementField extends ComponentSchema>(
+    element: ElementField,
+    opts?: { preview?: TypedPreviewComponent<ArrayField<ElementField>> }
+  ): ArrayField<ElementField> {
+    return { kind: 'array', element, preview: opts?.preview as PreviewComponent };
   },
 };
 
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/form-from-preview.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/form-from-preview.tsx
index 10d8355d407..1cb95465afb 100644
--- a/packages/fields-document/src/DocumentEditor/component-blocks/form-from-preview.tsx
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/form-from-preview.tsx
@@ -159,7 +159,7 @@ export type NonChildFieldComponentSchema =
   | RelationshipField<boolean>
   | ArrayField<ComponentSchema>;
 
-function isNonChildFieldPreviewProps(
+export function isNonChildFieldPreviewProps(
   props: GenericPreviewProps<ComponentSchema, unknown>
 ): props is GenericPreviewProps<NonChildFieldComponentSchema, unknown> {
   return props.schema.kind !== 'child';
diff --git a/packages/fields-document/src/component-views/index.tsx b/packages/fields-document/src/component-views/index.tsx
new file mode 100644
index 00000000000..7d360a6c32b
--- /dev/null
+++ b/packages/fields-document/src/component-views/index.tsx
@@ -0,0 +1,134 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+
+import { jsx } from '@keystone-ui/core';
+import { FieldContainer, FieldLabel } from '@keystone-ui/fields';
+
+import {
+  CardValueComponent,
+  CellComponent,
+  FieldController,
+  FieldControllerConfig,
+  FieldProps,
+} from '@keystone-6/core/types';
+import { useEffect, useMemo, useRef } from 'react';
+import { getInitialPropsValue } from '../DocumentEditor/component-blocks/initial-values';
+import { ComponentSchemaForGraphQL } from '../DocumentEditor/component-blocks/api';
+import { assertNever } from '../DocumentEditor/component-blocks/utils';
+import { FormValueContentFromPreviewProps } from '../DocumentEditor/component-blocks/form-from-preview';
+import { createGetPreviewProps } from '../DocumentEditor/component-blocks/preview-props';
+
+export const Field = ({
+  field,
+  value,
+  onChange,
+  autoFocus,
+  forceValidation,
+}: FieldProps<typeof controller>) => {
+  const valueRef = useRef(value);
+  useEffect(() => {
+    valueRef.current = value;
+  });
+  const createPreviewProps = useMemo(() => {
+    return createGetPreviewProps(
+      field.schema,
+      getNewVal => {
+        onChange?.({ kind: valueRef.current.kind, value: getNewVal(valueRef.current.value) });
+      },
+      () => undefined
+    );
+  }, [field.schema, onChange]);
+  return (
+    <FieldContainer>
+      <FieldLabel>{field.label}</FieldLabel>
+      <FormValueContentFromPreviewProps
+        forceValidation={forceValidation}
+        autoFocus={autoFocus}
+        {...createPreviewProps(value.value)}
+      />
+    </FieldContainer>
+  );
+};
+
+export const Cell: CellComponent = ({}) => {
+  return null;
+};
+
+export const CardValue: CardValueComponent = ({}) => {
+  return null as any;
+};
+
+export const allowedExportsOnCustomViews = ['schema'];
+
+export const controller = (
+  config: FieldControllerConfig
+): FieldController<{ kind: 'create' | 'update'; value: unknown }> & {
+  schema: ComponentSchemaForGraphQL;
+} => {
+  if (!config.customViews.schema) {
+    throw new Error(
+      `No schema in custom view. Did you forgot to set \`views\` to a file that exports a \`schema\` on ${config.listKey}.${config.path}`
+    );
+  }
+  return {
+    path: config.path,
+    label: config.label,
+    description: config.description,
+    graphqlSelection: `${config.path}Raw(hydrateRelationships: true)`,
+    schema: config.customViews.schema,
+    defaultValue: { kind: 'create', value: getInitialPropsValue(config.customViews.schema) },
+    deserialize: data => {
+      return {
+        kind: 'update',
+        value: data[`${config.path}Raw`],
+      };
+    },
+    serialize: value => {
+      return {
+        [config.path]: serializeValue(config.customViews.schema, value.value, value.kind),
+      };
+    },
+  };
+};
+
+function serializeValue(
+  schema: ComponentSchemaForGraphQL,
+  value: any,
+  kind: 'update' | 'create'
+): any {
+  if (schema.kind === 'conditional') {
+    return {
+      [value.discriminant]: serializeValue(schema.values[value.discriminant], value.value, kind),
+    };
+  }
+  if (schema.kind === 'array') {
+    return (value as any[]).map(a => serializeValue(schema.element, a, kind));
+  }
+  if (schema.kind === 'form') {
+    return value;
+  }
+  if (schema.kind === 'object') {
+    return Object.fromEntries(
+      Object.entries(schema.fields).map(([key, val]) => {
+        return [key, serializeValue(val, value[key], kind)];
+      })
+    );
+  }
+  if (schema.kind === 'relationship') {
+    if (Array.isArray(value)) {
+      return {
+        [kind === 'create' ? 'connect' : 'set']: value.map(x => ({ id: x.id })),
+      };
+    }
+    if (value === null) {
+      if (kind === 'create') {
+        return undefined;
+      }
+      return { disconnect: true };
+    }
+    return {
+      connect: { id: value.id },
+    };
+  }
+  assertNever(schema);
+}
diff --git a/packages/fields-document/src/index.ts b/packages/fields-document/src/index.ts
index dae0e709b4b..ca54b7d2c11 100644
--- a/packages/fields-document/src/index.ts
+++ b/packages/fields-document/src/index.ts
@@ -275,3 +275,5 @@ function normaliseDocumentFeatures(
   };
   return documentFeatures;
 }
+
+export { structure } from './structure';
diff --git a/packages/fields-document/src/structure-graphql-input.tsx b/packages/fields-document/src/structure-graphql-input.tsx
new file mode 100644
index 00000000000..4864da3427e
--- /dev/null
+++ b/packages/fields-document/src/structure-graphql-input.tsx
@@ -0,0 +1,506 @@
+import { graphql } from '@keystone-6/core';
+import { BaseItem, FieldData, GraphQLTypesForList, KeystoneContext } from '@keystone-6/core/types';
+import { GraphQLResolveInfo } from 'graphql';
+
+import { ComponentSchemaForGraphQL } from './DocumentEditor/component-blocks/api';
+import { getInitialPropsValue } from './DocumentEditor/component-blocks/initial-values';
+import { assertNever, ReadonlyPropPath } from './DocumentEditor/component-blocks/utils';
+
+export function getGraphQLInputType(
+  name: string,
+  schema: ComponentSchemaForGraphQL,
+  operation: 'create' | 'update',
+  cache: Map<ComponentSchemaForGraphQL, graphql.InputType>,
+  meta: FieldData
+) {
+  if (!cache.has(schema)) {
+    const res = getGraphQLInputTypeInner(name, schema, operation, cache, meta);
+    cache.set(schema, res);
+  }
+  return cache.get(schema)!;
+}
+
+function getGraphQLInputTypeInner(
+  name: string,
+  schema: ComponentSchemaForGraphQL,
+  operation: 'create' | 'update',
+  cache: Map<ComponentSchemaForGraphQL, graphql.InputType>,
+  meta: FieldData
+): graphql.InputType {
+  if (schema.kind === 'form') {
+    return schema.graphql.input;
+  }
+  if (schema.kind === 'object') {
+    return graphql.inputObject({
+      name: `${name}${operation[0].toUpperCase()}${operation.slice(1)}Input`,
+      fields: () =>
+        Object.fromEntries(
+          Object.entries(schema.fields).map(
+            ([key, val]): [string, graphql.Arg<graphql.InputType>] => {
+              const type = getGraphQLInputType(
+                `${name}${key[0].toUpperCase()}${key.slice(1)}`,
+                val,
+                operation,
+                cache,
+                meta
+              );
+              return [key, graphql.arg({ type })];
+            }
+          )
+        ),
+    });
+  }
+  if (schema.kind === 'array') {
+    const innerType = getGraphQLInputType(name, schema.element, operation, cache, meta);
+    return graphql.list(innerType);
+  }
+  if (schema.kind === 'conditional') {
+    return graphql.inputObject({
+      name: `${name}${operation[0].toUpperCase()}${operation.slice(1)}Input`,
+      fields: () =>
+        Object.fromEntries(
+          Object.entries(schema.values).map(
+            ([key, val]): [string, graphql.Arg<graphql.InputType>] => {
+              const type = getGraphQLInputType(
+                `${name}${key[0].toUpperCase()}${key.slice(1)}`,
+                val,
+                operation,
+                cache,
+                meta
+              );
+              return [key, graphql.arg({ type })];
+            }
+          )
+        ),
+    });
+  }
+
+  if (schema.kind === 'relationship') {
+    const inputType =
+      meta.lists[schema.listKey].types.relateTo[schema.many ? 'many' : 'one'][operation];
+    // there are cases where this won't exist
+    // for example if gql omit is enabled on the related field
+    if (inputType === undefined) {
+      throw new Error('');
+    }
+    return inputType;
+  }
+
+  assertNever(schema);
+}
+
+export async function getValueForUpdate(
+  schema: ComponentSchemaForGraphQL,
+  value: any,
+  prevValue: any,
+  context: KeystoneContext,
+  path: ReadonlyPropPath
+): Promise<any> {
+  if (value === undefined) {
+    return prevValue;
+  }
+  if (prevValue === undefined) {
+    prevValue = getInitialPropsValue(schema);
+  }
+
+  if (schema.kind === 'form') {
+    if (schema.validate(value)) {
+      return value;
+    }
+    throw new Error(`The value of the form field at '${path.join('.')}' is invalid`);
+  }
+  if (value === null) {
+    throw new Error(
+      `${
+        schema.kind[0].toUpperCase() + schema.kind.slice(1)
+      } fields cannot be set to null but the field at '${path.join('.')}' is null`
+    );
+  }
+  if (schema.kind === 'object') {
+    return Object.fromEntries(
+      await Promise.all(
+        Object.entries(schema.fields).map(async ([key, val]) => {
+          return [
+            key,
+            await getValueForUpdate(val, value[key], prevValue[key], context, path.concat(key)),
+          ];
+        })
+      )
+    );
+  }
+  if (schema.kind === 'array') {
+    return Promise.all(
+      (value as any[]).map((val, i) =>
+        getValueForUpdate(schema.element, val, prevValue[i], context, path.concat(i))
+      )
+    );
+  }
+  if (schema.kind === 'relationship') {
+    if (schema.many) {
+      const val = (value as graphql.InferValueFromArg<
+        graphql.Arg<NonNullable<GraphQLTypesForList['relateTo']['many']['update']>>
+      >)!;
+      return resolveRelateToManyForUpdateInput(val, context, schema.listKey, prevValue);
+    } else {
+      const val = (value as graphql.InferValueFromArg<
+        graphql.Arg<NonNullable<GraphQLTypesForList['relateTo']['one']['update']>>
+      >)!;
+
+      return resolveRelateToOneForUpdateInput(val, context, schema.listKey);
+    }
+  }
+  if (schema.kind === 'conditional') {
+    const conditionalValueKeys = Object.keys(value);
+    if (conditionalValueKeys.length !== 1) {
+      throw new Error(
+        `Conditional field inputs must set exactly one of the fields but the field at ${path.join(
+          '.'
+        )} has ${conditionalValueKeys.length} fields set`
+      );
+    }
+    const key = conditionalValueKeys[0];
+    let discriminant: string | boolean = key;
+    if ((key === 'true' || key === 'false') && !schema.discriminant.validate(key)) {
+      discriminant = key === 'true';
+    }
+    return {
+      discriminant,
+      value: await getValueForUpdate(
+        (schema.values as any)[key],
+        value[key],
+        prevValue.discriminant === discriminant ? prevValue.value : getInitialPropsValue(schema),
+        context,
+        path.concat('value')
+      ),
+    };
+  }
+
+  assertNever(schema);
+}
+
+export async function getValueForCreate(
+  schema: ComponentSchemaForGraphQL,
+  value: any,
+  context: KeystoneContext,
+  path: ReadonlyPropPath
+): Promise<any> {
+  // If value is undefined, get the specified defaultValue
+  if (value === undefined) {
+    return getInitialPropsValue(schema);
+  }
+  if (schema.kind === 'form') {
+    if (schema.validate(value)) {
+      return value;
+    }
+    throw new Error(`The value of the form field at '${path.join('.')}' is invalid`);
+  }
+  if (value === null) {
+    throw new Error(
+      `${
+        schema.kind[0].toUpperCase() + schema.kind.slice(1)
+      } fields cannot be set to null but the field at '${path.join('.')}' is null`
+    );
+  }
+  if (schema.kind === 'array') {
+    return Promise.all(
+      (value as any[]).map((val, i) =>
+        getValueForCreate(schema.element, val, context, path.concat(i))
+      )
+    );
+  }
+  if (schema.kind === 'object') {
+    return Object.fromEntries(
+      await Promise.all(
+        Object.entries(schema.fields).map(async ([key, val]) => {
+          return [key, await getValueForCreate(val, value[key], context, path.concat(key))];
+        })
+      )
+    );
+  }
+  if (schema.kind === 'relationship') {
+    if (schema.many) {
+      const val = (value as graphql.InferValueFromArg<
+        graphql.Arg<NonNullable<GraphQLTypesForList['relateTo']['many']['create']>>
+      >)!;
+
+      return resolveRelateToManyForCreateInput(val, context, schema.listKey);
+    } else {
+      const val = (value as graphql.InferValueFromArg<
+        graphql.Arg<NonNullable<GraphQLTypesForList['relateTo']['one']['create']>>
+      >)!;
+
+      return resolveRelateToOneForCreateInput(val, context, schema.listKey);
+    }
+  }
+  if (schema.kind === 'conditional') {
+    if (value === null) {
+      throw new Error();
+    }
+    const conditionalValueKeys = Object.keys(value);
+    if (conditionalValueKeys.length !== 1) {
+      throw new Error();
+    }
+    const key = conditionalValueKeys[0];
+    let discriminant: string | boolean = key;
+    if ((key === 'true' || key === 'false') && !schema.discriminant.validate(key)) {
+      discriminant = key === 'true';
+    }
+
+    return {
+      discriminant,
+      value: await getValueForCreate(
+        (schema.values as any)[key],
+        value[key],
+        context,
+        path.concat('value')
+      ),
+    };
+  }
+
+  assertNever(schema);
+}
+/** MANY */
+
+type _CreateValueManyType = Exclude<
+  graphql.InferValueFromArg<
+    graphql.Arg<Exclude<GraphQLTypesForList['relateTo']['many']['create'], undefined>>
+  >,
+  null | undefined
+>;
+
+type _UpdateValueManyType = Exclude<
+  graphql.InferValueFromArg<
+    graphql.Arg<Exclude<GraphQLTypesForList['relateTo']['many']['update'], undefined>>
+  >,
+  null | undefined
+>;
+
+export class RelationshipErrors extends Error {
+  errors: { error: Error; tag: string }[];
+  constructor(errors: { error: Error; tag: string }[]) {
+    super('Multiple relationship errors');
+    this.errors = errors;
+  }
+}
+
+function getResolvedUniqueWheres(
+  uniqueInputs: Record<string, any>[],
+  context: KeystoneContext,
+  foreignListKey: string,
+  operation: string
+) {
+  return uniqueInputs.map(uniqueInput =>
+    checkUniqueItemExists(uniqueInput, foreignListKey, context, operation)
+  );
+}
+
+// these aren't here out of thinking this is better syntax(i do not think it is),
+// it's just because TS won't infer the arg is X bit
+export const isFulfilled = <T,>(arg: PromiseSettledResult<T>): arg is PromiseFulfilledResult<T> =>
+  arg.status === 'fulfilled';
+export const isRejected = (arg: PromiseSettledResult<any>): arg is PromiseRejectedResult =>
+  arg.status === 'rejected';
+
+export async function resolveRelateToManyForCreateInput(
+  value: _CreateValueManyType,
+  context: KeystoneContext,
+  foreignListKey: string,
+  tag?: string
+) {
+  if (!Array.isArray(value.connect) && !Array.isArray(value.create)) {
+    throw new Error(
+      `You must provide "connect" or "create" in to-many relationship inputs for "create" operations.`
+    );
+  }
+
+  // Perform queries for the connections
+  const connects = Promise.allSettled(
+    getResolvedUniqueWheres(value.connect || [], context, foreignListKey, 'connect')
+  );
+
+  // Perform nested mutations for the creations
+  const creates = Promise.allSettled(
+    (value.create || []).map(x => resolveCreateMutation(x, context, foreignListKey))
+  );
+
+  const [connectResult, createResult] = await Promise.all([connects, creates]);
+
+  // Collect all the errors
+  const errors = [...connectResult, ...createResult].filter(isRejected);
+  if (errors.length) {
+    // readd tag
+    throw new RelationshipErrors(errors.map(x => ({ error: x.reason, tag: tag || '' })));
+  }
+
+  // Perform queries for the connections
+  return [...connectResult, ...createResult].filter(isFulfilled).map(x => x.value);
+}
+
+export async function resolveRelateToManyForUpdateInput(
+  value: _UpdateValueManyType,
+  context: KeystoneContext,
+  foreignListKey: string,
+  prevVal: { id: string }[]
+) {
+  if (
+    !Array.isArray(value.connect) &&
+    !Array.isArray(value.create) &&
+    !Array.isArray(value.disconnect) &&
+    !Array.isArray(value.set)
+  ) {
+    throw new Error(
+      `You must provide at least one of "set", "connect", "create" or "disconnect" in to-many relationship inputs for "update" operations.`
+    );
+  }
+  if (value.set && value.disconnect) {
+    throw new Error(
+      `The "set" and "disconnect" fields cannot both be provided to to-many relationship inputs for "update" operations.`
+    );
+  }
+
+  // Perform queries for the connections
+  const connects = Promise.allSettled(
+    getResolvedUniqueWheres(value.connect || [], context, foreignListKey, 'connect')
+  );
+
+  const disconnects = Promise.allSettled(
+    getResolvedUniqueWheres(value.disconnect || [], context, foreignListKey, 'disconnect')
+  );
+
+  const sets = Promise.allSettled(
+    getResolvedUniqueWheres(value.set || [], context, foreignListKey, 'set')
+  );
+
+  // Perform nested mutations for the creations
+  const creates = Promise.allSettled(
+    (value.create || []).map(x => resolveCreateMutation(x, context, foreignListKey))
+  );
+
+  const [connectResult, createResult, disconnectResult, setResult] = await Promise.all([
+    connects,
+    creates,
+    disconnects,
+    sets,
+  ]);
+
+  // Collect all the errors
+  const errors = [...connectResult, ...createResult, ...disconnectResult, ...setResult].filter(
+    isRejected
+  );
+  if (errors.length) {
+    throw new RelationshipErrors(errors.map(x => ({ error: x.reason, tag: '' })));
+  }
+
+  let values = prevVal;
+
+  if (value.set) {
+    values = setResult.filter(isFulfilled).map(x => x.value);
+  }
+
+  const idsToDisconnect = new Set(disconnectResult.filter(isFulfilled).map(x => x.value.id));
+  values = values.filter(x => !idsToDisconnect.has(x.id));
+  values.push(...connectResult.filter(isFulfilled).map(x => x.value));
+  values.push(...createResult.filter(isFulfilled).map(x => x.value));
+
+  return values;
+}
+
+/** ONE */
+
+type _CreateValueType = Exclude<
+  graphql.InferValueFromArg<
+    graphql.Arg<Exclude<GraphQLTypesForList['relateTo']['one']['create'], undefined>>
+  >,
+  null | undefined
+>;
+type _UpdateValueType = Exclude<
+  graphql.InferValueFromArg<
+    graphql.Arg<
+      graphql.NonNullType<Exclude<GraphQLTypesForList['relateTo']['one']['update'], undefined>>
+    >
+  >,
+  null | undefined
+>;
+
+const missingItem = (operation: string, uniqueWhere: Record<string, any>) => {
+  throw new Error(
+    `You cannot perform the '${operation}' operation on the item '${JSON.stringify(
+      uniqueWhere
+    )}'. It may not exist.`
+  );
+};
+
+export async function checkUniqueItemExists(
+  uniqueInput: Record<string, unknown>,
+  listKey: string,
+  context: KeystoneContext,
+  operation: string
+) {
+  // Check whether the item exists (from this users POV).
+  const item = await context.db[listKey].findOne({ where: uniqueInput });
+  if (item === null) {
+    throw missingItem(operation, uniqueInput);
+  }
+
+  return { id: item.id.toString() };
+}
+
+async function handleCreateAndUpdate(
+  value: _CreateValueType,
+  context: KeystoneContext,
+  foreignListKey: string
+) {
+  if (value.connect) {
+    return checkUniqueItemExists(value.connect, foreignListKey, context, 'connect');
+  } else if (value.create) {
+    return resolveCreateMutation(value, context, foreignListKey);
+  }
+}
+
+async function resolveCreateMutation(value: any, context: KeystoneContext, foreignListKey: string) {
+  const mutationType = context.graphql.schema.getMutationType()!;
+  const { id } = (await mutationType.getFields()[
+    context.gqlNames(foreignListKey).createMutationName
+  ].resolve!(
+    {},
+    { data: value.create },
+    context,
+    // we happen to know this isn't used
+    // no one else should rely on that though
+    // it could change in the future
+    {} as GraphQLResolveInfo
+  )) as BaseItem;
+  return { id: id.toString() };
+}
+
+export function resolveRelateToOneForCreateInput(
+  value: _CreateValueType,
+  context: KeystoneContext,
+  foreignListKey: string
+) {
+  const numOfKeys = Object.keys(value).length;
+  if (numOfKeys !== 1) {
+    throw new Error(
+      `You must provide "connect" or "create" in to-one relationship inputs for "create" operations.`
+    );
+  }
+  return handleCreateAndUpdate(value, context, foreignListKey);
+}
+
+export function resolveRelateToOneForUpdateInput(
+  value: _UpdateValueType,
+  context: KeystoneContext,
+  foreignListKey: string
+) {
+  if (Object.keys(value).length !== 1) {
+    throw new Error(
+      `You must provide one of "connect", "create" or "disconnect" in to-one relationship inputs for "update" operations.`
+    );
+  }
+
+  if (value.connect || value.create) {
+    return handleCreateAndUpdate(value, context, foreignListKey);
+  } else if (value.disconnect) {
+    return null;
+  }
+}
diff --git a/packages/fields-document/src/structure-graphql-output.tsx b/packages/fields-document/src/structure-graphql-output.tsx
new file mode 100644
index 00000000000..13e6a6aa179
--- /dev/null
+++ b/packages/fields-document/src/structure-graphql-output.tsx
@@ -0,0 +1,194 @@
+import { graphql } from '@keystone-6/core';
+import { FieldData } from '@keystone-6/core/types';
+import { ComponentSchemaForGraphQL } from './DocumentEditor/component-blocks/api';
+import { assertNever } from './DocumentEditor/component-blocks/utils';
+
+function wrapGraphQLFieldInResolver<InputSource, OutputSource>(
+  inputField: graphql.Field<
+    { value: InputSource },
+    Record<string, graphql.Arg<graphql.InputType, boolean>>,
+    graphql.OutputType,
+    'value'
+  >,
+  getVal: (outputSource: OutputSource) => InputSource
+): graphql.Field<
+  OutputSource,
+  Record<string, graphql.Arg<graphql.InputType, boolean>>,
+  graphql.OutputType,
+  string
+> {
+  return graphql.field({
+    type: inputField.type,
+    args: inputField.args,
+    deprecationReason: inputField.deprecationReason,
+    description: inputField.description,
+    extensions: inputField.extensions as any,
+    resolve(value, args, context, info) {
+      const val = getVal(value);
+      if (!inputField.resolve) {
+        return val;
+      }
+      return inputField.resolve({ value: val }, args, context, info);
+    },
+  });
+}
+
+type OutputField = graphql.Field<
+  { value: unknown },
+  Record<string, graphql.Arg<graphql.InputType, boolean>>,
+  graphql.OutputType,
+  'value'
+>;
+
+export function getOutputGraphQLField(
+  name: string,
+  schema: ComponentSchemaForGraphQL,
+  interfaceImplementations: graphql.ObjectType<unknown>[],
+  cache: Map<ComponentSchemaForGraphQL, OutputField>,
+  meta: FieldData
+) {
+  if (!cache.has(schema)) {
+    const res = getOutputGraphQLFieldInner(name, schema, interfaceImplementations, cache, meta);
+    cache.set(schema, res);
+  }
+  return cache.get(schema)!;
+}
+
+function getOutputGraphQLFieldInner(
+  name: string,
+  schema: ComponentSchemaForGraphQL,
+  interfaceImplementations: graphql.ObjectType<unknown>[],
+  cache: Map<ComponentSchemaForGraphQL, OutputField>,
+  meta: FieldData
+): OutputField {
+  if (schema.kind === 'form') {
+    return schema.graphql.output;
+  }
+  if (schema.kind === 'object') {
+    return graphql.field({
+      type: graphql.object<unknown>()({
+        name,
+        fields: () =>
+          Object.fromEntries(
+            Object.entries(schema.fields).map(
+              ([key, val]): [string, graphql.Field<unknown, {}, graphql.OutputType, string>] => {
+                const field = getOutputGraphQLField(
+                  `${name}${key[0].toUpperCase()}${key.slice(1)}`,
+                  val,
+                  interfaceImplementations,
+                  cache,
+                  meta
+                );
+                return [key, wrapGraphQLFieldInResolver(field, source => (source as any)[key])];
+              }
+            )
+          ),
+      }),
+    });
+  }
+  if (schema.kind === 'array') {
+    const innerField = getOutputGraphQLField(
+      name,
+      schema.element,
+      interfaceImplementations,
+      cache,
+      meta
+    );
+    const resolve = innerField.resolve;
+
+    return graphql.field({
+      type: graphql.list(innerField.type),
+      args: innerField.args,
+      deprecationReason: innerField.deprecationReason,
+      description: innerField.description,
+      extensions: innerField.extensions,
+      resolve({ value }, args, context, info) {
+        if (!resolve) {
+          return value as unknown[];
+        }
+        return (value as unknown[]).map(val => resolve({ value: val }, args, context, info));
+      },
+    });
+  }
+  if (schema.kind === 'conditional') {
+    let discriminantField: OutputField;
+
+    const getDiscriminantField = () => {
+      if (!discriminantField) {
+        discriminantField = getOutputGraphQLField(
+          name + 'Discriminant',
+          schema.discriminant,
+          interfaceImplementations,
+          cache,
+          meta
+        );
+      }
+      return discriminantField;
+    };
+    type SourceType = { discriminant: string | boolean; value: unknown };
+
+    const interfaceType = graphql.interface<SourceType>()({
+      name,
+      resolveType: value => {
+        const stringifiedDiscriminant = value.discriminant.toString();
+        return name + stringifiedDiscriminant[0].toUpperCase() + stringifiedDiscriminant.slice(1);
+      },
+      fields: () => ({
+        discriminant: getDiscriminantField(),
+      }),
+    });
+
+    interfaceImplementations.push(
+      ...Object.entries(schema.values).map(([key, val]): graphql.ObjectType<SourceType> => {
+        const innerName = name + key[0].toUpperCase() + key.slice(1);
+        return graphql.object<SourceType>()({
+          name: innerName,
+          interfaces: [interfaceType],
+          fields: () => ({
+            discriminant: wrapGraphQLFieldInResolver(getDiscriminantField(), x => x.discriminant),
+            value: getOutputGraphQLField(
+              `${innerName}Value`,
+              val,
+              interfaceImplementations,
+              cache,
+              meta
+            ),
+          }),
+        });
+      })
+    );
+
+    return graphql.field({
+      type: interfaceType,
+      resolve({ value }) {
+        return value as SourceType;
+      },
+    });
+  }
+
+  if (schema.kind === 'relationship') {
+    const listOutputType = meta.lists[schema.listKey].types.output;
+    return graphql.field({
+      type: schema.many ? graphql.list(listOutputType) : listOutputType,
+      resolve({ value }, args, context) {
+        if (Array.isArray(value)) {
+          return context.db[schema.listKey].findMany({
+            where: {
+              id: { in: (value as { id: string }[]).map(x => x.id) },
+            },
+          });
+        }
+        if ((value as any)?.id == null) {
+          return null;
+        }
+        return context.db[schema.listKey].findOne({
+          where: {
+            id: (value as { id: string }).id,
+          },
+        });
+      },
+    });
+  }
+
+  assertNever(schema);
+}
diff --git a/packages/fields-document/src/structure.ts b/packages/fields-document/src/structure.ts
new file mode 100644
index 00000000000..1fada2f2a78
--- /dev/null
+++ b/packages/fields-document/src/structure.ts
@@ -0,0 +1,144 @@
+import path from 'path';
+import {
+  BaseListTypeInfo,
+  JSONValue,
+  FieldTypeFunc,
+  CommonFieldConfig,
+  jsonFieldTypePolyfilledForSQLite,
+} from '@keystone-6/core/types';
+import { graphql } from '@keystone-6/core';
+import { getInitialPropsValue } from './DocumentEditor/component-blocks/initial-values';
+import { getOutputGraphQLField } from './structure-graphql-output';
+import { ComponentSchemaForGraphQL } from './DocumentEditor/component-blocks/api';
+import {
+  getGraphQLInputType,
+  getValueForCreate,
+  getValueForUpdate,
+} from './structure-graphql-input';
+import { assertValidComponentSchema } from './DocumentEditor/component-blocks/field-assertions';
+import { addRelationshipDataToComponentProps, fetchRelationshipData } from './relationship-data';
+
+export type StructureFieldConfig<ListTypeInfo extends BaseListTypeInfo> =
+  CommonFieldConfig<ListTypeInfo> & {
+    db?: { map?: string };
+    schema: ComponentSchemaForGraphQL;
+  };
+
+const views = path.join(path.dirname(__dirname), 'component-views');
+
+export const structure =
+  <ListTypeInfo extends BaseListTypeInfo>({
+    schema,
+    ...config
+  }: StructureFieldConfig<ListTypeInfo>): FieldTypeFunc<ListTypeInfo> =>
+  meta => {
+    if ((config as any).isIndexed === 'unique') {
+      throw Error("isIndexed: 'unique' is not a supported option for field type structure");
+    }
+    const lists = new Set(Object.keys(meta.lists));
+    try {
+      assertValidComponentSchema(schema, lists);
+    } catch (err) {
+      throw new Error(`${meta.listKey}.${meta.fieldKey}: ${(err as any).message}`);
+    }
+
+    const resolve = (val: JSONValue | undefined) =>
+      val === null && meta.provider === 'postgresql' ? 'JsonNull' : val;
+
+    const defaultValue = getInitialPropsValue(schema);
+
+    const unreferencedConcreteInterfaceImplementations: graphql.ObjectType<any>[] = [];
+
+    const name = meta.listKey + meta.fieldKey[0].toUpperCase() + meta.fieldKey.slice(1);
+    return jsonFieldTypePolyfilledForSQLite(
+      meta.provider,
+      {
+        ...config,
+        hooks: {
+          ...config.hooks,
+          async resolveInput(args) {
+            let val = args.resolvedData[meta.fieldKey];
+            if (args.operation === 'update') {
+              let prevVal = args.item[meta.fieldKey];
+              if (meta.provider === 'sqlite') {
+                prevVal = JSON.parse(prevVal as any);
+                val = args.inputData[meta.fieldKey];
+              }
+              val = await getValueForUpdate(schema, val, prevVal, args.context, []);
+              if (val === null && meta.provider === 'postgresql') {
+                val = 'JsonNull';
+              }
+              if (meta.provider === 'sqlite') {
+                val = JSON.stringify(val);
+              }
+            }
+
+            return config.hooks?.resolveInput
+              ? config.hooks.resolveInput({
+                  ...args,
+                  resolvedData: { ...args.resolvedData, [meta.fieldKey]: val },
+                })
+              : val;
+          },
+        },
+        input: {
+          create: {
+            arg: graphql.arg({
+              type: getGraphQLInputType(name, schema, 'create', new Map(), meta),
+            }),
+            async resolve(val, context) {
+              return resolve(await getValueForCreate(schema, val, context, []));
+            },
+          },
+          update: {
+            arg: graphql.arg({
+              type: getGraphQLInputType(name, schema, 'update', new Map(), meta),
+            }),
+          },
+        },
+        output: getOutputGraphQLField(
+          name,
+          schema,
+          unreferencedConcreteInterfaceImplementations,
+          new Map(),
+          meta
+        ),
+        extraOutputFields: {
+          [`${meta.fieldKey}Raw`]: graphql.field({
+            type: graphql.JSON,
+            args: {
+              hydrateRelationships: graphql.arg({
+                type: graphql.nonNull(graphql.Boolean),
+                defaultValue: false,
+              }),
+            },
+            resolve({ value }, args, context) {
+              if (args.hydrateRelationships) {
+                return addRelationshipDataToComponentProps(schema, value, (schema, value) =>
+                  fetchRelationshipData(
+                    context,
+                    schema.listKey,
+                    schema.many,
+                    schema.selection || '',
+                    value
+                  )
+                );
+              }
+              return value;
+            },
+          }),
+        },
+        views,
+        getAdminMeta: () => ({}),
+        unreferencedConcreteInterfaceImplementations,
+      },
+      {
+        default: {
+          kind: 'literal',
+          value: JSON.stringify(defaultValue),
+        },
+        map: config.db?.map,
+        mode: 'required',
+      }
+    );
+  };
diff --git a/tests/sandbox/add-button.tsx b/tests/sandbox/add-button.tsx
new file mode 100644
index 00000000000..ebf3febdd28
--- /dev/null
+++ b/tests/sandbox/add-button.tsx
@@ -0,0 +1,84 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { Button } from '@keystone-ui/button';
+import { Box, jsx, Stack } from '@keystone-ui/core';
+import { PlusCircleIcon } from '@keystone-ui/icons/icons/PlusCircleIcon';
+import { PopoverDialog, usePopover } from '@keystone-ui/popover';
+import { useSelect } from 'downshift';
+
+export function AddButton<Value extends string>(props: {
+  options: readonly { label: string; value: Value }[];
+  onInsert: (initialValue: Value extends any ? { discriminant: Value } : never) => void;
+}) {
+  const { dialog, trigger, isOpen, setOpen } = usePopover({
+    modifiers: [{ name: 'offset', options: { offset: [0, 4] } }],
+  });
+
+  const { getToggleButtonProps, getMenuProps, getItemProps, highlightedIndex } = useSelect<{
+    label: string;
+    value: Value;
+  }>({
+    items: props.options as typeof props.options[number][],
+    itemToString: x => x?.label ?? '',
+    selectedItem: null,
+    onSelectedItemChange: ({ selectedItem }) => {
+      if (selectedItem) {
+        props.onInsert({ discriminant: selectedItem.value } as any);
+      }
+    },
+    onIsOpenChange: ({ isOpen }) => {
+      setOpen(!!isOpen);
+    },
+    isOpen,
+  });
+  return (
+    <div>
+      <Button
+        {...getToggleButtonProps({
+          ref: trigger.ref,
+          ...trigger.props,
+        })}
+        tone="active"
+        weight="bold"
+      >
+        <span css={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
+          <PlusCircleIcon size="smallish" /> <span>Add</span>
+        </span>
+      </Button>
+      <PopoverDialog isVisible={isOpen}>
+        <button />
+        <Stack
+          {...getMenuProps({ ref: dialog.ref, ...dialog.props })}
+          gap="xsmall"
+          paddingY="small"
+          paddingX="small"
+          background="white"
+          css={{
+            minWidth: 120,
+            boxShadow: '0px 8px 11px -2px rgba(9, 30, 66, 0.12), 0px 0px 1px rgba(9, 30, 66, 0.31)',
+            borderRadius: 8,
+            listStyle: 'none',
+          }}
+        >
+          {props.options.map((option, i) => {
+            return (
+              <Box
+                key={option.value}
+                {...getItemProps({ item: option, index: i, role: 'menuitem' })}
+                css={{
+                  cursor: 'pointer',
+                  backgroundColor: highlightedIndex === i ? '#F6F8FC' : '',
+                  borderRadius: 4,
+                }}
+                paddingX="medium"
+                paddingY="small"
+              >
+                {option.label}
+              </Box>
+            );
+          })}
+        </Stack>
+      </PopoverDialog>
+    </div>
+  );
+}
diff --git a/tests/sandbox/components.tsx b/tests/sandbox/components.tsx
new file mode 100644
index 00000000000..9cc552e69c4
--- /dev/null
+++ b/tests/sandbox/components.tsx
@@ -0,0 +1,316 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+
+import {
+  fields,
+  ArrayField,
+  ConditionalField,
+  FormField,
+  ComponentSchema,
+  ChildField,
+} from '@keystone-6/fields-document/component-blocks';
+import { PreviewProps } from '@keystone-6/fields-document/src/DocumentEditor/component-blocks/api';
+import {
+  FormValueContentFromPreviewProps,
+  NonChildFieldComponentSchema,
+} from '@keystone-6/fields-document/src/DocumentEditor/component-blocks/form-from-preview';
+import { jsx, Stack } from '@keystone-ui/core';
+import { AlertDialog } from '@keystone-ui/modals';
+import { ButtonHTMLAttributes, useCallback, useEffect, useState, useRef } from 'react';
+import {
+  OrderableItem,
+  OrderableList,
+  DragHandle,
+} from '@keystone-6/fields-document/src/DocumentEditor/primitives/orderable';
+import { AddButton } from './add-button';
+
+type ComponentSchemaWithoutChildField = Exclude<ComponentSchema, ChildField>;
+
+type ComponentsFields<Components extends Record<string, ComponentSchemaWithoutChildField>> =
+  ArrayField<
+    ConditionalField<
+      FormField<keyof Components & string, readonly { value: keyof Components; label: string }[]>,
+      Components
+    >
+  >;
+
+const returnUndefined = () => undefined;
+
+function components<
+  Components extends {
+    [Key in keyof Components]: {
+      label: string;
+      schema: ComponentSchemaWithoutChildField;
+      subtitle?: (props: PreviewProps<Components[Key]['schema']>) => string | undefined;
+      children?: (
+        props: PreviewProps<Components[Key]['schema']>
+      ) => PreviewProps<ComponentSchemaWithoutChildField> | undefined;
+    };
+  }
+>(
+  components: Components
+): ComponentsFields<{
+  [Key in keyof Components]: Components[Key]['schema'];
+}> {
+  const comps = components as unknown as Record<
+    string,
+    {
+      label: string;
+      schema: ComponentSchemaWithoutChildField;
+      subtitle?: (props: PreviewProps<ComponentSchemaWithoutChildField>) => string | undefined;
+      children?: (
+        props: PreviewProps<ComponentSchemaWithoutChildField>
+      ) => PreviewProps<ComponentSchemaWithoutChildField> | undefined;
+    }
+  >;
+  const labels = new Map(Object.entries(comps).map(([key, { label }]) => [key, label]));
+  const field = fields.array(
+    fields.conditional(
+      fields.select({
+        label: 'Type',
+        options: Object.entries(comps).map(([value, { label }]) => ({
+          value: value,
+          label,
+        })),
+        defaultValue: Object.keys(comps)[0],
+      }),
+      Object.fromEntries(Object.entries(comps).map(([value, { schema: field }]) => [value, field]))
+    ),
+    {
+      preview: function Preview(props) {
+        const elementsRef = useRef(props.elements);
+        useEffect(() => {
+          elementsRef.current = props.elements;
+        });
+        const { onChange } = props;
+        const onRemove = useCallback(
+          (id: string) => {
+            onChange(elementsRef.current.filter(x => x.key !== id).map(x => ({ key: x.key })));
+          },
+          [onChange]
+        );
+        const onInsert = useCallback(
+          (initialValue: { discriminant: string }) => {
+            onChange([
+              ...elementsRef.current.map(x => ({ key: x.key })),
+              {
+                key: undefined,
+                value: { discriminant: initialValue.discriminant },
+              },
+            ]);
+          },
+          [onChange]
+        );
+        return (
+          <Stack gap="medium">
+            {!!props.elements.length && (
+              <OrderableList {...props}>
+                {props.elements.map(x => {
+                  return (
+                    <DraggableElement<typeof x['value']['schema']>
+                      key={x.key}
+                      elementKey={x.key}
+                      props={x.value}
+                      label={labels.get(x.discriminant)!}
+                      children={comps[x.discriminant].children ?? returnUndefined}
+                      subtitle={comps[x.discriminant].subtitle ?? returnUndefined}
+                      onRemove={onRemove}
+                    />
+                  );
+                })}
+              </OrderableList>
+            )}
+            <AddButton options={props.schema.element.discriminant.options} onInsert={onInsert} />
+          </Stack>
+        );
+      },
+    }
+  );
+  return field as any;
+}
+
+function componentThing<Schema extends ComponentSchemaWithoutChildField>(component: {
+  label: string;
+  schema: Schema;
+  subtitle?: (props: PreviewProps<Schema>) => string | undefined;
+  children?: (
+    props: PreviewProps<Schema>
+  ) => PreviewProps<ComponentSchemaWithoutChildField> | undefined;
+}) {
+  return component;
+}
+
+export const prop: ArrayField<ComponentSchemaWithoutChildField> = components({
+  leaf: componentThing({
+    label: 'Leaf',
+    schema: fields.object({
+      label: fields.text({ label: 'Label' }),
+      url: fields.url({ label: 'URL' }),
+    }),
+    subtitle: props => props.fields.label.value,
+  }),
+  group: componentThing({
+    label: 'Group',
+    schema: fields.object({
+      label: fields.text({ label: 'Label' }),
+      get children() {
+        return prop;
+      },
+    }),
+    subtitle: props =>
+      `${props.fields.label.value ? props.fields.label.value + ' — ' : ''}${
+        props.fields.children.elements.length
+      } Items`,
+    children: props => props.fields.children,
+  }),
+});
+
+const DraggableElement = function DraggableElement<
+  Schema extends NonChildFieldComponentSchema
+>(props: {
+  props: PreviewProps<Schema>;
+  elementKey: string;
+  label: string;
+  subtitle: (props: PreviewProps<Schema>) => string | undefined;
+  children: (
+    props: PreviewProps<Schema>
+  ) => PreviewProps<ComponentSchemaWithoutChildField> | undefined;
+  onRemove: (id: string) => void;
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [isChildrenOpen, setIsChildrenOpen] = useState(true);
+  const childrenProps = props.children(props.props);
+  return (
+    <OrderableItem elementKey={props.elementKey}>
+      <Stack gap="medium">
+        <div css={{ display: 'flex', gap: 4 }}>
+          <Stack across gap="xsmall" align="center" css={{ cursor: 'pointer' }}>
+            <DragHandle />
+            <div
+              css={{
+                background: '#F6F8FC',
+                border: '1px solid #E9EBF3',
+                height: 32,
+                width: 32,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                borderRadius: 4,
+              }}
+            >
+              {props.label.slice(0, 2)}
+            </div>
+          </Stack>
+          <button
+            css={{
+              display: 'flex',
+              flexDirection: 'column',
+              flex: 1,
+              cursor: 'pointer',
+              backgroundColor: 'transparent',
+              ':hover': {
+                backgroundColor: '#F6F8FC',
+              },
+              borderRadius: 8,
+            }}
+            onClick={() => {
+              setIsEditing(true);
+            }}
+          >
+            <span css={{ fontSize: 16, fontWeight: 'bold' }}>{props.label}</span>
+            <span css={{ fontSize: 12 }}>{props.subtitle(props.props)}</span>
+          </button>
+          <Stack across gap="xsmall" align="center">
+            {/* <IconButton
+              onClick={() => {
+                setIsEditing(true);
+              }}
+            >
+              {editIcon}
+            </IconButton> */}
+            <IconButton
+              onClick={() => {
+                props.onRemove(props.elementKey);
+              }}
+            >
+              {removeIcon}
+            </IconButton>
+            {childrenProps && (
+              <Stack across gap="xsmall" align="center">
+                <div css={{ width: 1, height: 28, backgroundColor: '#E9EBF3' }} />
+                <IconButton
+                  aria-label={`${isChildrenOpen ? 'Close' : 'Open'} ${props.label} children`}
+                  onClick={() => {
+                    setIsChildrenOpen(!isChildrenOpen);
+                  }}
+                  style={isChildrenOpen ? {} : { transform: 'rotate(180deg)' }}
+                >
+                  {downChevron}
+                </IconButton>
+              </Stack>
+            )}
+          </Stack>
+        </div>
+        {isChildrenOpen && childrenProps !== undefined && (
+          <FormValueContentFromPreviewProps {...childrenProps} />
+        )}
+        <AlertDialog
+          title={`Edit ${props.label}`}
+          actions={{
+            confirm: {
+              action: () => {
+                setIsEditing(false);
+              },
+              label: 'Done',
+            },
+          }}
+          isOpen={isEditing}
+        >
+          <FormValueContentFromPreviewProps {...props.props} />
+        </AlertDialog>
+      </Stack>
+    </OrderableItem>
+  );
+};
+
+function IconButton(props: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      css={{
+        border: '0',
+        background: 'transparent',
+        cursor: 'pointer',
+        ':hover,:focus': {
+          background: '#F6F8FC',
+        },
+        borderRadius: 8,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 28,
+        width: 28,
+      }}
+      {...props}
+    />
+  );
+}
+
+const removeIcon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.75 1.125H11.25V2.25H6.75V1.125ZM2.25 3.375V4.5H3.375V15.75C3.375 16.0484 3.49353 16.3345 3.7045 16.5455C3.91548 16.7565 4.20163 16.875 4.5 16.875H13.5C13.7984 16.875 14.0845 16.7565 14.2955 16.5455C14.5065 16.3345 14.625 16.0484 14.625 15.75V4.5H15.75V3.375H2.25ZM4.5 15.75V4.5H13.5V15.75H4.5ZM6.75 6.75H7.875V13.5H6.75V6.75ZM10.125 6.75H11.25V13.5H10.125V6.75Z"
+      fill="#596794"
+    />
+  </svg>
+);
+
+const downChevron = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M10 13.75L3.75 7.5L4.625 6.625L10 12L15.375 6.625L16.25 7.5L10 13.75Z"
+      fill="#596794"
+    />
+  </svg>
+);
diff --git a/tests/sandbox/configs/all-the-things.ts b/tests/sandbox/configs/all-the-things.ts
index 0149545e2ad..60229c79244 100644
--- a/tests/sandbox/configs/all-the-things.ts
+++ b/tests/sandbox/configs/all-the-things.ts
@@ -17,8 +17,9 @@ import {
   calendarDay,
   multiselect,
 } from '@keystone-6/core/fields';
-import { document } from '@keystone-6/fields-document';
+import { document, structure } from '@keystone-6/fields-document';
 import { componentBlocks } from '../component-blocks';
+import { schema } from '../structure';
 import { dbConfig, localStorageConfig, trackingFields } from '../utils';
 
 const description =
@@ -28,6 +29,7 @@ export const lists = {
   Thing: list({
     access: allowAll,
     fields: {
+      structure: structure({ schema, ui: { views: './structure' } }),
       checkbox: checkbox({ ui: { description } }),
       password: password({ ui: { description } }),
       toOneRelationship: relationship({ ui: { description }, ref: 'User' }),
diff --git a/tests/sandbox/package.json b/tests/sandbox/package.json
index 5148e7da2ae..61b7faab061 100644
--- a/tests/sandbox/package.json
+++ b/tests/sandbox/package.json
@@ -15,7 +15,10 @@
     "@keystone-ui/core": "^5.0.1",
     "@keystone-ui/fields": "^7.1.1",
     "@keystone-ui/icons": "^6.0.1",
+    "@keystone-ui/modals": "^6.0.1",
+    "@keystone-ui/popover": "^6.0.1",
     "@keystone-ui/tooltip": "^6.0.1",
+    "downshift": "^6.1.11",
     "react": "^18.1.0",
     "typescript": "^4.7.4"
   },
diff --git a/tests/sandbox/structure.tsx b/tests/sandbox/structure.tsx
new file mode 100644
index 00000000000..ddff856d3b6
--- /dev/null
+++ b/tests/sandbox/structure.tsx
@@ -0,0 +1,26 @@
+import { ComponentSchema, fields } from '@keystone-6/fields-document/component-blocks';
+
+export const schema: ComponentSchema = fields.array(
+  fields.conditional(
+    fields.select({
+      label: 'Type',
+      defaultValue: '',
+      options: [
+        { label: 'Group', value: 'group' },
+        { label: 'Leaf', value: 'leaf' },
+      ],
+    }),
+    {
+      leaf: fields.object({
+        label: fields.text({ label: 'Label' }),
+        href: fields.text({ label: 'Link' }),
+      }),
+      group: fields.object({
+        label: fields.text({ label: 'Label' }),
+        get children() {
+          return schema;
+        },
+      }),
+    }
+  )
+);
diff --git a/yarn.lock b/yarn.lock
index e5cec3f2e48..4a591a87609 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2234,6 +2234,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.14.8":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.0.tgz#22b11c037b094d27a8a2504ea4dcff00f50e2259"
+  integrity sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.18.10", "@babel/template@^7.18.6", "@babel/template@^7.3.3":
   version "7.18.10"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
@@ -6750,6 +6757,17 @@ dotenv@^8.1.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.6.0.tgz#061af664d19f7f4d8fc6e4ff9b584ce237adcb8b"
   integrity sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==
 
+downshift@^6.1.11:
+  version "6.1.11"
+  resolved "https://registry.yarnpkg.com/downshift/-/downshift-6.1.11.tgz#bb570448c26e67df9d15da6ed4e3b0af6a44ddd5"
+  integrity sha512-pBI5zYIv5o2zzjfcQZV8R2LDwOowopuRoNXrXfVMHP79l64JZQ3kCW4EDwaFk8abV6QnlZ9GwNnE3rDQ8d440Q==
+  dependencies:
+    "@babel/runtime" "^7.14.8"
+    compute-scroll-into-view "^1.0.17"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+    tslib "^2.3.0"
+
 dumb-passwords@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/dumb-passwords/-/dumb-passwords-0.2.1.tgz#efaba4fdc13b27d446d4b11a5f303357649ada32"
@@ -12113,7 +12131,7 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-is@^17.0.1:
+react-is@^17.0.1, react-is@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==