diff --git a/.gitignore b/.gitignore
index d30f40e..41092e6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+public/png
diff --git a/src/LexComponents.tsx b/src/LexComponents.tsx
index 15ce1a7..3b31a86 100644
--- a/src/LexComponents.tsx
+++ b/src/LexComponents.tsx
@@ -1,37 +1,17 @@
 import * as React from 'react';
 import * as _ from 'lodash';
+import { LexEdit, fieldMetaMap } from './LexEdit';
 import {
-  Image,
   Input,
   Dropdown,
-  Card,
-  Button
 } from 'semantic-ui-react';
 import * as XML from 'xml2js';
-import { LexSingleInput } from './LexInputComponents';
-const { Flex, Box } = require('reflexbox');
+const { Flex } = require('reflexbox');
 
 interface LexEditorProps {
   fileName: RequestInfo;
 }
 // const imageRoot = 'https://s3-us-west-2.amazonaws.com/aac-buddy/static/img/png/';
-const imageRoot = 'https://localhost:3000/png/';
-const fieldMetaMap = {
-  'label': { lens: 'label[0]', type: 'text' },
-  'unl': { lens: 'unl[0]', type: 'text' },
-  'synset': { lens: 'lexprops[0].wnsynset[0]', type: 'text' },
-  'guid': { lens: 'guid[0]', type: 'text' },
-  'pos': { lens: 'pos[0]', type: 'select' },
-  'image': { lens: 'image[0]', type: 'preview' },
-  'relations': { lens: 'relations[0]', type: 'text' },
-  'frame': { lens: 'syntacticprops[0].property[0]._', type: 'select' },
-  'morphclass': {
-    lens: 'lexprops[0].morphology[0].morph[0]._',
-    type: 'select'
-  },
-  'stats': { lens: 'stats[0].property[0]._', type: 'text' },
-  'lang': { lens: '$.id', type: 'select' },
-};
 
 export class LexEditor extends React.Component<LexEditorProps, any> {
   lexData: any;
@@ -179,91 +159,3 @@ function LexMatches(props: any) {
     </Flex>
   );
 }
-
-class LexEdit extends React.Component<any, any> {
-  public render() {
-    let li = this.props.lexItem;
-    let lexFields = _.keys(fieldMetaMap).map(field => {
-      let defaultText = _.get<any>(li, fieldMetaMap[field].lens, '');
-      let sh = (e: any) => {
-        let eventData = {};
-        eventData[field] = e.target.value;
-        this.handleOnChange(eventData);
-      };
-      // let pred = (x: any) => _.isEqual(fieldMetaMap[ft].type, x);
-      // _.findIndex(['text', 'number'], pred) !== -1
-      if (fieldMetaMap[field].type === 'text') {
-        return (
-          <LexSingleInput key={field} labelText={_.capitalize(field)}>
-            <Input
-              onChange={sh}
-              defaultValue={defaultText}
-              placeholder={field}
-              type="text"
-              dir="auto"
-              style={{ width: '10em' }}
-            />
-          </LexSingleInput>
-        );
-      } else if (fieldMetaMap[field].type === 'select') {
-        return (
-          <LexSingleInput key={field} labelText={_.capitalize(field)}>
-            <select
-              onChange={sh}
-              style={{ width: '10em' }}
-              defaultValue={defaultText}
-            >
-              {this.props.selectionMeta[field].map((k: any, i: any, c: any) => {
-                return <option key={i} value={k}> {k}</option>;
-              })}
-            </select>
-          </LexSingleInput>
-        );
-      } else if (fieldMetaMap[field].type === 'preview' && defaultText !== '') {
-        let imageSrc = imageRoot + defaultText;
-        return (
-          <LexSingleInput key={field} labelText={_.capitalize(field)}>
-            <Image src={imageSrc} size="tiny" bordered={true} />
-          </LexSingleInput>
-        );
-      } else {
-        return null;
-      }
-    });
-    return (
-      <Box m={2}>
-        <Card raised={true}>
-          <Card.Content>
-            <Card.Header>
-              {_.get<any>(li, 'label', '')}
-            </Card.Header>
-            <Card.Meta>
-              language: {_.get<any>(li, '$.id', '')}
-            </Card.Meta>
-            <Card.Description>
-              {lexFields}
-            </Card.Description>
-          </Card.Content>
-          <Card.Content extra={true}>
-            <Button
-              basic={true}
-              fluid={true}
-              color="green"
-              onClick={(e, d) => this.handleOnSave(d)}
-            >
-              Save
-            </Button>
-          </Card.Content>
-        </Card>
-      </Box>
-    );
-  }
-
-  private handleOnChange(event: any) {
-    this.setState(event);
-  }
-
-  private handleOnSave(event: any) {
-    console.log('saving object', this.props.lexItem);
-  }
-}
diff --git a/src/LexEdit.tsx b/src/LexEdit.tsx
new file mode 100644
index 0000000..65d98b4
--- /dev/null
+++ b/src/LexEdit.tsx
@@ -0,0 +1,117 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import LexSingleInput from './LexSingleInput';
+import {
+  Image,
+  Input,
+  Card,
+  Button
+} from 'semantic-ui-react';
+const { Box } = require('reflexbox');
+
+const imageRoot = 'http://localhost:3000/png/';
+
+export const fieldMetaMap = {
+  'label': { lens: 'label[0]', type: 'text' },
+  'unl': { lens: 'unl[0]', type: 'text' },
+  'synset': { lens: 'lexprops[0].wnsynset[0]', type: 'text' },
+  'guid': { lens: 'guid[0]', type: 'text' },
+  'pos': { lens: 'pos[0]', type: 'select' },
+  'image': { lens: 'image[0]', type: 'preview' },
+  'relations': { lens: 'relations[0]', type: 'text' },
+  'frame': { lens: 'syntacticprops[0].property[0]._', type: 'select' },
+  'morphclass': {
+    lens: 'lexprops[0].morphology[0].morph[0]._',
+    type: 'select'
+  },
+  'stats': { lens: 'stats[0].property[0]._', type: 'text' },
+  'lang': { lens: '$.id', type: 'select' },
+};
+
+export class LexEdit extends React.Component<any, any> {
+  public render() {
+    let li = this.props.lexItem;
+    let lexFields = _.keys(fieldMetaMap).map(field => {
+      let defaultText = _.get<any>(li, fieldMetaMap[field].lens, '');
+      let sh = (e: any) => {
+        let eventData = {};
+        eventData[field] = e.target.value;
+        this.handleOnChange(eventData);
+      };
+      // let pred = (x: any) => _.isEqual(fieldMetaMap[ft].type, x);
+      // _.findIndex(['text', 'number'], pred) !== -1
+      if (fieldMetaMap[field].type === 'text') {
+        return (
+          <LexSingleInput key={field} labelText={_.capitalize(field)}>
+            <Input
+              onChange={sh}
+              defaultValue={defaultText}
+              placeholder={field}
+              type="text"
+              dir="auto"
+              style={{ width: '10em' }}
+            />
+          </LexSingleInput>
+        );
+      } else if (fieldMetaMap[field].type === 'select') {
+        return (
+          <LexSingleInput key={field} labelText={_.capitalize(field)}>
+            <select
+              onChange={sh}
+              style={{ width: '10em' }}
+              defaultValue={defaultText}
+            >
+              {this.props.selectionMeta[field].map((k: any, i: any, c: any) => {
+                return <option key={i} value={k}> {k}</option>;
+              })}
+            </select>
+          </LexSingleInput>
+        );
+      } else if (fieldMetaMap[field].type === 'preview' && defaultText !== '') {
+        let imageSrc = imageRoot + defaultText;
+        return (
+          <LexSingleInput key={field} labelText={_.capitalize(field)}>
+            <Image src={imageSrc} size="tiny" bordered={true} />
+          </LexSingleInput>
+        );
+      } else {
+        return null;
+      }
+    });
+    return (
+      <Box m={2}>
+        <Card raised={true}>
+          <Card.Content>
+            <Card.Header>
+              {_.get<any>(li, 'label', '')}
+            </Card.Header>
+            <Card.Meta>
+              language: {_.get<any>(li, '$.id', '')}
+            </Card.Meta>
+            <Card.Description>
+              {lexFields}
+            </Card.Description>
+          </Card.Content>
+          <Card.Content extra={true}>
+            <Button
+              basic={true}
+              fluid={true}
+              color="green"
+              onClick={(e, d) => this.handleOnSave(d)}
+            >
+              Save
+            </Button>
+          </Card.Content>
+        </Card>
+      </Box>
+    );
+  }
+
+  private handleOnChange(event: any) {
+    this.setState(event);
+  }
+
+  private handleOnSave(event: any) {
+    console.log('saving object', this.props.lexItem);
+  }
+}
diff --git a/src/LexInputComponents.tsx b/src/LexSingleInput.tsx
similarity index 90%
rename from src/LexInputComponents.tsx
rename to src/LexSingleInput.tsx
index fd93fae..7820b3d 100644
--- a/src/LexInputComponents.tsx
+++ b/src/LexSingleInput.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Label, Form } from 'semantic-ui-react';
 const { Flex, Box } = require('reflexbox');
 
-export class LexSingleInput extends React.Component<any, any> {
+export default class LexSingleInput extends React.Component<any, any> {
   public render() {
     return (
       <div>