diff --git a/editors/demo/src/Editors.js b/editors/demo/src/Editors.js
index 0109bafaa1e2b38d49f0a79909ae06191230fd48..b17ba5eccca5a87ffb29e9c900e32ae19c4bd8a0 100644
--- a/editors/demo/src/Editors.js
+++ b/editors/demo/src/Editors.js
@@ -96,7 +96,7 @@ const Editors = () => {
             isActive={project === 'ncbi'}
             onClick={() => setProject('ncbi')}
           >
-            NCBI
+            Mini Editors
           </ProjectButton>
         </Projects>
       </ChooseProject>
diff --git a/editors/demo/src/NCBI/NCBI.js b/editors/demo/src/NCBI/NCBI.js
index efeb5399ee188844e24c0f2b8c26a283c36ff3b7..77aabf3cde11807c985d9f18554a67a4f283f954 100644
--- a/editors/demo/src/NCBI/NCBI.js
+++ b/editors/demo/src/NCBI/NCBI.js
@@ -3,13 +3,18 @@ import React from 'react';
 import { Wax } from 'wax-prosemirror-core';
 import styled from 'styled-components';
 
-import { NcbiLayout } from './layout';
-import { configTitle } from './config';
+import { NcbiLayout, NcbiMiniLayout } from './layout';
+import { configTitle, configMini } from './config';
 
 const Wrapper = styled.div`
   padding: 50px;
 `;
 
+const Divider = styled.div`
+  height: 50px;
+  width: 100%;
+`;
+
 const Ncbi = () => {
   return (
     <>
@@ -20,6 +25,9 @@ const Ncbi = () => {
           value="This is a really really really long title that you cannot break into multiple lines"
           layout={NcbiLayout}
         />
+        <Divider></Divider>
+
+        <Wax config={configMini} autoFocus value="" layout={NcbiMiniLayout} />
       </Wrapper>
     </>
   );
diff --git a/editors/demo/src/NCBI/config/configMini.js b/editors/demo/src/NCBI/config/configMini.js
new file mode 100644
index 0000000000000000000000000000000000000000..10d87e3e49a2c2d28d9f404e304f4f9aa79c7681
--- /dev/null
+++ b/editors/demo/src/NCBI/config/configMini.js
@@ -0,0 +1,45 @@
+import { DefaultSchema } from 'wax-prosemirror-utilities';
+import {
+  InlineAnnotationsService,
+  AnnotationToolGroupService,
+  ListsService,
+  ListToolGroupService,
+  BaseService,
+  BaseToolGroupService,
+  LinkService,
+} from 'wax-prosemirror-services';
+import { WaxSelectionPlugin } from 'wax-prosemirror-plugins';
+
+const config = {
+  MenuService: [
+    {
+      templateArea: 'topBar',
+      toolGroups: [
+        'Base',
+        {
+          name: 'Annotations',
+          exclude: ['Code', 'StrikeThrough', 'Underline', 'SmallCaps'],
+        },
+        'Lists',
+      ],
+    },
+  ],
+
+  RulesService: [],
+  ShortCutsService: {},
+  LinkService: {},
+  SchemaService: DefaultSchema,
+  PmPlugins: [WaxSelectionPlugin],
+
+  services: [
+    new InlineAnnotationsService(),
+    new AnnotationToolGroupService(),
+    new LinkService(),
+    new ListToolGroupService(),
+    new BaseService(),
+    new ListsService(),
+    new BaseToolGroupService(),
+  ],
+};
+
+export default config;
diff --git a/editors/demo/src/NCBI/config/index.js b/editors/demo/src/NCBI/config/index.js
index 5f3c39342432e4833d31489d1f85dbeaa76f1783..6a377bf2e541ecb4bbb88eac5d884a46ee2c7a76 100644
--- a/editors/demo/src/NCBI/config/index.js
+++ b/editors/demo/src/NCBI/config/index.js
@@ -1 +1,2 @@
 export { default as configTitle } from './configTitle';
+export { default as configMini } from './configMini';
diff --git a/editors/demo/src/NCBI/layout/EditorMiniElements.js b/editors/demo/src/NCBI/layout/EditorMiniElements.js
new file mode 100644
index 0000000000000000000000000000000000000000..b745fb41dd34541b490bc81c6a115fb37b571aed
--- /dev/null
+++ b/editors/demo/src/NCBI/layout/EditorMiniElements.js
@@ -0,0 +1,63 @@
+import { css } from 'styled-components';
+
+import { th } from '@pubsweet/ui-toolkit';
+
+/* All styles regarding ProseMirror surface and elements */
+
+const fontWriting = css`
+  color: ${th('colorText')};
+  font-family: ${th('fontWriting')};
+  font-size: ${th('fontSizeBase')};
+`;
+
+export default css`
+  .ProseMirror {
+    background: white;
+    counter-reset: footnote;
+    line-height: 12px;
+    width: 497px;
+    ${fontWriting}
+
+    p::selection,
+    h1::selection,
+    h2::selection,
+    h3::selection,
+    code::selection,
+    span::selection,
+    p span::selection,
+    h1 span::selection,
+    h2 span::selection,
+    h3 span::selection,
+    code span::selection title::selection {
+      background-color: transparent;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .ProseMirror .wax-selection-marker {
+    background-color: ${th('colorSelection')};
+  }
+
+  div[contenteditable='false'] {
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .ProseMirror title {
+    display: inline;
+    font-size: 14px;
+  }
+
+  ul,
+  ol {
+    padding-left: 30px;
+  }
+
+  sup,
+  sub {
+    line-height: 0;
+  }
+`;
diff --git a/editors/demo/src/NCBI/layout/NcbiMiniLayout.js b/editors/demo/src/NCBI/layout/NcbiMiniLayout.js
new file mode 100644
index 0000000000000000000000000000000000000000..3a3d16eb167afd79c071df4833cc1d6c1b2d294d
--- /dev/null
+++ b/editors/demo/src/NCBI/layout/NcbiMiniLayout.js
@@ -0,0 +1,91 @@
+import React from 'react';
+import styled, { ThemeProvider } from 'styled-components';
+import { ComponentPlugin } from 'wax-prosemirror-core';
+import { cokoTheme } from '../theme';
+import { grid, th } from '@pubsweet/ui-toolkit';
+import EditorMiniElements from './EditorMiniElements';
+
+const Wrapper = styled.div`
+  background: ${th('colorBackground')};
+  border: 1px solid grey;
+  clear: both;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  font-family: ${th('fontInterface')};
+  font-size: ${th('fontSizeBase')};
+  width: 100%;
+`;
+
+const Main = styled.div`
+  display: flex;
+`;
+
+const TopMenu = styled.div`
+  background: #fff;
+  display: inline-flex;
+  height: 32px;
+  margin-right: 1px;
+  user-select: none;
+  width: 498px;
+  z-index: 999;
+
+  > div:not(:last-child) {
+    border: none;
+    ${th('colorFurniture')};
+  }
+`;
+
+const EditorArea = styled.div`
+  flex-grow: 1;
+  max-height: 400px;
+`;
+
+const WaxSurfaceScroll = styled.div`
+  border: none;
+  box-sizing: border-box;
+  display: flex;
+  overflow-y: auto;
+  max-height: 400px;
+  position: relative;
+  width: 100%;
+  /* PM styles  for main content*/
+
+  /* stylelint-disable-next-line order/properties-alphabetical-order */
+  ${EditorMiniElements}
+`;
+
+const EditorContainer = styled.div`
+  height: 100%;
+  width: 100%;
+  max-height: 400px;
+
+  .ProseMirror {
+    border-top: none;
+    margin-right: ${grid(1)};
+    padding: ${grid(1)};
+  }
+`;
+
+const TopBar = ComponentPlugin('topBar');
+const WaxOverlays = ComponentPlugin('waxOverlays');
+console.log(cokoTheme);
+const NcbiLayout = ({ editor }) => (
+  <ThemeProvider theme={cokoTheme}>
+    <Wrapper>
+      <TopMenu>
+        <TopBar />
+      </TopMenu>
+      <Main>
+        <EditorArea>
+          <WaxSurfaceScroll>
+            <EditorContainer>{editor}</EditorContainer>
+          </WaxSurfaceScroll>
+        </EditorArea>
+      </Main>
+      <WaxOverlays />
+    </Wrapper>
+  </ThemeProvider>
+);
+
+export default NcbiLayout;
diff --git a/editors/demo/src/NCBI/layout/index.js b/editors/demo/src/NCBI/layout/index.js
index 682b9ec6b2874cbfab3531a032bd46711eccc242..c9f5d741221039277235f56950368f54fc9bc9de 100644
--- a/editors/demo/src/NCBI/layout/index.js
+++ b/editors/demo/src/NCBI/layout/index.js
@@ -1 +1,2 @@
 export { default as NcbiLayout } from './NcbiLayout';
+export { default as NcbiMiniLayout } from './NcbiMiniLayout';