diff --git a/webviews/logging/components/log_list.ts b/webviews/logging/components/log_list.ts
index ca526ff..19904b6 100644
--- a/webviews/logging/components/log_list.ts
+++ b/webviews/logging/components/log_list.ts
@@ -11,6 +11,7 @@
 import {
   LogField,
   LogHeadersData,
+  LogViewOptions,
   HeaderWidthChangeHandler
 } from '../src/fields';
 import {FilterExpression} from '../src/filter';
@@ -123,7 +124,8 @@
     private headerFields: LogHeadersData,
     shouldWrapLogs: boolean,
     onHeaderWidthChange: HeaderWidthChangeHandler,
-    private currentFilter: FilterExpression) {
+    private currentFilter: FilterExpression,
+    private options: LogViewOptions) {
     super();
     this.maxWidths = new Array(Object.keys(headerFields).length).fill(0);
     this.logHeader = new LogHeader(headerFields, onHeaderWidthChange);
@@ -209,7 +211,8 @@
   }
 
   private appendLogElement(log: LogRowData) {
-    const element = new LogRow(log, this.headerFields);
+    const element = new LogRow(
+      log, this.headerFields, this.options.columnFormatter);
     this.logRows = [...this.logRows, element];
     element.updateComplete
       .then(() => {
diff --git a/webviews/logging/components/log_row.ts b/webviews/logging/components/log_row.ts
index fdb7c1f..1e3af09 100644
--- a/webviews/logging/components/log_row.ts
+++ b/webviews/logging/components/log_row.ts
@@ -5,7 +5,7 @@
 import {ChildPart, html, LitElement} from 'lit';
 import {Directive, directive} from 'lit/directive.js';
 import {customElement, property, state} from 'lit/decorators.js';
-import {LogHeadersData} from '../src/fields';
+import {LogColumnFormatter, LogHeadersData} from '../src/fields';
 import {LogRowData} from '../src/log_data';
 
 class AttributeSetter extends Directive {
@@ -31,7 +31,10 @@
   private fields!: Record<string, any>;
   private dataAttributes!: Record<string, any>;
 
-  constructor(log: LogRowData, private headerFields: LogHeadersData) {
+  constructor(
+    log: LogRowData,
+    private headerFields: LogHeadersData,
+    private columnFormatter: LogColumnFormatter) {
     super();
     this.log = log;
     this.formatRow(this.log);
@@ -58,7 +61,7 @@
         title="${fieldKey === 'message' ? '' : content}"
         class="log-list-cell${fieldKey === 'message' ? ' msg-cell' : ''}"
       >
-        ${content}
+        ${this.columnFormatter(fieldKey, content)}
       </div>`;
   }
 
diff --git a/webviews/logging/components/view.ts b/webviews/logging/components/view.ts
index c8cb235..bb7c29b 100644
--- a/webviews/logging/components/view.ts
+++ b/webviews/logging/components/view.ts
@@ -8,6 +8,7 @@
 import { State } from '../src/state';
 import { LogList } from './log_list';
 import {ffxLogToLogRowData} from '../src/ffxLogToLogRow';
+import {LogViewOptions} from '../src/fields';
 
 export const RESUMING_LOG_STREAMING_LOG = 'Resuming log streaming, press [pause icon] to pause.';
 export const PAUSING_LOG_STREAMING_LOG = 'Playback has been paused, press [play icon] to resume.';
@@ -19,26 +20,33 @@
 
 export class LoggingView extends EventTarget {
   private logActionContainer: HTMLDivElement;
-  private logControl: LogControl;
+  private logControl?: LogControl;
   private logList: LogList;
   private logListContainer: HTMLDivElement;
   private logViewActions: LogViewActions;
 
   public static readonly externalActionRequestEvent: string = 'external-action-request-event';
 
-  constructor(private state: State, private root: HTMLElement) {
+  constructor(
+    private state: State,
+    private root: HTMLElement,
+    private options: LogViewOptions = {
+      columnFormatter: (_fieldName, text) => text,
+      showControls: true
+    }) {
     super();
     this.logList = new LogList(state.currentFields, state.shouldWrapLogs,
-      state.setHeaderWidth.bind(state), state.currentFilter);
-
-    this.logControl = new LogControl(this.state.currentFilterText);
-    this.logControl.addEventListener(LogControl.filterChangeEvent, (e) => {
-      const event = e as CustomEvent;
-      const { filter, text } = event.detail;
-      this.state.registerFilter(filter, text);
-      this.logControl.resultsMessage = filter.isEmpty() ? '' : `${this.logList.filterResultsCount} results`;
-
-    });
+      state.setHeaderWidth.bind(state), state.currentFilter, options);
+    if (this.options.showControls) {
+      this.logControl = new LogControl(this.state.currentFilterText);
+      this.logControl.addEventListener(LogControl.filterChangeEvent, (e) => {
+        const event = e as CustomEvent;
+        const { filter, text } = event.detail;
+        this.state.registerFilter(filter, text);
+        this.logControl!.resultsMessage =
+          filter.isEmpty() ? '' : `${this.logList.filterResultsCount} results`;
+      });
+    }
 
     this.state.addEventListener('filterChange', (e) => {
       const event = e as CustomEvent;
@@ -77,7 +85,7 @@
     this.logListContainer.id = 'log-list-container';
 
     this.root.appendChild(this.logActionContainer);
-    this.logActionContainer.appendChild(this.logControl);
+    if (this.logControl) {this.logActionContainer.appendChild(this.logControl);}
     this.logActionContainer.appendChild(this.logViewActions);
 
     this.root.appendChild(this.logListContainer);
@@ -98,7 +106,7 @@
   public reset() {
     this.state.reset();
     this.logList.reset();
-    this.logControl.reset();
+    this.logControl?.reset();
   }
 
   /**
diff --git a/webviews/logging/src/fields.ts b/webviews/logging/src/fields.ts
index 08a69e7..a708c12 100644
--- a/webviews/logging/src/fields.ts
+++ b/webviews/logging/src/fields.ts
@@ -10,7 +10,15 @@
 
 export type LogFieldData = {
   displayName: string,
-  width: string,
+  width: string
+};
+
+export type LogColumnFormatter =
+  (fieldName: string, text: string) => HTMLElement | string;
+
+export type LogViewOptions = {
+  columnFormatter: LogColumnFormatter,
+  showControls: boolean
 };
 
 export type LogHeadersData = Record<LogField, LogFieldData>;
diff --git a/webviews/logging/test/filter.test.ts b/webviews/logging/test/filter.test.ts
index 3315e35..36735b2 100644
--- a/webviews/logging/test/filter.test.ts
+++ b/webviews/logging/test/filter.test.ts
@@ -8,6 +8,9 @@
 import { FilterExpression, OrExpression, parseFilter } from '../src/filter';
 import {ffxLogToLogRowData} from '../src/ffxLogToLogRow';
 import {State} from '../src/state';
+import {LogColumnFormatter} from '../src/fields';
+
+const columnFormatter: LogColumnFormatter = (_fieldName, text) => text;
 
 before(() => {
   chai.should();
@@ -55,7 +58,7 @@
             },
             timestamp: 12345,
             version: 1
-          }, false)!, state.currentFields),
+          }, false)!, state.currentFields, columnFormatter),
       new LogRow( //2
         ffxLogToLogRowData(
           {
@@ -92,7 +95,7 @@
             },
             timestamp: 12345,
             version: 1
-          }, false)!, state.currentFields),
+          }, false)!, state.currentFields, columnFormatter),
       new LogRow(
         ffxLogToLogRowData(
           {
@@ -129,7 +132,7 @@
             },
             timestamp: 12345,
             version: 1
-          }, false)!, state.currentFields),
+          }, false)!, state.currentFields, columnFormatter),
     ];
 
     for (const index in testLitElements) {
diff --git a/webviews/logging/test/log_header.test.ts b/webviews/logging/test/log_header.test.ts
index bc1f570..055d694 100644
--- a/webviews/logging/test/log_header.test.ts
+++ b/webviews/logging/test/log_header.test.ts
@@ -8,6 +8,12 @@
 import { LogField } from '../src/fields';
 import {LogHeader} from '../components/log_header';
 import {LogList} from '../components/log_list';
+import {LogViewOptions} from '../src/fields';
+
+const logOptions: LogViewOptions = {
+  columnFormatter: (_fieldName, text) => text,
+  showControls: true
+};
 
 before(() => {
   chai.should();
@@ -24,7 +30,7 @@
     document.body.appendChild(root);
     state = new State();
     logList = new LogList(state.currentFields, state.shouldWrapLogs,
-      state.setHeaderWidth.bind(state), state.currentFilter);
+      state.setHeaderWidth.bind(state), state.currentFilter, logOptions);
     root.appendChild(logList);
     await logList.updateComplete;
     logHeader = logList.shadowRoot!.children[0] as LogHeader;
diff --git a/webviews/logging/test/log_list.test.ts b/webviews/logging/test/log_list.test.ts
index 0136a2a..b8aed93 100644
--- a/webviews/logging/test/log_list.test.ts
+++ b/webviews/logging/test/log_list.test.ts
@@ -12,6 +12,12 @@
 import {MemoryStore, State} from '../src/state';
 import {LitElement} from 'lit';
 import {ffxLogToLogRowData} from '../src/ffxLogToLogRow';
+import {LogViewOptions} from '../src/fields';
+
+const logOptions: LogViewOptions = {
+  columnFormatter: (_fieldName, text) => text,
+  showControls: true
+};
 
 before(function () {
   chai.should();
@@ -36,7 +42,7 @@
     it('crates a new empty view', async () => {
       const logsList = new LogList(
         state.currentFields, state.shouldWrapLogs,
-        state.setHeaderWidth.bind(state), state.currentFilter);
+        state.setHeaderWidth.bind(state), state.currentFilter, logOptions);
       root.appendChild(logsList);
       await logsList.updateComplete;
       logsList.shadowRoot!.children.length.should.equal(1);
@@ -51,7 +57,7 @@
       state.shouldWrapLogs = true;
       let logList = new LogList(
         state.currentFields, state.shouldWrapLogs,
-        state.setHeaderWidth.bind(state), state.currentFilter);
+        state.setHeaderWidth.bind(state), state.currentFilter, logOptions);
       root.appendChild(logList);
       await logList.updateComplete;
       logList.hasAttribute(WRAP_LOG_TEXT_ATTR).should.be.true;
@@ -59,7 +65,7 @@
       state.shouldWrapLogs = false;
       logList = new LogList(
         state.currentFields, state.shouldWrapLogs,
-        state.setHeaderWidth.bind(state), state.currentFilter);
+        state.setHeaderWidth.bind(state), state.currentFilter, logOptions);
       logList.hasAttribute(WRAP_LOG_TEXT_ATTR).should.be.false;
     });
   });
@@ -68,7 +74,7 @@
     it('appends a log', async () => {
       const logsList = new LogList(
         state.currentFields, state.shouldWrapLogs,
-        state.setHeaderWidth.bind(state), state.currentFilter);
+        state.setHeaderWidth.bind(state), state.currentFilter, logOptions);
 
       document.body.appendChild(logsList);
       await logsList.updateComplete;
@@ -106,7 +112,7 @@
       }), 'moniker:core/bar');
       const logsList = new LogList(
         state.currentFields, state.shouldWrapLogs,
-        state.setHeaderWidth.bind(state), state.currentFilter);
+        state.setHeaderWidth.bind(state), state.currentFilter, logOptions);
       root.appendChild(logsList);
 
       logsList.addLog(ffxLogToLogRowData(logDataForTest('core/foo'))!);
@@ -123,7 +129,7 @@
     it('handles ffx events', async () => {
       const logsList = new LogList(
         state.currentFields, state.shouldWrapLogs,
-        state.setHeaderWidth.bind(state), state.currentFilter);
+        state.setHeaderWidth.bind(state), state.currentFilter, logOptions);
       let moniker = constant.FFX_MONIKER;
       const msg = 'Logger lost connection to target. Retrying...';
       logsList.addLog(ffxLogToLogRowData(ffxEventForTest('TargetDisconnected'))!);
@@ -149,7 +155,7 @@
     it('handles malformed logs', async () => {
       const logsList = new LogList(
         state.currentFields, state.shouldWrapLogs,
-        state.setHeaderWidth.bind(state), state.currentFilter);
+        state.setHeaderWidth.bind(state), state.currentFilter, logOptions);
       const msg = 'Malformed target log: oh no something went wrong';
       logsList.addLog(ffxLogToLogRowData(malformedLogForTest('oh no something went wrong'))!);
 
@@ -171,7 +177,7 @@
     it('detects user hovering logs', () => {
       const view = new LogList(
         state.currentFields, state.shouldWrapLogs,
-        state.setHeaderWidth.bind(state), state.currentFilter);
+        state.setHeaderWidth.bind(state), state.currentFilter, logOptions);
       view.addLog(ffxLogToLogRowData(logDataForTest('core/foo'))!);
       const scrollArea = view.parentElement;
       scrollArea?.matches(':hover').should.equal(false);
@@ -184,7 +190,7 @@
     it('resets the log list', async () => {
       const logsList = new LogList(
         state.currentFields, state.shouldWrapLogs,
-        state.setHeaderWidth.bind(state), state.currentFilter);
+        state.setHeaderWidth.bind(state), state.currentFilter, logOptions);
       root.appendChild(logsList);
       logsList.addLog(ffxLogToLogRowData(logDataForTest('core/foo'))!);
       await logsList.updateComplete;
diff --git a/webviews/logging/test/log_row.test.ts b/webviews/logging/test/log_row.test.ts
index cb613a4..04099cd 100644
--- a/webviews/logging/test/log_row.test.ts
+++ b/webviews/logging/test/log_row.test.ts
@@ -10,6 +10,9 @@
 import { messageForEvent } from '../src/format_log_text';
 import {ffxLogToLogRowData} from '../src/ffxLogToLogRow';
 import {State} from '../src/state';
+import {LogColumnFormatter} from '../src/fields';
+
+const columnFormatter: LogColumnFormatter = (_fieldName, text) => text;
 
 before(() => {
   chai.should();
@@ -64,7 +67,7 @@
             keys: null,
             printf: null,
           }
-        }), false)!, state.currentFields);
+        }), false)!, state.currentFields, columnFormatter);
       document.body.appendChild(logRow);
       await logRow.updateComplete;
       const testFields = [
@@ -96,7 +99,7 @@
             keys: null,
             printf: null,
           }
-        }), false)!, state.currentFields);
+        }), false)!, state.currentFields, columnFormatter);
       document.body.appendChild(logRow);
       await logRow.updateComplete;
       const testFields = [
@@ -115,6 +118,31 @@
       logRow.remove();
     });
 
+    it('formats html logs', async () => {
+      const logRow = new LogRow(
+        {fields: [{key: 'message', text: 'hello vscode'}]}
+        , {
+          'timestamp': {displayName: 'timestamp', width: ''},
+          'pid': {displayName: 'pid', width: ''},
+          'tid': {displayName: 'tid', width: ''},
+          'tags': {displayName: 'tags', width: ''},
+          'moniker': {displayName: 'moniker', width: ''},
+          'severity': {displayName: 'severity', width: ''},
+          'message': {displayName: 'messagepw', width: ''},
+        }, (fieldName, text) => {
+          const el = document.createElement('span');
+          if (fieldName === 'message') {
+            el.innerHTML = text.replace('vscode', '<b>vscode</b>');
+          }
+          return el;
+        });
+      document.body.appendChild(logRow);
+      await logRow.updateComplete;
+      const msgField = logRow.children[0].children[6] as HTMLElement;
+      msgField.querySelector('b')!.innerText.should.equal('vscode');
+      logRow.remove();
+    });
+
     it('formats structured logs', async () => {
       const logRow = new LogRow(ffxLogToLogRowData(
         logDataForTest({
@@ -128,7 +156,7 @@
             },
             printf: null,
           }
-        }), false)!, state.currentFields);
+        }), false)!, state.currentFields, columnFormatter);
       document.body.appendChild(logRow);
       await logRow.updateComplete;
       const testFields =
@@ -153,7 +181,7 @@
               args: ['Fuchsia', 1]
             },
           }
-        }), false)!, state.currentFields);
+        }), false)!, state.currentFields, columnFormatter);
       document.body.appendChild(logRow);
       await logRow.updateComplete;
       const testFields =
@@ -182,7 +210,7 @@
             keys: null,
             printf: null,
           }
-        }), false)!, state.currentFields);
+        }), false)!, state.currentFields, columnFormatter);
       document.body.appendChild(logRow);
       await logRow.updateComplete;
       const testFields =
@@ -198,7 +226,9 @@
     it('formats logging started events', async () => {
       let logRow = new LogRow(
         ffxLogToLogRowData(
-          ffxEventForTest('LoggingStarted'), false)!, state.currentFields);
+          ffxEventForTest('LoggingStarted'), false)!,
+        state.currentFields,
+        columnFormatter);
       document.body.appendChild(logRow);
       await logRow.updateComplete;
       let moniker = constant.FFX_MONIKER;
@@ -212,7 +242,9 @@
 
       logRow = new LogRow(
         ffxLogToLogRowData(
-          ffxEventForTest('LoggingStarted'), true)!, state.currentFields);
+          ffxEventForTest('LoggingStarted'), true)!,
+        state.currentFields,
+        columnFormatter);
       document.body.appendChild(logRow);
       await logRow.updateComplete;
       msg = messageForEvent('LoggingStarted', true);
@@ -227,7 +259,9 @@
     it('formats target disconnected events', async () => {
       const logRow = new LogRow(
         ffxLogToLogRowData(
-          ffxEventForTest('TargetDisconnected'), false)!, state.currentFields);
+          ffxEventForTest('TargetDisconnected'), false)!,
+        state.currentFields,
+        columnFormatter);
       document.body.appendChild(logRow);
       await logRow.updateComplete;
       let moniker = constant.FFX_MONIKER;
@@ -243,7 +277,9 @@
     it('formats malformed log', async () => {
       const logRow = new LogRow(
         ffxLogToLogRowData(
-          malformedLogForTest('hello world'), false)!, state.currentFields);
+          malformedLogForTest('hello world'), false)!,
+        state.currentFields,
+        columnFormatter);
       document.body.appendChild(logRow);
       await logRow.updateComplete;
       let msg = 'Malformed target log: hello world';
@@ -263,7 +299,7 @@
         version: 0
       };
       const logRow = new LogRow(
-        ffxLogToLogRowData(data, false)!, state.currentFields);
+        ffxLogToLogRowData(data, false)!, state.currentFields, columnFormatter);
       document.body.appendChild(logRow);
       await logRow.updateComplete;
       const monikerEl = logRow.children[0].children[3] as HTMLElement;
diff --git a/webviews/logging/test/view.test.ts b/webviews/logging/test/view.test.ts
index 14141ce..0e5b7cc 100644
--- a/webviews/logging/test/view.test.ts
+++ b/webviews/logging/test/view.test.ts
@@ -12,9 +12,16 @@
 import { LogControl } from '../components/log_control';
 import { Filter } from '../src/filter';
 import { LogViewActions } from '../components/log_view_actions';
-import { WRAP_LOG_TEXT_ATTR } from '../components/log_list';
-import { LitElement } from 'lit';
 import { ffxLogToLogRowData } from '../src/ffxLogToLogRow';
+import {LogList, WRAP_LOG_TEXT_ATTR} from '../components/log_list';
+import {LitElement} from 'lit';
+import {LogViewOptions} from '../src/fields';
+
+const logOptions: LogViewOptions = {
+  columnFormatter: (_fieldName, text) => text,
+  showControls: false
+};
+
 before(function () {
   chai.should();
   chai.use(chaiDom);
@@ -105,6 +112,13 @@
       state.currentFilterText.should.deep.equal(filterText);
     });
 
+    it('log control and filter field can be disabled', async () => {
+      new LoggingView(state, root, logOptions);
+      let logView = root.getElementsByTagName('log-view')[0] as LogList;
+      await logView.updateComplete;
+      root.getElementsByTagName('log-control').length.should.equal(0);
+    });
+
     it('announces the number of filtered results', async () => {
       const view = new LoggingView(state, root);
       const logList = root.querySelector('log-view') as LitElement;