diff --git a/src/LexInputContainer.tsx b/src/LexInputContainer.tsx
index 8468e11..578f578 100644
--- a/src/LexInputContainer.tsx
+++ b/src/LexInputContainer.tsx
@@ -6,9 +6,8 @@ import {
   Input,
   Dropdown,
   Image,
-  Modal,
-  Button,
 } from 'semantic-ui-react';
+import PropListInput from './PropListInput';
 
 class LexInputContainer extends React.Component<any, any> {
   public render() {
@@ -135,93 +134,6 @@ function propListInput(params: any) {
   );
 }
 
-class PropListInput extends React.Component<any, any> {
-  state = { modalOpen: false, exKey: '', exVal: '' };
-  dropOptsForVal(value: any) {
-    let { field, langSelOpts } = this.props;
-    let fieldOpts = _.get<any>(langSelOpts, field, []);
-    function valueForKey(key: string) {
-      let match = _.find(value, (v: any) => _.isEqual(v.key, key));
-      if (match) {
-        return match;
-      } else {
-        return { key, value: '' };
-      }
-    }
-    return fieldOpts.map((k: any, i: any) => {
-      return {
-        key: i,
-        value: valueForKey(k),
-        text: k,
-      };
-    });
-  }
-
-  public render() {
-    let { sh, value } = this.props;
-    let dropOptions = this.dropOptsForVal(value);
-    let renderLabel = (label: any) => ({
-      content: `${label.value.key}-${label.value.value}`,
-    });
-    let onCloseModal = (e: any) => {
-      let except = { key: this.state.exKey, value: this.state.exVal };
-      let ns = _.concat(value, except);
-      this.setState({
-        modalOpen: false,
-        exKey: '',
-        exVal: ''
-      });
-      sh(ns);
-    };
-    let dropDownComp = (
-      <Dropdown
-        options={dropOptions}
-        onChange={(e, d) => {
-          let newValue = d.value as any;
-          let addedValue = _.difference(newValue, value) as any;
-          let didAdd = _.size(addedValue) > 0;
-          let exKey = didAdd ? addedValue[0].key : '';
-          this.setState({ exKey, modalOpen: didAdd });
-          if (!didAdd) {
-            sh(newValue);
-          }
-        }}
-        value={value}
-        compact={true}
-        selection={true}
-        search={true}
-        multiple={true}
-        fluid={true}
-        style={{ width: '10em' }}
-        renderLabel={renderLabel}
-      />
-    );
-    return (
-      <Modal
-        open={this.state.modalOpen}
-        onClose={onCloseModal}
-        size="mini"
-        trigger={dropDownComp}
-      >
-        <Modal.Content>
-          Enter the exception for {this.state.exKey}
-        </Modal.Content>
-        <Modal.Actions>
-          <Input
-            focus={true}
-            onChange={(e, d: any) => {
-              this.setState({ exVal: d.value });
-            }}
-          />
-          <Button onClick={onCloseModal}>
-            Done
-              </Button>
-        </Modal.Actions>
-      </Modal>
-    );
-  }
-}
-
 export function componentForType(type: string, params: any) {
   switch (type) {
     case 'text': {
diff --git a/src/PropListInput.tsx b/src/PropListInput.tsx
new file mode 100644
index 0000000..9a4b67f
--- /dev/null
+++ b/src/PropListInput.tsx
@@ -0,0 +1,95 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import {
+  Input,
+  Dropdown,
+  Modal,
+  Button,
+} from 'semantic-ui-react';
+
+export default class PropListInput extends React.Component<any, any> {
+  state = { modalOpen: false, exKey: '', exVal: '' };
+  dropOptsForVal(value: any) {
+    let { field, langSelOpts } = this.props;
+    let fieldOpts = _.get<any>(langSelOpts, field, []);
+    function valueForKey(key: string) {
+      let match = _.find(value, (v: any) => _.isEqual(v.key, key));
+      if (match) {
+        return match;
+      } else {
+        return { key, value: '' };
+      }
+    }
+    return fieldOpts.map((k: any, i: any) => {
+      return {
+        key: i,
+        value: valueForKey(k),
+        text: k,
+      };
+    });
+  }
+
+  public render() {
+    let { sh, value } = this.props;
+    let dropOptions = this.dropOptsForVal(value);
+    let renderLabel = (label: any) => ({
+      content: `${label.value.key}-${label.value.value}`,
+    });
+    let onCloseModal = (e: any) => {
+      let except = { key: this.state.exKey, value: this.state.exVal };
+      let ns = _.concat(value, except);
+      this.setState({
+        modalOpen: false,
+        exKey: '',
+        exVal: ''
+      });
+      sh(ns);
+    };
+    let dropDownComp = (
+      <Dropdown
+        options={dropOptions}
+        onChange={(e, d) => {
+          let newValue = d.value as any;
+          let addedValue = _.difference(newValue, value) as any;
+          let didAdd = _.size(addedValue) > 0;
+          let exKey = didAdd ? addedValue[0].key : '';
+          this.setState({ exKey, modalOpen: didAdd });
+          if (!didAdd) {
+            sh(newValue);
+          }
+        }}
+        value={value}
+        compact={true}
+        selection={true}
+        search={true}
+        multiple={true}
+        fluid={true}
+        style={{ width: '10em' }}
+        renderLabel={renderLabel}
+      />
+    );
+    return (
+      <Modal
+        open={this.state.modalOpen}
+        onClose={onCloseModal}
+        size="mini"
+        trigger={dropDownComp}
+      >
+        <Modal.Content>
+          Enter the exception for {this.state.exKey}
+        </Modal.Content>
+        <Modal.Actions>
+          <Input
+            focus={true}
+            onChange={(e, d: any) => {
+              this.setState({ exVal: d.value });
+            }}
+          />
+          <Button onClick={onCloseModal}>
+            Done
+              </Button>
+        </Modal.Actions>
+      </Modal>
+    );
+  }
+}