diff --git a/packages/fields-document/form/package.json b/packages/fields-document/form/package.json
new file mode 100644
index 00000000000..93c74c9368b
--- /dev/null
+++ b/packages/fields-document/form/package.json
@@ -0,0 +1,4 @@
+{
+  "main": "dist/keystone-6-fields-document-form.cjs.js",
+  "module": "dist/keystone-6-fields-document-form.esm.js"
+}
diff --git a/packages/fields-document/package.json b/packages/fields-document/package.json
index ef153dd4c8f..fff55694f8c 100644
--- a/packages/fields-document/package.json
+++ b/packages/fields-document/package.json
@@ -9,14 +9,16 @@
     "dist",
     "component-blocks",
     "primitives",
-    "views"
+    "views",
+    "structure-views",
   ],
   "preconstruct": {
     "entrypoints": [
       "component-blocks.tsx",
       "index.ts",
       "primitives.ts",
-      "views.tsx"
+      "views.tsx",
+      "structure-views.tsx"
     ]
   },
   "peerDependencies": {
@@ -34,6 +36,7 @@
     "@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",
     "@types/react": "^18.0.9",
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx b/packages/fields-document/src/DocumentEditor/component-blocks/api.tsx
index df745b3c403..a73f8a867ea 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,
@@ -52,6 +53,21 @@ export type FormField<Value extends FormFieldValue, Options> = {
   validate(value: unknown): boolean;
 };
 
+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 =
   | 'inherit'
   | {
@@ -137,6 +153,17 @@ export type ComponentSchema =
   // this is written like this rather than ArrayField<ComponentSchema> to avoid TypeScript erroring about circularity
   | { kind: 'array'; element: ComponentSchema };
 
+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 };
+
 export const fields = {
   text({
     label,
@@ -144,7 +171,7 @@ export const fields = {
   }: {
     label: string;
     defaultValue?: string;
-  }): FormField<string, undefined> {
+  }): FormFieldWithGraphQLField<string, undefined> {
     return {
       kind: 'form',
       Input({ value, onChange, autoFocus }) {
@@ -166,6 +193,10 @@ export const fields = {
       validate(value) {
         return typeof value === 'string';
       },
+      graphql: {
+        input: graphql.String,
+        output: graphql.field({ type: graphql.String }),
+      },
     };
   },
   url({
@@ -174,7 +205,7 @@ export const fields = {
   }: {
     label: string;
     defaultValue?: string;
-  }): FormField<string, undefined> {
+  }): FormFieldWithGraphQLField<string, undefined> {
     const validate = (value: unknown) => {
       return typeof value === 'string' && (value === '' || isValidURL(value));
     };
@@ -203,6 +234,10 @@ export const fields = {
       options: undefined,
       defaultValue,
       validate,
+      graphql: {
+        input: graphql.String,
+        output: graphql.field({ type: graphql.String }),
+      },
     };
   },
   select<Option extends { label: string; value: string }>({
@@ -213,7 +248,7 @@ export const fields = {
     label: string;
     options: readonly Option[];
     defaultValue: Option['value'];
-  }): FormField<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,6 +279,16 @@ 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;
+          },
+        }),
+      },
     };
   },
   multiselect<Option extends { label: string; value: string }>({
@@ -254,7 +299,7 @@ export const fields = {
     label: string;
     options: readonly Option[];
     defaultValue: readonly Option['value'][];
-  }): FormField<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,6 +326,16 @@ 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;
+          },
+        }),
+      },
     };
   },
   checkbox({
@@ -289,7 +344,7 @@ export const fields = {
   }: {
     label: string;
     defaultValue?: boolean;
-  }): FormField<boolean, undefined> {
+  }): FormFieldWithGraphQLField<boolean, undefined> {
     return {
       kind: 'form',
       Input({ value, onChange, autoFocus }) {
@@ -312,6 +367,10 @@ export const fields = {
       validate(value) {
         return typeof value === 'boolean';
       },
+      graphql: {
+        input: graphql.Boolean,
+        output: graphql.field({ type: graphql.Boolean }),
+      },
     };
   },
   empty(): FormField<null, undefined> {
@@ -384,8 +443,8 @@ 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): ObjectField<Value> {
+    return { kind: 'object', fields: value };
   },
   conditional<
     DiscriminantField extends FormField<string | boolean, any>,
@@ -394,7 +453,8 @@ export const fields = {
     }
   >(
     discriminant: DiscriminantField,
-    values: ConditionalValues
+    values: ConditionalValues,
+    opts?: {}
   ): ConditionalField<DiscriminantField, ConditionalValues> {
     if (
       (discriminant.validate('true') || discriminant.validate('false')) &&
@@ -463,7 +523,7 @@ type ChildFieldPreviewProps<Schema extends ChildField, ChildFieldElement> = {
 };
 
 type FormFieldPreviewProps<Schema extends FormField<any, any>> = {
-  readonly value: Schema['options'];
+  readonly value: Schema['defaultValue'];
   onChange(value: Schema['defaultValue']): void;
   readonly options: Schema['options'];
   readonly schema: Schema;
@@ -500,15 +560,14 @@ type ConditionalFieldPreviewProps<
   };
 }[keyof Schema['values']];
 
+// this is a separate type so that this is distributive
+type RelationshipDataType<Many extends boolean> = Many extends true
+  ? readonly HydratedRelationshipData[]
+  : HydratedRelationshipData | null;
+
 type RelationshipFieldPreviewProps<Schema extends RelationshipField<boolean>> = {
-  readonly value: Schema['many'] extends true
-    ? readonly HydratedRelationshipData[]
-    : HydratedRelationshipData | null;
-  onChange(
-    relationshipData: Schema['many'] extends true
-      ? readonly HydratedRelationshipData[]
-      : HydratedRelationshipData | null
-  ): void;
+  readonly value: RelationshipDataType<Schema['many']>;
+  onChange(relationshipData: RelationshipDataType<Schema['many']>): void;
   readonly schema: Schema;
 };
 
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..b29488746eb 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
@@ -3,9 +3,11 @@
 import { useKeystone } from '@keystone-6/core/admin-ui/context';
 import { RelationshipSelect } from '@keystone-6/core/fields/types/relationship/views/RelationshipSelect';
 import { Button } from '@keystone-ui/button';
-import { Box, jsx, Stack } from '@keystone-ui/core';
+import { jsx, Stack } from '@keystone-ui/core';
 import { FieldContainer, FieldLabel } from '@keystone-ui/fields';
-import { memo, useMemo } from 'react';
+import { PlusCircleIcon } from '@keystone-ui/icons/icons/PlusCircleIcon';
+import { AlertDialog } from '@keystone-ui/modals';
+import { memo, useCallback, useMemo, useState } from 'react';
 import { DragHandle, OrderableItem, OrderableList, RemoveButton } from '../primitives/orderable';
 import {
   ArrayField,
@@ -17,6 +19,8 @@ import {
   RelationshipData,
   RelationshipField,
 } from './api';
+import { previewPropsToValue, setValueToPreviewProps } from './get-value';
+import { createGetPreviewProps } from './preview-props';
 import { assertNever } from './utils';
 
 type DefaultFieldProps<Key> = GenericPreviewProps<
@@ -36,12 +40,15 @@ function ArrayFieldPreview(props: DefaultFieldProps<'array'>) {
         })}
       </OrderableList>
       <Button
-        autoFocus={props.autoFocus}
         onClick={() => {
           props.onChange([...props.elements.map(x => ({ key: x.key })), { key: undefined }]);
         }}
+        autoFocus={props.autoFocus}
+        tone="active"
       >
-        Add
+        <Stack gap="small" across>
+          <PlusCircleIcon size="smallish" /> <span>Add</span>
+        </Stack>
       </Button>
     </Stack>
   );
@@ -159,7 +166,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';
@@ -189,19 +196,86 @@ const OrderableItemInForm = memo(function OrderableItemInForm(
     elementKey: string;
   }
 ) {
+  const [modalState, setModalState] = useState<
+    { state: 'open'; value: unknown } | { state: 'closed' }
+  >({ state: 'closed' });
+  const onModalChange = useCallback(
+    (cb: (value: unknown) => unknown) => {
+      setModalState(state => {
+        if (state.state === 'open') {
+          return { state: 'open', value: cb(state.value) };
+        }
+        return state;
+      });
+    },
+    [setModalState]
+  );
   return (
     <OrderableItem elementKey={props.elementKey}>
-      <div css={{ display: 'flex', justifyContent: 'space-between' }}>
-        <DragHandle />
-        <RemoveButton />
-      </div>
-      <Box paddingX="medium" paddingBottom="medium">
-        {isNonChildFieldPreviewProps(props) && <FormValueContentFromPreviewProps {...props} />}
-      </Box>
+      <Stack gap="medium">
+        <div css={{ display: 'flex', gap: 4 }}>
+          <Stack across gap="xsmall" align="center" css={{ cursor: 'pointer' }}>
+            <DragHandle />
+          </Stack>
+          <Button
+            weight="none"
+            onClick={() => {
+              setModalState({ state: 'open', value: previewPropsToValue(props) });
+            }}
+            css={{ flexGrow: 1, justifyContent: 'start' }}
+          >
+            <span css={{ fontSize: 16, fontWeight: 'bold', textAlign: 'start' }}>Item</span>
+          </Button>
+          <RemoveButton />
+        </div>
+        {isNonChildFieldPreviewProps(props) && (
+          <AlertDialog
+            title={`Edit Item`}
+            actions={{
+              confirm: {
+                action: () => {
+                  if (modalState.state === 'open') {
+                    setValueToPreviewProps(modalState.value, props);
+                    setModalState({ state: 'closed' });
+                  }
+                },
+                label: 'Done',
+              },
+              cancel: {
+                action: () => {
+                  setModalState({ state: 'closed' });
+                },
+                label: 'Cancel',
+              },
+            }}
+            isOpen={modalState.state === 'open'}
+          >
+            {modalState.state === 'open' && (
+              <ArrayFieldItemModelContent
+                onChange={onModalChange}
+                schema={props.schema}
+                value={modalState.value}
+              />
+            )}
+          </AlertDialog>
+        )}
+      </Stack>
     </OrderableItem>
   );
 });
 
+function ArrayFieldItemModelContent(props: {
+  schema: NonChildFieldComponentSchema;
+  value: unknown;
+  onChange: (cb: (value: unknown) => unknown) => void;
+}) {
+  const previewProps = useMemo(
+    () => createGetPreviewProps(props.schema, props.onChange, () => undefined),
+    [props.schema, props.onChange]
+  )(props.value);
+  return <FormValueContentFromPreviewProps {...previewProps} />;
+}
+
 function findFocusableObjectFieldKey(schema: ObjectField): string | undefined {
   for (const [key, innerProp] of Object.entries(schema.fields)) {
     const childFocusable = canFieldBeFocused(innerProp);
diff --git a/packages/fields-document/src/DocumentEditor/component-blocks/get-value.ts b/packages/fields-document/src/DocumentEditor/component-blocks/get-value.ts
new file mode 100644
index 00000000000..118ba896b54
--- /dev/null
+++ b/packages/fields-document/src/DocumentEditor/component-blocks/get-value.ts
@@ -0,0 +1,127 @@
+import {
+  ComponentSchema,
+  GenericPreviewProps,
+  InitialOrUpdateValueFromComponentPropField,
+  ValueForComponentSchema,
+} from './api';
+import { getKeysForArrayValue, setKeysForArrayValue } from './preview-props';
+import { assertNever } from './utils';
+
+const previewPropsToValueConverter: {
+  [Kind in ComponentSchema['kind']]: (
+    props: GenericPreviewProps<Extract<ComponentSchema, { kind: Kind }>, unknown>
+  ) => ValueForComponentSchema<Extract<ComponentSchema, { kind: Kind }>>;
+} = {
+  child() {
+    return null;
+  },
+  form(props) {
+    return props.value;
+  },
+  array(props) {
+    const values = props.elements.map(x => previewPropsToValue(x));
+    setKeysForArrayValue(
+      values,
+      props.elements.map(x => x.key)
+    );
+    return values;
+  },
+  conditional(props) {
+    return {
+      discriminant: props.discriminant,
+      value: previewPropsToValue(props.value),
+    };
+  },
+  object(props) {
+    return Object.fromEntries(
+      Object.entries(props.fields).map(([key, val]) => [key, previewPropsToValue(val)])
+    );
+  },
+  relationship(props) {
+    return props.value;
+  },
+};
+
+export function previewPropsToValue<Schema extends ComponentSchema>(
+  props: GenericPreviewProps<ComponentSchema, unknown>
+): ValueForComponentSchema<Schema> {
+  return (previewPropsToValueConverter[props.schema.kind] as any)(props);
+}
+
+const valueToUpdaters: {
+  [Kind in ComponentSchema['kind']]: (
+    value: ValueForComponentSchema<Extract<ComponentSchema, { kind: Kind }>>,
+    schema: Extract<ComponentSchema, { kind: Kind }>
+  ) => InitialOrUpdateValueFromComponentPropField<Extract<ComponentSchema, { kind: Kind }>>;
+} = {
+  child() {
+    return undefined;
+  },
+  form(value) {
+    return value;
+  },
+  array(value, schema) {
+    const keys = getKeysForArrayValue(value);
+    return value.map((x, i) => ({
+      key: keys[i],
+      value: valueToUpdater(x, schema.element),
+    }));
+  },
+  conditional(value, schema) {
+    return {
+      discriminant: value.discriminant,
+      value: valueToUpdater(value.value, schema.values[value.discriminant.toString()]),
+    };
+  },
+  object(value, schema) {
+    return Object.fromEntries(
+      Object.entries(schema.fields).map(([key, schema]) => [
+        key,
+        valueToUpdater(value[key], schema),
+      ])
+    );
+  },
+  relationship(value) {
+    return value;
+  },
+};
+
+function valueToUpdater<Schema extends ComponentSchema>(
+  value: ValueForComponentSchema<Schema>,
+  schema: ComponentSchema
+): InitialOrUpdateValueFromComponentPropField<Schema> {
+  return (valueToUpdaters[schema.kind] as any)(value, schema);
+}
+
+export function setValueToPreviewProps<Schema extends ComponentSchema>(
+  value: ValueForComponentSchema<Schema>,
+  props: GenericPreviewProps<ComponentSchema, unknown>
+) {
+  if (isKind(props, 'child')) {
+    // child fields can't be updated through preview props, so we don't do anything here
+    return;
+  }
+  if (
+    isKind(props, 'form') ||
+    isKind(props, 'relationship') ||
+    isKind(props, 'object') ||
+    isKind(props, 'array')
+  ) {
+    props.onChange(valueToUpdater(value, props.schema));
+    return;
+  }
+  if (isKind(props, 'conditional')) {
+    const updater = valueToUpdater(value, props.schema);
+    props.onChange(updater.discriminant, updater.value);
+    return;
+  }
+  assertNever(props);
+}
+
+// this exists because for props.schema.kind === 'form', ts doesn't narrow props, only props.schema
+function isKind<Kind extends ComponentSchema['kind']>(
+  props: GenericPreviewProps<ComponentSchema, unknown>,
+  kind: Kind
+): props is GenericPreviewProps<Extract<ComponentSchema, { kind: Kind }>, unknown> {
+  return props.schema.kind === kind;
+}
diff --git a/packages/fields-document/src/DocumentEditor/primitives/orderable.tsx b/packages/fields-document/src/DocumentEditor/primitives/orderable.tsx
index b39d59a63d3..7eeadeafa81 100644
--- a/packages/fields-document/src/DocumentEditor/primitives/orderable.tsx
+++ b/packages/fields-document/src/DocumentEditor/primitives/orderable.tsx
@@ -57,13 +57,13 @@ export function OrderableList(props: {
         modifiers={[restrictToVerticalAxis]}
         onDragEnd={({ over, active }) => {
           if (over && over.id !== active.id) {
-            const activeIndex = props.elements.findIndex(
-              x => (typeof x === 'string' ? x : x.key) === active.id
+            const activeIndex = props.elements.findIndex(x => x.key === active.id);
+            const overIndex = props.elements.findIndex(x => x.key === over.id);
+            const newValue = arrayMove(
+              props.elements.map(x => ({ key: x.key })),
+              activeIndex,
+              overIndex
             );
-            const overIndex = props.elements.findIndex(
-              x => (typeof x === 'string' ? x : x.key) === over.id
-            );
-            const newValue = arrayMove(props.elements as { key: string }[], activeIndex, overIndex);
             props.onChange(newValue);
           }
         }}
@@ -156,7 +156,6 @@ export function RemoveButton() {
 
   return (
     <Button
-      size="small"
       weight="none"
       css={{ padding: 7 }}
       onClick={() => onRemove(sortable.index)}
diff --git a/packages/fields-document/src/component-blocks.tsx b/packages/fields-document/src/component-blocks.tsx
index 6e131eec1d3..ac7af409f40 100644
--- a/packages/fields-document/src/component-blocks.tsx
+++ b/packages/fields-document/src/component-blocks.tsx
@@ -10,4 +10,5 @@ export type {
   RelationshipField,
   InferRenderersForComponentBlocks,
   ArrayField,
+  ComponentSchemaForGraphQL,
 } from './DocumentEditor/component-blocks/api';
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/primitives.ts b/packages/fields-document/src/primitives.ts
index b4024203de9..e6c8670cc3d 100644
--- a/packages/fields-document/src/primitives.ts
+++ b/packages/fields-document/src/primitives.ts
@@ -4,4 +4,8 @@ export {
   ToolbarGroup,
   ToolbarSeparator,
   ToolbarSpacer,
+  DragHandle,
+  KeyboardInTooltip,
+  OrderableItem,
+  OrderableList,
 } from './DocumentEditor/primitives';
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-views.tsx b/packages/fields-document/src/structure-views.tsx
new file mode 100644
index 00000000000..c80d68ef717
--- /dev/null
+++ b/packages/fields-document/src/structure-views.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/structure.ts b/packages/fields-document/src/structure.ts
new file mode 100644
index 00000000000..3d17a3ad82d
--- /dev/null
+++ b/packages/fields-document/src/structure.ts
@@ -0,0 +1,135 @@
+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;
+  };
+
+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 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 (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 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: '@keystone-6/fields-document/structure-views',
+        getAdminMeta: () => ({}),
+        unreferencedConcreteInterfaceImplementations,
+      },
+      {
+        default: {
+          kind: 'literal',
+          value: JSON.stringify(defaultValue),
+        },
+        map: config.db?.map,
+        mode: 'required',
+      }
+    );
+  };
diff --git a/packages/fields-document/structure-views/package.json b/packages/fields-document/structure-views/package.json
new file mode 100644
index 00000000000..518f3725b9a
--- /dev/null
+++ b/packages/fields-document/structure-views/package.json
@@ -0,0 +1,4 @@
+{
+  "main": "dist/keystone-6-fields-document-structure-views.cjs.js",
+  "module": "dist/keystone-6-fields-document-structure-views.esm.js"
+}
diff --git a/tests/sandbox/configs/all-the-things.ts b/tests/sandbox/configs/all-the-things.ts
index e5ade158c84..c85ae24d39d 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 9c120582267..ade73f1ca1a 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/schema.graphql b/tests/sandbox/schema.graphql
index 990285f61b2..5e584cc226d 100644
--- a/tests/sandbox/schema.graphql
+++ b/tests/sandbox/schema.graphql
@@ -3,6 +3,8 @@
 
 type Thing {
   id: ID!
+  structure: [ThingStructure]
+  structureRaw(hydrateRelationships: Boolean! = false): JSON
   checkbox: Boolean
   password: PasswordState
   toOneRelationship: User
@@ -27,6 +29,10 @@ type Thing {
   document: Thing_document_Document
 }
 
+interface ThingStructure {
+  discriminant: String
+}
+
 type PasswordState {
   isSet: Boolean!
 }
@@ -67,6 +73,26 @@ input ThingWhereUniqueInput {
   id: ID
 }
 
+type ThingStructureLeaf implements ThingStructure {
+  discriminant: String
+  value: ThingStructureLeafValue
+}
+
+type ThingStructureLeafValue {
+  label: String
+  url: String
+}
+
+type ThingStructureGroup implements ThingStructure {
+  discriminant: String
+  value: ThingStructureGroupValue
+}
+
+type ThingStructureGroupValue {
+  label: String
+  children: [ThingStructure]
+}
+
 input ThingWhereInput {
   AND: [ThingWhereInput!]
   OR: [ThingWhereInput!]
@@ -244,6 +270,7 @@ enum OrderDirection {
 }
 
 input ThingUpdateInput {
+  structure: [ThingStructureUpdateInput]
   checkbox: Boolean
   password: String
   toOneRelationship: UserRelateToOneForUpdateInput
@@ -265,6 +292,21 @@ input ThingUpdateInput {
   document: JSON
 }
 
+input ThingStructureUpdateInput {
+  leaf: ThingStructureLeafUpdateInput
+  group: ThingStructureGroupUpdateInput
+}
+
+input ThingStructureLeafUpdateInput {
+  label: String
+  url: String
+}
+
+input ThingStructureGroupUpdateInput {
+  label: String
+  children: [ThingStructureUpdateInput]
+}
+
 input UserRelateToOneForUpdateInput {
   create: UserCreateInput
   connect: UserWhereUniqueInput
@@ -295,6 +337,7 @@ input ThingUpdateArgs {
 }
 
 input ThingCreateInput {
+  structure: [ThingStructureCreateInput]
   checkbox: Boolean
   password: String
   toOneRelationship: UserRelateToOneForCreateInput
@@ -316,6 +359,21 @@ input ThingCreateInput {
   document: JSON
 }
 
+input ThingStructureCreateInput {
+  leaf: ThingStructureLeafCreateInput
+  group: ThingStructureGroupCreateInput
+}
+
+input ThingStructureLeafCreateInput {
+  label: String
+  url: String
+}
+
+input ThingStructureGroupCreateInput {
+  label: String
+  children: [ThingStructureCreateInput]
+}
+
 input UserRelateToOneForCreateInput {
   create: UserCreateInput
   connect: UserWhereUniqueInput
diff --git a/tests/sandbox/schema.prisma b/tests/sandbox/schema.prisma
index 8c83e2e1e3d..4876179b7e5 100644
--- a/tests/sandbox/schema.prisma
+++ b/tests/sandbox/schema.prisma
@@ -14,6 +14,7 @@ generator client {
 
 model Thing {
   id                      String    @id @default(cuid())
+  structure               String    @default("[]")
   checkbox                Boolean   @default(false)
   password                String?
   toOneRelationship       User?     @relation("Thing_toOneRelationship", fields: [toOneRelationshipId], references: [id])
diff --git a/tests/sandbox/structure.tsx b/tests/sandbox/structure.tsx
new file mode 100644
index 00000000000..c71b18dad85
--- /dev/null
+++ b/tests/sandbox/structure.tsx
@@ -0,0 +1,26 @@
+import { ComponentSchemaForGraphQL, fields } from '@keystone-6/fields-document/component-blocks';
+
+export const schema: ComponentSchemaForGraphQL = fields.array(
+  fields.conditional(
+    fields.select({
+      defaultValue: 'leaf',
+      label: 'Type',
+      options: [
+        { label: 'Leaf', value: 'leaf' },
+        { label: 'Group', value: 'group' },
+      ] as const,
+    }),
+    {
+      leaf: fields.object({
+        label: fields.text({ label: 'Label' }),
+        url: fields.url({ label: 'URL' }),
+      }),
+      group: fields.object({
+        label: fields.text({ label: 'Label' }),
+        get children() {
+          return schema;
+        },
+      }),
+    }
+  )
+);
diff --git a/yarn.lock b/yarn.lock
index 75478dadee0..7efb8a97e16 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2288,12 +2288,12 @@
     "@babel/helper-validator-option" "^7.18.6"
     "@babel/plugin-transform-typescript" "^7.18.6"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.4", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.0.tgz#824a9ef325ffde6f78056059db3168c08785e24a"
-  integrity sha512-NDYdls71fTXoU8TZHfbBWg7DiZfNzClcKui/+kyi6ppD2L1qnWW3VV6CjtaBXSUGGhiTWJ6ereOIkUvenif66Q==
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.4", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.8", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+  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.10"
+    regenerator-runtime "^0.13.4"
 
 "@babel/template@^7.18.10", "@babel/template@^7.3.3":
   version "7.18.10"
@@ -6673,6 +6673,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"
@@ -11726,7 +11737,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==