diff --git a/src/workflows/manager/components/ActionEditor.js b/src/workflows/manager/components/ActionEditor.js
new file mode 100644
index 0000000..fbd0bed
--- /dev/null
+++ b/src/workflows/manager/components/ActionEditor.js
@@ -0,0 +1,253 @@
+import './actions/ReplyWithCR.js';
+
+import {css, html, LitElement, nothing} from 'lit';
+import {map} from 'lit/directives/map.js';
+import {createRef, ref} from 'lit/directives/ref.js';
+
+import * as pb from '../../proto/main_pb.js';
+
+// TODO: remove this and substitute it with proper localization.
+const kActionHeadings = {
+  0: 'Unknown action',
+  1: 'Reply',
+  2: 'Move to a forum',
+  3: 'Mark as duplicate of a thread',
+  4: 'Unmark duplicate',
+  5: 'Change thread attributes',
+  6: 'Reply with canned response',
+  16: 'Star/unstar thread',
+  17: 'Subscribe/unsubscribe to thread',
+  18: 'Vote thread',
+  19: 'Report thread',
+};
+const kSupportedActions = new Set([6]);
+const actionCases = Object.entries(pb.workflows.Action.ActionCase);
+
+export default class WFActionEditor extends LitElement {
+  static properties = {
+    action: {type: Object},
+    readOnly: {type: Boolean},
+    disableRemoveButton: {type: Boolean},
+    step: {type: Number},
+  };
+
+  static styles = css`
+    .action {
+      margin-bottom: 20px;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8px;
+    }
+
+    .step {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      min-height: 30px;
+      min-width: 30px;
+      margin-inline-end: 8px;
+
+      font-weight: 500;
+      font-size: 18px;
+
+      border-radius: 50%;
+      color: white;
+      background-color: #018786;
+    }
+
+    .title {
+      font-weight: 500;
+      margin: 0;
+      flex-grow: 1;
+    }
+
+    .header .select {
+      flex-grow: 1;
+      width: 300px;
+      padding: 4px;
+      margin-inline-end: 8px;
+      font-size: 16px;
+    }
+  `;
+
+  selectRef = createRef();
+
+  constructor() {
+    super();
+    this.action = new pb.workflows.Action();
+    this.readOnly = false;
+  }
+
+  renderActionTitle() {
+    if (this.readOnly) return html`<h3 class="title">${this._stepTitle()}</h3>`;
+
+    let selectedActionCase = this._actionCase;
+
+    return html`
+      <select ${ref(this.selectRef)}
+          class="select"
+          @change=${this._actionCaseChanged}>
+        ${map(actionCases, ([actionName, num]) => {
+      if (num == 0) return nothing;
+      return html`
+          <option value=${num} ?selected=${selectedActionCase == num}>
+            ${kActionHeadings[num] ?? actionName}
+          </option>
+        `;
+    })}
+      </select>
+    `;
+  }
+
+  renderSpecificActionEditor() {
+    switch (this._actionCase) {
+      case pb.workflows.Action.ActionCase.REPLY_WITH_CR_ACTION:
+        return html`
+          <wf-action-reply-with-cr
+              ?readOnly=${this.readOnly}
+              .action=${this.action.getReplyWithCrAction()}>
+          </wf-action-reply-with-cr>
+        `;
+
+      default:
+        return html`<p>This action has not yet been implemented.</p>`;
+    }
+  }
+
+  render() {
+    return [
+      html`
+        <div class="action">
+          <div class="header">
+            <div class="step">${this.step}</div>
+            ${this.renderActionTitle()}
+            ${
+          !this.readOnly ?
+              html`
+                <button
+                    ?disabled=${this.disableRemoveButton}
+                    @click=${this._remove}>
+                  Remove
+                </button>
+              ` :
+              nothing}
+          </div>
+          ${this.renderSpecificActionEditor()}
+        </div>
+      `,
+    ];
+  }
+
+  checkValidity() {
+    if (this.readOnly || !kSupportedActions.has(this._actionCase)) return true;
+    return this._specificActionEditor().checkValidity();
+  }
+
+  _actionCaseChanged() {
+    this._actionCaseString = this.selectRef.value.value;
+  }
+
+  _dispatchUpdateEvent() {
+    // Transmit to other components that the action has changed
+    const e = new Event('action-updated', {bubbles: true, composed: true});
+    this.renderRoot.dispatchEvent(e);
+  }
+
+  _remove() {
+    // Transmit to other components that the action has to be removed
+    const e = new Event('action-removed', {bubbles: true, composed: true});
+    this.renderRoot.dispatchEvent(e);
+  }
+
+  _stepTitle() {
+    return kActionHeadings[this._actionCase] ?? this._actionCase;
+  }
+
+  get _actionCase() {
+    return this.action.getActionCase();
+  }
+
+  set _actionCase(newCase) {
+    let value;
+    switch (newCase) {
+      case pb.workflows.Action.ActionCase.REPLY_ACTION:
+        value = new pb.workflows.Action.ReplyAction;
+        this.action.setReplyAction(value);
+        break;
+      case pb.workflows.Action.ActionCase.MOVE_ACTION:
+        value = new pb.workflows.Action.MoveAction;
+        this.action.setMoveAction(value);
+        break;
+      case pb.workflows.Action.ActionCase.MARK_DUPLICATE_ACTION:
+        value = new pb.workflows.Action.MarkDuplicateAction;
+        this.action.setMarkDuplicateAction(value);
+        break;
+      case pb.workflows.Action.ActionCase.UNMARK_DUPLICATE_ACTION:
+        value = new pb.workflows.Action.UnmarkDuplicateAction;
+        this.action.setUnmarkDuplicateAction(value);
+        break;
+      case pb.workflows.Action.ActionCase.ATTRIBUTE_ACTION:
+        value = new pb.workflows.Action.AttributeAction;
+        this.action.setAttributeAction(value);
+        break;
+      case pb.workflows.Action.ActionCase.REPLY_WITH_CR_ACTION:
+        value = new pb.workflows.Action.ReplyWithCRAction;
+        this.action.setReplyWithCrAction(value);
+        break;
+      case pb.workflows.Action.ActionCase.STAR_ACTION:
+        value = new pb.workflows.Action.StarAction;
+        this.action.setStarAction(value);
+        break;
+      case pb.workflows.Action.ActionCase.SUBSCRIBE_ACTION:
+        value = new pb.workflows.Action.SubscribeAction;
+        this.action.setSubscribeAction(value);
+        break;
+      case pb.workflows.Action.ActionCase.VOTE_ACTION:
+        value = new pb.workflows.Action.VoteAction;
+        this.action.setVoteAction(value);
+        break;
+      case pb.workflows.Action.ActionCase.REPORT_ACTION:
+        value = new pb.workflows.Action.ReportAction;
+        this.action.setReportAction(value);
+        break;
+      default:
+        this.action.clearReplyAction();
+        this.action.clearMoveAction();
+        this.action.clearMarkDuplicateAction();
+        this.action.clearUnmarkDuplicateAction();
+        this.action.clearAttributeAction();
+        this.action.clearReplyWithCrAction();
+        this.action.clearStarAction();
+        this.action.clearSubscribeAction();
+        this.action.clearVoteAction();
+        this.action.clearReportAction();
+    }
+
+    this.requestUpdate();
+    this._dispatchUpdateEvent();
+  }
+
+  // The same as _actionCase, but represented as a String instead of a Number
+  get _actionCaseString() {
+    return this._actionCase.toString();
+  }
+
+  set _actionCaseString(newCase) {
+    this._actionCase = parseInt(newCase);
+  }
+
+  _specificActionEditor() {
+    switch (this._actionCase) {
+      case pb.workflows.Action.ActionCase.REPLY_WITH_CR_ACTION:
+        return this.renderRoot.querySelector('wf-action-reply-with-cr');
+
+      default:
+        return null;
+    }
+  }
+}
+window.customElements.define('wf-action-editor', WFActionEditor);
diff --git a/src/workflows/manager/components/AddDialog.js b/src/workflows/manager/components/AddDialog.js
new file mode 100644
index 0000000..a2b5691
--- /dev/null
+++ b/src/workflows/manager/components/AddDialog.js
@@ -0,0 +1,94 @@
+import '@material/mwc-dialog/mwc-dialog.js';
+import '@material/web/button/text-button.js';
+import '@material/web/button/tonal-button.js';
+import './WorkflowEditor.js';
+
+import {css, html, LitElement} from 'lit';
+import {createRef, ref} from 'lit/directives/ref.js';
+
+import * as pb from '../../proto/main_pb.js';
+
+export default class WFAddDialog extends LitElement {
+  static properties = {
+    open: {type: Boolean},
+  };
+
+  static styles = css`
+    :host {
+      --mdc-dialog-content-ink-color: var(--mdc-theme-on-surface, #000);
+    }
+  `;
+
+  workflowEditorRef = createRef();
+
+  constructor() {
+    super();
+    this.open = false;
+  }
+
+  render() {
+    return html`
+      <mwc-dialog
+          heading="New workflow"
+          ?open=${this.open}
+          @opening=${this._openingDialog}
+          @closing=${this._closingDialog}
+          @closed=${this._closedDialog}>
+        <wf-workflow-editor ${ref(this.workflowEditorRef)}>
+        </wf-workflow-editor>
+        <md-tonal-button
+            slot="primaryAction"
+            label="Add"
+            @click=${this._save}>
+        </md-tonal-button>
+        <md-text-button
+            slot="secondaryAction"
+            dialogAction="cancel"
+            label="Cancel">
+        </md-text-button>
+      </mwc-dialog>
+    `;
+  }
+
+  firstUpdated() {
+    this._resetWorkflow();
+  }
+
+  _resetWorkflow() {
+    this.workflowEditorRef.value.workflow = this._defaultWorkflow();
+  }
+
+  _getWorkflow() {
+    return this.workflowEditorRef.value.workflow;
+  }
+
+  _defaultWorkflow() {
+    let wf = new pb.workflows.Workflow();
+    let action = new pb.workflows.Action();
+    let rAction = new pb.workflows.Action.ReplyWithCRAction();
+    action.setReplyWithCrAction(rAction);
+    wf.addActions(action);
+    return wf;
+  }
+
+  _openingDialog() {
+    this.open = true;
+  }
+
+  _closingDialog() {
+    this.open = false;
+  }
+
+  _closedDialog(e) {
+    if (e.detail?.action === 'cancel') this._resetWorkflow();
+  }
+
+  _save() {
+    let success = this.workflowEditorRef.value.save();
+    if (success) {
+      this.open = false;
+      this._resetWorkflow();
+    }
+  }
+}
+window.customElements.define('wf-add-dialog', WFAddDialog);
diff --git a/src/workflows/manager/components/List.js b/src/workflows/manager/components/List.js
new file mode 100644
index 0000000..09220b1
--- /dev/null
+++ b/src/workflows/manager/components/List.js
@@ -0,0 +1,8 @@
+import {html, LitElement} from 'lit';
+
+export default class WFList extends LitElement {
+  render() {
+    return html`<p>Temporary placeholder where the workflows list will exist.</p>`;
+  }
+}
+window.customElements.define('wf-list', WFList);
diff --git a/src/workflows/manager/components/WorkflowEditor.js b/src/workflows/manager/components/WorkflowEditor.js
new file mode 100644
index 0000000..7da2a4d
--- /dev/null
+++ b/src/workflows/manager/components/WorkflowEditor.js
@@ -0,0 +1,97 @@
+import '@material/web/button/outlined-button.js';
+import './ActionEditor.js';
+
+import {html, LitElement, nothing} from 'lit';
+import {repeat} from 'lit/directives/repeat.js';
+
+import * as pb from '../../proto/main_pb.js';
+
+export default class WFWorkflowEditor extends LitElement {
+  static properties = {
+    workflow: {type: Object},
+    readOnly: {type: Boolean},
+  };
+
+  constructor() {
+    super();
+    this.workflow = new pb.workflows.Workflow();
+    this.readOnly = false;
+  }
+
+  renderActions() {
+    return repeat(this._actions(), (action, i) => html`
+      <wf-action-editor
+          .action=${action}
+          ?readOnly=${this.readOnly}
+          ?disableRemoveButton=${this._actions().length <= 1}
+          step=${i + 1}
+          @action-removed=${() => this._removeAction(i)}>
+      </wf-action-editor>
+    `);
+  }
+
+  renderAddActionBtn() {
+    if (this.readOnly) return nothing;
+    return html`
+      <md-outlined-button
+          icon="add"
+          label="Add another action"
+          @click=${this._addAction}>
+      </md-outlined-button>
+    `;
+  }
+
+  render() {
+    return [
+      this.renderActions(),
+      this.renderAddActionBtn(),
+    ];
+  }
+
+  save() {
+    let allValid = true;
+    const actionEditors = this.renderRoot.querySelectorAll('wf-action-editor');
+    for (const editor of actionEditors) {
+      const isValid = editor.checkValidity();
+      if (!isValid) allValid = false;
+    }
+    // @TODO: Save if allValid === true
+    return allValid;
+  }
+
+  _actions() {
+    return this.workflow.getActionsList();
+  }
+
+  _addAction() {
+    let action = new pb.workflows.Action();
+    let rAction = new pb.workflows.Action.ReplyWithCRAction();
+    action.setReplyWithCrAction(rAction);
+    this.workflow.addActions(action);
+    this._dispatchUpdateEvent();
+  }
+
+  _removeAction(index) {
+    let actions = this.workflow.getActionsList();
+    actions.splice(index, 1);
+    this.workflow.setActionsList(actions);
+    this._dispatchUpdateEvent();
+  }
+
+  _updateAction(index, action) {
+    let actions = this.workflow.getActionsList();
+    actions[index] = action;
+    this.workflow.setActionsList(actions);
+    this._dispatchUpdateEvent();
+  }
+
+  _dispatchUpdateEvent() {
+    // Request an update for this component
+    this.requestUpdate();
+
+    // Transmit to other components that the workflow has changed
+    const e = new Event('workflow-updated', {bubbles: true, composed: true});
+    this.renderRoot.dispatchEvent(e);
+  }
+}
+window.customElements.define('wf-workflow-editor', WFWorkflowEditor);
diff --git a/src/workflows/manager/components/actions/ReplyWithCR.js b/src/workflows/manager/components/actions/ReplyWithCR.js
new file mode 100644
index 0000000..614a042
--- /dev/null
+++ b/src/workflows/manager/components/actions/ReplyWithCR.js
@@ -0,0 +1,135 @@
+import '@material/web/textfield/outlined-text-field.js';
+import '@material/web/switch/switch.js';
+import '@material/web/formfield/formfield.js';
+
+import {html, LitElement} from 'lit';
+import {createRef, ref} from 'lit/directives/ref.js';
+
+import {CCApi} from '../../../../common/api.js';
+import * as pb from '../../../proto/main_pb.js';
+
+export default class WFActionReplyWithCR extends LitElement {
+  static properties = {
+    action: {type: Object},
+    readOnly: {type: Boolean},
+  };
+
+  cannedResponseRef = createRef();
+  subscribeRef = createRef();
+  markAsAnswerRef = createRef();
+
+  constructor() {
+    super();
+    this.action = new pb.workflows.Action.ReplyWithCRAction;
+    // this._loadUserCannedResponses();
+  }
+
+  render() {
+    return html`
+      <p>
+        <md-outlined-text-field ${ref(this.cannedResponseRef)}
+            type="number"
+            label="Canned response ID"
+            required
+            value=${this._cannedResponseIdString}
+            ?readonly=${this.readOnly}
+            @input=${this._cannedResponseIdChanged}>
+        </md-outlined-text-field>
+      </p>
+      <p>
+        <md-formfield label="Subscribe to thread">
+          <md-switch ${ref(this.subscribeRef)}
+              ?selected=${this.subscribe}
+              ?disabled=${this.readOnly}
+              @click=${this._subscribeChanged}/>
+        </md-formfield>
+      </p>
+      <p>
+        <md-formfield label="Mark as answer">
+          <md-switch ${ref(this.markAsAnswerRef)}
+              ?selected=${this.markAsAnswer}
+              ?disabled=${this.readOnly}
+              @click=${this._markAsAnswerChanged}/>
+        </md-formfield>
+      </p>
+    `;
+  }
+
+  checkValidity() {
+    return this.cannedResponseRef.value.reportValidity();
+  }
+
+  _loadUserCannedResponses() {
+    if (window.USER_CANNED_RESPONSES_STARTED_TO_LOAD) return;
+
+    window.USER_CANNED_RESPONSES_STARTED_TO_LOAD = true;
+    let searchParams = new URLSearchParams(document.location.search);
+    let authuser = searchParams.get('authuser') ?? 0;
+
+    // @TODO: This isn't as simple as doing this because the request contains
+    // the wrong origin and fails.
+    CCApi('ListCannedResponses', {}, true, authuser).then(res => {
+      console.log(res);
+    });
+  }
+
+  _dispatchUpdateEvent() {
+    // Request an update for this component
+    this.requestUpdate();
+
+    // Transmit to other components that the action has changed
+    const e = new Event(
+        'replywithcr-action-updated', {bubbles: true, composed: true});
+    this.renderRoot.dispatchEvent(e);
+  }
+
+  _cannedResponseIdChanged() {
+    this._cannedResponseIdString = this.cannedResponseRef.value.value;
+  }
+
+  _subscribeChanged() {
+    this.subscribe = this.subscribeRef.value.selected;
+  }
+
+  _markAsAnswerChanged() {
+    this.markAsAnswer = this.markAsAnswerRef.value.selected;
+  }
+
+  get cannedResponseId() {
+    return this.action.getCannedResponseId() ?? 0;
+  }
+
+  set cannedResponseId(value) {
+    this.action.setCannedResponseId(value);
+    this._dispatchUpdateEvent();
+  }
+
+  get _cannedResponseIdString() {
+    let id = this.cannedResponseId;
+    if (id == 0) return '';
+    return id.toString();
+  }
+
+  set _cannedResponseIdString(value) {
+    this.cannedResponseId = parseInt(value);
+  }
+
+  get subscribe() {
+    return this.action.getSubscribe();
+  }
+
+  set subscribe(value) {
+    this.action.setSubscribe(value);
+    this._dispatchUpdateEvent();
+  }
+
+  get markAsAnswer() {
+    return this.action.getMarkAsAnswer();
+  }
+
+  set markAsAnswer(value) {
+    this.action.setMarkAsAnswer(value);
+    this._dispatchUpdateEvent();
+  }
+}
+window.customElements.define('wf-action-reply-with-cr', WFActionReplyWithCR);