diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx
index 6074c64d2bdb0..18ca71f2bb73a 100644
--- a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx
+++ b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx
@@ -185,30 +185,5 @@ describe('<PipelinesCreate />', () => {
         expect(find('savePipelineError').find('li').length).toBe(8);
       });
     });
-
-    describe('test pipeline', () => {
-      beforeEach(async () => {
-        await act(async () => {
-          testBed = await setup();
-
-          const { waitFor } = testBed;
-
-          await waitFor('pipelineForm');
-        });
-      });
-
-      test('should open the test pipeline flyout', async () => {
-        const { actions, exists, find, waitFor } = testBed;
-
-        await act(async () => {
-          actions.clickAddDocumentsButton();
-          await waitFor('testPipelineFlyout');
-        });
-
-        // Verify test pipeline flyout opens
-        expect(exists('testPipelineFlyout')).toBe(true);
-        expect(find('testPipelineFlyout.title').text()).toBe('Test pipeline');
-      });
-    });
   });
 });
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx
index 5279bd718c16e..ffd82b0bbaf35 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx
@@ -11,8 +11,6 @@ import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSpacer } from
 import { useForm, Form, FormConfig } from '../../../shared_imports';
 import { Pipeline, Processor } from '../../../../common/types';
 
-import './pipeline_form.scss';
-
 import { OnUpdateHandlerArg, OnUpdateHandler } from '../pipeline_processors_editor';
 
 import { PipelineRequestFlyout } from './pipeline_request_flyout';
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx
index 6033f34af6825..a7ffe7ba02caa 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx
@@ -6,7 +6,7 @@
 
 import React, { useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiSpacer, EuiSwitch, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiSpacer, EuiSwitch } from '@elastic/eui';
 
 import { Processor } from '../../../../common/types';
 
@@ -14,15 +14,11 @@ import { getUseField, getFormRow, Field } from '../../../shared_imports';
 
 import {
   ProcessorsEditorContextProvider,
-  GlobalOnFailureProcessorsEditor,
-  ProcessorsEditor,
   OnUpdateHandler,
   OnDoneLoadJsonHandler,
+  PipelineProcessorsEditor,
 } from '../pipeline_processors_editor';
 
-import { ProcessorsHeader } from './processors_header';
-import { OnFailureProcessorsTitle } from './on_failure_processors_title';
-
 interface Props {
   processors: Processor[];
   onFailure?: Processor[];
@@ -118,28 +114,12 @@ export const PipelineFormFields: React.FunctionComponent<Props> = ({
       </FormRow>
 
       {/* Pipeline Processors Editor */}
-
       <ProcessorsEditorContextProvider
         onFlyoutOpen={onEditorFlyoutOpen}
         onUpdate={onProcessorsUpdate}
         value={{ processors, onFailure }}
       >
-        <div className="pipelineProcessorsEditor">
-          <EuiFlexGroup gutterSize="m" responsive={false} direction="column">
-            <EuiFlexItem grow={false}>
-              <ProcessorsHeader onLoadJson={onLoadJson} />
-            </EuiFlexItem>
-            <EuiFlexItem grow={false} className="pipelineProcessorsEditor__container">
-              <ProcessorsEditor />
-
-              <EuiSpacer size="s" />
-
-              <OnFailureProcessorsTitle />
-
-              <GlobalOnFailureProcessorsEditor />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </div>
+        <PipelineProcessorsEditor onLoadJson={onLoadJson} />
       </ProcessorsEditorContextProvider>
     </>
   );
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx
index e46e5156e30f3..10fb73df1ce1c 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx
@@ -11,12 +11,7 @@ import { notificationServiceMock, scopedHistoryMock } from 'src/core/public/mock
 import { LocationDescriptorObject } from 'history';
 import { KibanaContextProvider } from 'src/plugins/kibana_react/public';
 import { registerTestBed, TestBed } from '../../../../../../../test_utils';
-import {
-  ProcessorsEditorContextProvider,
-  Props,
-  ProcessorsEditor,
-  GlobalOnFailureProcessorsEditor,
-} from '../';
+import { ProcessorsEditorContextProvider, Props, PipelineProcessorsEditor } from '../';
 
 import {
   breadcrumbService,
@@ -90,7 +85,7 @@ const testBedSetup = registerTestBed<TestSubject>(
   (props: Props) => (
     <KibanaContextProvider services={appServices}>
       <ProcessorsEditorContextProvider {...props}>
-        <ProcessorsEditor /> <GlobalOnFailureProcessorsEditor />
+        <PipelineProcessorsEditor onLoadJson={jest.fn()} />
       </ProcessorsEditorContextProvider>
     </KibanaContextProvider>
   ),
@@ -210,4 +205,5 @@ type TestSubject =
   | 'processorSettingsFormFlyout'
   | 'processorTypeSelector'
   | 'pipelineEditorOnFailureTree'
+  | 'processorsEmptyPrompt'
   | string;
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx
index 74ae8b8894b9f..b80d238362118 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx
@@ -55,6 +55,23 @@ describe('Pipeline Editor', () => {
     expect(arg.getData()).toEqual(testProcessors);
   });
 
+  describe('no processors', () => {
+    beforeEach(async () => {
+      testBed = await setup({
+        value: {
+          processors: [],
+        },
+        onFlyoutOpen: jest.fn(),
+        onUpdate,
+      });
+    });
+
+    it('displays an empty prompt if no processors are defined', () => {
+      const { exists } = testBed;
+      expect(exists('processorsEmptyPrompt')).toBe(true);
+    });
+  });
+
   describe('processors', () => {
     it('adds a new processor', async () => {
       const { actions } = testBed;
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/add_processor_button.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/add_processor_button.tsx
index 4aabcc1d59d73..03b497320dfbc 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/add_processor_button.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/add_processor_button.tsx
@@ -6,30 +6,49 @@
 
 import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiButtonEmpty } from '@elastic/eui';
+import { EuiButtonEmpty, EuiButton } from '@elastic/eui';
 import { usePipelineProcessorsContext } from '../context';
 
 export interface Props {
   onClick: () => void;
+  renderButtonAsLink?: boolean;
 }
 
+const addProcessorButtonLabel = i18n.translate(
+  'xpack.ingestPipelines.pipelineEditor.addProcessorButtonLabel',
+  {
+    defaultMessage: 'Add a processor',
+  }
+);
+
 export const AddProcessorButton: FunctionComponent<Props> = (props) => {
-  const { onClick } = props;
+  const { onClick, renderButtonAsLink } = props;
   const {
     state: { editor },
   } = usePipelineProcessorsContext();
+
+  if (renderButtonAsLink) {
+    return (
+      <EuiButtonEmpty
+        data-test-subj="addProcessorButton"
+        disabled={editor.mode.id !== 'idle'}
+        iconSide="left"
+        iconType="plusInCircle"
+        onClick={onClick}
+      >
+        {addProcessorButtonLabel}
+      </EuiButtonEmpty>
+    );
+  }
+
   return (
-    <EuiButtonEmpty
+    <EuiButton
       data-test-subj="addProcessorButton"
       className="pipelineProcessorsEditor__tree__addProcessorButton"
       disabled={editor.mode.id !== 'idle'}
-      iconSide="left"
-      iconType="plusInCircle"
       onClick={onClick}
     >
-      {i18n.translate('xpack.ingestPipelines.pipelineEditor.addProcessorButtonLabel', {
-        defaultMessage: 'Add a processor',
-      })}
-    </EuiButtonEmpty>
+      {addProcessorButtonLabel}
+    </EuiButton>
   );
 };
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/index.ts
index d476202aa43bb..2e62a81ffa153 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/index.ts
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/index.ts
@@ -19,3 +19,9 @@ export { OnDoneLoadJsonHandler, LoadFromJsonButton } from './load_from_json';
 export { TestPipelineActions } from './test_pipeline';
 
 export { PipelineProcessorsItemTooltip, Position } from './pipeline_processors_editor_item_tooltip';
+
+export { ProcessorsEmptyPrompt } from './processors_empty_prompt';
+
+export { ProcessorsHeader } from './processors_header';
+
+export { OnFailureProcessorsTitle } from './on_failure_processors_title';
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/load_from_json/button.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/load_from_json/button.tsx
index 21d15fc86a0ce..38700d6a7a87c 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/load_from_json/button.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/load_from_json/button.tsx
@@ -15,7 +15,7 @@ interface Props {
 
 const i18nTexts = {
   buttonLabel: i18n.translate('xpack.ingestPipelines.pipelineEditor.loadFromJson.buttonLabel', {
-    defaultMessage: 'Import',
+    defaultMessage: 'Import processors',
   }),
 };
 
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/on_failure_processors_title.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/on_failure_processors_title.tsx
similarity index 96%
rename from x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/on_failure_processors_title.tsx
rename to x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/on_failure_processors_title.tsx
index 0beb5657b54cb..7adc37d1897d1 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/on_failure_processors_title.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/on_failure_processors_title.tsx
@@ -8,7 +8,7 @@ import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { useKibana } from '../../../shared_imports';
+import { useKibana } from '../../../../shared_imports';
 
 export const OnFailureProcessorsTitle: FunctionComponent = () => {
   const { services } = useKibana();
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processor_form.container.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processor_form.container.tsx
index 332908d0756f2..c3b1799ac2a28 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processor_form.container.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processor_form.container.tsx
@@ -113,15 +113,15 @@ export const ProcessorFormContainer: FunctionComponent<Props> = ({
         handleSubmit={handleSubmit}
       />
     );
-  } else {
-    return (
-      <AddProcessorForm
-        {...rest}
-        form={form}
-        esDocsBasePath={services.documentation.getEsDocsBasePath()}
-        closeFlyout={onClose}
-        handleSubmit={handleSubmit}
-      />
-    );
   }
+
+  return (
+    <AddProcessorForm
+      {...rest}
+      form={form}
+      esDocsBasePath={services.documentation.getEsDocsBasePath()}
+      closeFlyout={onClose}
+      handleSubmit={handleSubmit}
+    />
+  );
 };
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_empty_prompt.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_empty_prompt.tsx
new file mode 100644
index 0000000000000..3750ddda25d10
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_empty_prompt.tsx
@@ -0,0 +1,73 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FunctionComponent } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiEmptyPrompt, EuiSpacer, EuiLink } from '@elastic/eui';
+import { useKibana } from '../../../../shared_imports';
+import { usePipelineProcessorsContext } from '../context';
+import { AddProcessorButton } from './add_processor_button';
+import { OnDoneLoadJsonHandler, LoadFromJsonButton } from './load_from_json';
+
+const i18nTexts = {
+  emptyPromptTitle: i18n.translate('xpack.ingestPipelines.pipelineEditor.emptyPrompt.title', {
+    defaultMessage: 'Add your first processor',
+  }),
+};
+
+export interface Props {
+  onLoadJson: OnDoneLoadJsonHandler;
+}
+
+export const ProcessorsEmptyPrompt: FunctionComponent<Props> = ({ onLoadJson }) => {
+  const { onTreeAction } = usePipelineProcessorsContext();
+  const { services } = useKibana();
+
+  return (
+    <EuiEmptyPrompt
+      title={<h2>{i18nTexts.emptyPromptTitle}</h2>}
+      data-test-subj="processorsEmptyPrompt"
+      body={
+        <p>
+          <FormattedMessage
+            id="xpack.ingestPipelines.pipelineEditor.emptyPrompt.description"
+            defaultMessage="Processors are used to pre-process documents before indexing. {learnMoreLink}"
+            values={{
+              learnMoreLink: (
+                <EuiLink
+                  href={services.documentation.getEsDocsBasePath() + '/ingest-processors.html'}
+                  target="_blank"
+                  external
+                >
+                  {i18n.translate(
+                    'xpack.ingestPipelines.pipelineEditor.processorsDocumentationLink',
+                    {
+                      defaultMessage: 'Learn more.',
+                    }
+                  )}
+                </EuiLink>
+              ),
+            }}
+          />
+        </p>
+      }
+      actions={
+        <>
+          <AddProcessorButton
+            onClick={() => {
+              onTreeAction({ type: 'addProcessor', payload: { target: ['processors'] } });
+            }}
+          />
+
+          <EuiSpacer size="m" />
+
+          <LoadFromJsonButton onDone={onLoadJson} />
+        </>
+      }
+    />
+  );
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/processors_header.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_header.tsx
similarity index 78%
rename from x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/processors_header.tsx
rename to x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_header.tsx
index 43477affa8d94..24f3207d6bea4 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/processors_header.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_header.tsx
@@ -9,21 +9,32 @@ import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiText, EuiTitle } from '@elastic/
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { useKibana } from '../../../shared_imports';
+import { useKibana } from '../../../../shared_imports';
 
-import {
-  LoadFromJsonButton,
-  OnDoneLoadJsonHandler,
-  TestPipelineActions,
-} from '../pipeline_processors_editor';
+import { LoadFromJsonButton, OnDoneLoadJsonHandler, TestPipelineActions } from './';
 
 export interface Props {
   onLoadJson: OnDoneLoadJsonHandler;
+  hasProcessors: boolean;
 }
 
-export const ProcessorsHeader: FunctionComponent<Props> = ({ onLoadJson }) => {
+export const ProcessorsHeader: FunctionComponent<Props> = ({ onLoadJson, hasProcessors }) => {
   const { services } = useKibana();
 
+  const ProcessorTitle: FunctionComponent = () => (
+    <EuiTitle size="s">
+      <h3>
+        {i18n.translate('xpack.ingestPipelines.pipelineEditor.processorsTreeTitle', {
+          defaultMessage: 'Processors',
+        })}
+      </h3>
+    </EuiTitle>
+  );
+
+  if (!hasProcessors) {
+    return <ProcessorTitle />;
+  }
+
   return (
     <EuiFlexGroup
       alignItems="center"
@@ -34,13 +45,7 @@ export const ProcessorsHeader: FunctionComponent<Props> = ({ onLoadJson }) => {
       <EuiFlexItem grow={false}>
         <EuiFlexGroup gutterSize="xs">
           <EuiFlexItem grow={false}>
-            <EuiTitle size="s">
-              <h3>
-                {i18n.translate('xpack.ingestPipelines.pipelineEditor.processorsTreeTitle', {
-                  defaultMessage: 'Processors',
-                })}
-              </h3>
-            </EuiTitle>
+            <ProcessorTitle />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <LoadFromJsonButton onDone={onLoadJson} />
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/tree_node.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/tree_node.tsx
index e9008e6f5b693..3a8299c017d8d 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/tree_node.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/tree_node.tsx
@@ -70,6 +70,7 @@ export const TreeNode: FunctionComponent<Props> = ({
         />
         <AddProcessorButton
           data-test-subj={stringSelector}
+          renderButtonAsLink
           onClick={() =>
             onAction({
               type: 'addProcessor',
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.tsx
index 8b344a137f3a8..ffc0a1459b791 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.tsx
@@ -99,7 +99,7 @@ export const ProcessorsTree: FunctionComponent<Props> = memo((props) => {
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EuiFlexGroup responsive={false} alignItems="flexStart" gutterSize="none">
-          <EuiFlexItem data-test-subj={selectorToDataTestSubject(baseSelector)}>
+          <EuiFlexItem data-test-subj={selectorToDataTestSubject(baseSelector)} grow={false}>
             {!processors.length && (
               <DropZoneButton
                 data-test-subj="dropButtonEmptyTree"
@@ -121,6 +121,7 @@ export const ProcessorsTree: FunctionComponent<Props> = memo((props) => {
               onClick={() => {
                 onAction({ type: 'addProcessor', payload: { target: baseSelector } });
               }}
+              renderButtonAsLink
             />
           </EuiFlexItem>
         </EuiFlexGroup>
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/index.ts
index c462b19c79327..ca5184da25a07 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/index.ts
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/index.ts
@@ -15,3 +15,5 @@ export { OnUpdateHandlerArg, OnUpdateHandler } from './types';
 export { SerializeResult } from './serialize';
 
 export { LoadFromJsonButton, OnDoneLoadJsonHandler, TestPipelineActions } from './components';
+
+export { PipelineProcessorsEditor } from './pipeline_processors_editor';
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.scss b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.scss
similarity index 100%
rename from x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.scss
rename to x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.scss
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.tsx
new file mode 100644
index 0000000000000..beb165973d3cd
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.tsx
@@ -0,0 +1,66 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiSpacer, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+
+import { usePipelineProcessorsContext } from './context';
+import {
+  ProcessorsEmptyPrompt,
+  OnFailureProcessorsTitle,
+  ProcessorsHeader,
+  OnDoneLoadJsonHandler,
+} from './components';
+import { ProcessorsEditor, GlobalOnFailureProcessorsEditor } from './editors';
+
+import './pipeline_processors_editor.scss';
+
+interface Props {
+  onLoadJson: OnDoneLoadJsonHandler;
+}
+
+export const PipelineProcessorsEditor: React.FunctionComponent<Props> = ({ onLoadJson }) => {
+  const {
+    state: { processors: allProcessors },
+  } = usePipelineProcessorsContext();
+
+  const {
+    state: { processors, onFailure },
+  } = allProcessors;
+
+  const showEmptyPrompt = processors.length === 0 && onFailure.length === 0;
+
+  let content: React.ReactNode;
+
+  if (showEmptyPrompt) {
+    content = <ProcessorsEmptyPrompt onLoadJson={onLoadJson} />;
+  } else {
+    content = (
+      <>
+        <ProcessorsEditor />
+
+        <EuiSpacer size="s" />
+
+        <OnFailureProcessorsTitle />
+
+        <GlobalOnFailureProcessorsEditor />
+      </>
+    );
+  }
+
+  return (
+    <div className="pipelineProcessorsEditor">
+      <EuiFlexGroup gutterSize="m" responsive={false} direction="column">
+        <EuiFlexItem grow={false}>
+          <ProcessorsHeader onLoadJson={onLoadJson} hasProcessors={processors.length > 0} />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false} className="pipelineProcessorsEditor__container">
+          {content}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
+  );
+};