diff --git a/plugins/config/src/ConfigurationEditorWidget/components/ConfigurationEditor.test.tsx b/plugins/config/src/ConfigurationEditorWidget/components/ConfigurationEditor.test.tsx
index 7aa3b6d876..d6a2b4dac5 100644
--- a/plugins/config/src/ConfigurationEditorWidget/components/ConfigurationEditor.test.tsx
+++ b/plugins/config/src/ConfigurationEditorWidget/components/ConfigurationEditor.test.tsx
@@ -8,88 +8,86 @@ import SVG from '@jbrowse/plugin-svg'
 import { linearBasicDisplayConfigSchemaFactory } from '@jbrowse/plugin-linear-genome-view'
 import ConfigurationEditor from './ConfigurationEditor'
 
-describe('ConfigurationEditor widget', () => {
-  it('renders with just the required model elements', () => {
-    const TestSchema = ConfigurationSchema('TestThing', {
-      foo: {
-        type: 'string',
-        defaultValue: 'bar',
-      },
-    })
-
-    const { container } = render(
-      <ConfigurationEditor model={{ target: TestSchema.create() }} />,
-    )
-    expect(container).toMatchSnapshot()
+test('renders with just the required model elements', () => {
+  const TestSchema = ConfigurationSchema('TestThing', {
+    foo: {
+      type: 'string',
+      defaultValue: 'bar',
+    },
   })
 
-  it('renders all the different types of built-in slots', () => {
-    const TestSchema = ConfigurationSchema('TestThing', {
-      stringTest: {
-        name: 'stringTest',
-        description: 'stringTest',
-        type: 'string',
-        defaultValue: 'string1',
-      },
-      fileLocationTest: {
-        name: 'fileLocationTest',
-        description: 'fileLocationTest',
-        type: 'fileLocation',
-        defaultValue: { uri: '/path/to/my.file', locationType: 'UriLocation' },
-      },
-      stringArrayTest: {
-        name: 'stringArrayTest',
-        description: 'stringArrayTest',
-        type: 'stringArray',
-        defaultValue: ['string1', 'string2'],
-      },
-      stringArrayMapTest: {
-        name: 'stringArrayMapTest',
-        description: 'stringArrayMapTest',
-        type: 'stringArrayMap',
-        defaultValue: { key1: ['string1', 'string2'] },
-      },
-      numberTest: {
-        name: 'numberTest',
-        description: 'numberTest',
-        type: 'number',
-        defaultValue: 88.5,
-      },
-      integerTest: {
-        name: 'integerTest',
-        description: 'integerTest',
-        type: 'integer',
-        defaultValue: 42,
-      },
-      colorTest: {
-        name: 'colorTest',
-        description: 'colorTest',
-        type: 'color',
-        defaultValue: '#396494',
-      },
-      booleanTest: {
-        name: 'booleanTest',
-        description: 'booleanTest',
-        type: 'boolean',
-        defaultValue: true,
-      },
-    })
+  const { container } = render(
+    <ConfigurationEditor model={{ target: TestSchema.create() }} />,
+  )
+  expect(container).toMatchSnapshot()
+})
 
-    const { container } = render(
-      <ConfigurationEditor model={{ target: TestSchema.create() }} />,
-    )
-    expect(container).toMatchSnapshot()
+test('renders all the different types of built-in slots', () => {
+  const TestSchema = ConfigurationSchema('TestThing', {
+    stringTest: {
+      name: 'stringTest',
+      description: 'stringTest',
+      type: 'string',
+      defaultValue: 'string1',
+    },
+    fileLocationTest: {
+      name: 'fileLocationTest',
+      description: 'fileLocationTest',
+      type: 'fileLocation',
+      defaultValue: { uri: '/path/to/my.file', locationType: 'UriLocation' },
+    },
+    stringArrayTest: {
+      name: 'stringArrayTest',
+      description: 'stringArrayTest',
+      type: 'stringArray',
+      defaultValue: ['string1', 'string2'],
+    },
+    stringArrayMapTest: {
+      name: 'stringArrayMapTest',
+      description: 'stringArrayMapTest',
+      type: 'stringArrayMap',
+      defaultValue: { key1: ['string1', 'string2'] },
+    },
+    numberTest: {
+      name: 'numberTest',
+      description: 'numberTest',
+      type: 'number',
+      defaultValue: 88.5,
+    },
+    integerTest: {
+      name: 'integerTest',
+      description: 'integerTest',
+      type: 'integer',
+      defaultValue: 42,
+    },
+    colorTest: {
+      name: 'colorTest',
+      description: 'colorTest',
+      type: 'color',
+      defaultValue: '#396494',
+    },
+    booleanTest: {
+      name: 'booleanTest',
+      description: 'booleanTest',
+      type: 'boolean',
+      defaultValue: true,
+    },
   })
 
-  it('renders with defaults of the PileupTrack schema', () => {
-    const pluginManager = new PluginManager([new Alignments(), new SVG()])
-    pluginManager.createPluggableElements()
-    pluginManager.configure()
-    const PileupDisplaySchema =
-      linearBasicDisplayConfigSchemaFactory(pluginManager)
-    const { container } = render(
-      <ConfigurationEditor model={{ target: PileupDisplaySchema.create() }} />,
-    )
-    expect(container).toMatchSnapshot()
-  })
+  const { container } = render(
+    <ConfigurationEditor model={{ target: TestSchema.create() }} />,
+  )
+  expect(container).toMatchSnapshot()
+})
+
+test('renders with defaults of the PileupTrack schema', () => {
+  const pluginManager = new PluginManager([new Alignments(), new SVG()])
+  pluginManager.createPluggableElements()
+  pluginManager.configure()
+  const PileupDisplaySchema =
+    linearBasicDisplayConfigSchemaFactory(pluginManager)
+  const { container } = render(
+    <ConfigurationEditor model={{ target: PileupDisplaySchema.create() }} />,
+  )
+  expect(container).toMatchSnapshot()
 })
diff --git a/plugins/config/src/ConfigurationEditorWidget/components/ConfigurationEditor.tsx b/plugins/config/src/ConfigurationEditorWidget/components/ConfigurationEditor.tsx
index 4da3758d70..d7233e2868 100644
--- a/plugins/config/src/ConfigurationEditorWidget/components/ConfigurationEditor.tsx
+++ b/plugins/config/src/ConfigurationEditorWidget/components/ConfigurationEditor.tsx
@@ -1,11 +1,5 @@
 import React from 'react'
-import {
-  readConfObject,
-  getTypeNamesFromExplicitlyTypedUnion,
-  isConfigurationSchemaType,
-  isConfigurationSlotType,
-  AnyConfigurationModel,
-} from '@jbrowse/core/configuration'
+
 import {
   FormGroup,
   Accordion,
@@ -18,21 +12,28 @@ import { observer } from 'mobx-react'
 import { getMembers, IAnyType } from 'mobx-state-tree'
 import { singular } from 'pluralize'
 
+// jbrowse
+import { AbstractSessionModel } from '@jbrowse/core/util'
+import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML'
+import {
+  readConfObject,
+  getTypeNamesFromExplicitlyTypedUnion,
+  isConfigurationSchemaType,
+  isConfigurationSlotType,
+  AnyConfigurationModel,
+} from '@jbrowse/core/configuration'
+
 // icons
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 
 // locals
 import SlotEditor from './SlotEditor'
 import TypeSelector from './TypeSelector'
-import { AbstractSessionModel } from '@jbrowse/core/util'
 
 const useStyles = makeStyles()(theme => ({
-  expandIcon: {
+  icon: {
     color: theme.palette.tertiary?.contrastText || '#fff',
   },
-  root: {
-    padding: theme.spacing(1, 3, 1, 1),
-  },
   expansionPanelDetails: {
     display: 'block',
     padding: theme.spacing(1),
@@ -61,54 +62,49 @@ const Member = observer(function (props: {
     slot = schema[slotName],
     path = [],
   } = props
-  let typeSelector
   if (isConfigurationSchemaType(slotSchema)) {
     if (slot.length) {
       return slot.map((subslot: AnyConfigurationModel, slotIndex: number) => {
-        const key = `${singular(slotName)} ${slotIndex + 1}`
+        const key = subslot.type
+          ? `${singular(slotName)} ${subslot.type}`
+          : `${singular(slotName)} ${slotIndex + 1}`
         return <Member key={key} {...props} slot={subslot} slotName={key} />
       })
     }
     // if this is an explicitly typed schema, make a type-selecting dropdown
     // that can be used to change its type
     const typeNameChoices = getTypeNamesFromExplicitlyTypedUnion(slotSchema)
-    if (typeNameChoices.length) {
-      typeSelector = (
-        <TypeSelector
-          typeNameChoices={typeNameChoices}
-          slotName={slotName}
-          slot={slot}
-          onChange={evt => {
-            if (evt.target.value !== slot.type) {
-              schema.setSubschema(slotName, { type: evt.target.value })
-            }
-          }}
-        />
-      )
-    }
     return (
       <Accordion defaultExpanded className={classes.accordion}>
         <AccordionSummary
-          expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
+          expandIcon={<ExpandMoreIcon className={classes.icon} />}
         >
           <Typography>{[...path, slotName].join('➔')}</Typography>
         </AccordionSummary>
         <AccordionDetails className={classes.expansionPanelDetails}>
-          {typeSelector}
+          {typeNameChoices.length ? (
+            <TypeSelector
+              typeNameChoices={typeNameChoices}
+              slotName={slotName}
+              slot={slot}
+              onChange={evt => {
+                if (evt.target.value !== slot.type) {
+                  schema.setSubschema(slotName, { type: evt.target.value })
+                }
+              }}
+            />
+          ) : null}
           <FormGroup className={classes.noOverflow}>
             <Schema schema={slot} path={[...path, slotName]} />
           </FormGroup>
         </AccordionDetails>
       </Accordion>
     )
-  }
-
-  if (isConfigurationSlotType(slotSchema)) {
-    // this is a regular config slot
+  } else if (isConfigurationSlotType(slotSchema)) {
     return <SlotEditor key={slotName} slot={slot} slotSchema={slotSchema} />
+  } else {
+    return null
   }
-
-  return null
 })
 
 const Schema = observer(function ({
@@ -150,9 +146,11 @@ const ConfigurationEditor = observer(function ({
   return (
     <Accordion key={key} defaultExpanded className={classes.accordion}>
       <AccordionSummary
-        expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
+        expandIcon={<ExpandMoreIcon className={classes.icon} />}
       >
-        <Typography>{name ?? 'Configuration'}</Typography>
+        <Typography>
+          <SanitizedHTML html={name ?? 'Configuration'} />
+        </Typography>
       </AccordionSummary>
       <AccordionDetails
         className={classes.expansionPanelDetails}
diff --git a/plugins/config/src/ConfigurationEditorWidget/components/__snapshots__/ConfigurationEditor.test.tsx.snap b/plugins/config/src/ConfigurationEditorWidget/components/__snapshots__/ConfigurationEditor.test.tsx.snap
index 43edf288d4..20df2b9e11 100644
--- a/plugins/config/src/ConfigurationEditorWidget/components/__snapshots__/ConfigurationEditor.test.tsx.snap
+++ b/plugins/config/src/ConfigurationEditorWidget/components/__snapshots__/ConfigurationEditor.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ConfigurationEditor widget renders all the different types of built-in slots 1`] = `
+exports[`renders all the different types of built-in slots 1`] = `
 <div>
   <div
     class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiAccordion-root MuiAccordion-rounded Mui-expanded MuiAccordion-gutters css-cczqch-MuiPaper-root-MuiAccordion-root-accordion"
@@ -25,7 +25,7 @@ exports[`ConfigurationEditor widget renders all the different types of built-in
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ymsoo8-MuiSvgIcon-root-expandIcon"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1nfyztd-MuiSvgIcon-root-icon"
           data-testid="ExpandMoreIcon"
           focusable="false"
           viewBox="0 0 24 24"
@@ -862,7 +862,7 @@ exports[`ConfigurationEditor widget renders all the different types of built-in
 </div>
 `;
 
-exports[`ConfigurationEditor widget renders with defaults of the PileupTrack schema 1`] = `
+exports[`renders with defaults of the PileupTrack schema 1`] = `
 <div>
   <div
     class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiAccordion-root MuiAccordion-rounded Mui-expanded MuiAccordion-gutters css-cczqch-MuiPaper-root-MuiAccordion-root-accordion"
@@ -887,7 +887,7 @@ exports[`ConfigurationEditor widget renders with defaults of the PileupTrack sch
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ymsoo8-MuiSvgIcon-root-expandIcon"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1nfyztd-MuiSvgIcon-root-icon"
           data-testid="ExpandMoreIcon"
           focusable="false"
           viewBox="0 0 24 24"
@@ -1237,7 +1237,7 @@ exports[`ConfigurationEditor widget renders with defaults of the PileupTrack sch
                   >
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ymsoo8-MuiSvgIcon-root-expandIcon"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1nfyztd-MuiSvgIcon-root-icon"
                       data-testid="ExpandMoreIcon"
                       focusable="false"
                       viewBox="0 0 24 24"
@@ -2005,7 +2005,7 @@ exports[`ConfigurationEditor widget renders with defaults of the PileupTrack sch
 </div>
 `;
 
-exports[`ConfigurationEditor widget renders with just the required model elements 1`] = `
+exports[`renders with just the required model elements 1`] = `
 <div>
   <div
     class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiAccordion-root MuiAccordion-rounded Mui-expanded MuiAccordion-gutters css-cczqch-MuiPaper-root-MuiAccordion-root-accordion"
@@ -2030,7 +2030,7 @@ exports[`ConfigurationEditor widget renders with just the required model element
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ymsoo8-MuiSvgIcon-root-expandIcon"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1nfyztd-MuiSvgIcon-root-icon"
           data-testid="ExpandMoreIcon"
           focusable="false"
           viewBox="0 0 24 24"