Markdown Support in OpenWebUI Embedded

October 22, 2025 · View on GitHub

Overview

The openwebui-chat component supports rendering Markdown content using ngx-markdown.

Installation

The markdown dependencies are automatically installed with the library:

npm install ngx-open-web-ui-chat

Required peer dependencies:

ngx-markdown: ^19.0.0
marked: ^15.0.0

Usage

Basic Usage

Markdown is enabled by default. Simply use the component:

import { Component } from '@angular/core';
import { OpenwebuiChatComponent } from 'openwebui-embedded';

@Component({
  standalone: true,
  imports: [OpenwebuiChatComponent],
  template: `
    <openwebui-chat
      [endpoint]="'https://your-openwebui-instance.com'"
      [modelId]="'your-model-id'"
      [apiKey]="'your-api-key'"
    ></openwebui-chat>
  `
})
export class AppComponent {}

Disabling Markdown

To display plain text without markdown rendering:

<openwebui-chat
  [endpoint]="'https://your-openwebui-instance.com'"
  [modelId]="'your-model-id'"
  [apiKey]="'your-api-key'"
  [enableMarkdown]="false"
></openwebui-chat>

Explicitly Enabling Markdown

<openwebui-chat
  [endpoint]="'https://your-openwebui-instance.com'"
  [modelId]="'your-model-id'"
  [apiKey]="'your-api-key'"
  [enableMarkdown]="true"
></openwebui-chat>

Supported Markdown Features

When markdown is enabled, the following features are supported:

Headers

# H1
## H2
### H3
#### H4
##### H5
###### H6

Emphasis

*italic* or _italic_
**bold** or __bold__
***bold italic*** or ___bold italic___
~~strikethrough~~

Lists

- Unordered item 1
- Unordered item 2
  - Nested item

1. Ordered item 1
2. Ordered item 2
   1. Nested item

Links

[Link text](https://example.com)

Images

![Alt text](https://example.com/image.png)

Code Blocks

Inline `code` with backticks

\`\`\`javascript
const example = 'code block';
console.log(example);
\`\`\`

Blockquotes

> This is a blockquote
> spanning multiple lines

Tables

| Header 1 | Header 2 |
|----------|----------|
| Cell 1   | Cell 2   |
| Cell 3   | Cell 4   |

Horizontal Rules

---
***
___

Configuration Options

Component Inputs

Input	Type	Default	Description
`endpoint`	`string`	required	OpenWebUI instance URL
`modelId`	`string`	required	Model identifier
`apiKey`	`string`	required	API key for authentication
`enableMarkdown`	`boolean`	`true`	Enable/disable markdown rendering
`debug`	`boolean`	`false`	Enable debug logging
`style`	`Partial<CSSStyleDeclaration>`	`undefined`	Custom CSS styles

Examples

Example 1: AI Assistant with Markdown

import { Component } from '@angular/core';
import { OpenwebuiChatComponent } from 'openwebui-embedded';

@Component({
  standalone: true,
  imports: [OpenwebuiChatComponent],
  template: `
    <div class="app-container">
      <h1>AI Assistant</h1>
      <openwebui-chat
        [endpoint]="'https://ai.example.com'"
        [modelId]="'llama3'"
        [apiKey]="'sk-abc123'"
        [enableMarkdown]="true"
        [debug]="true"
      ></openwebui-chat>
    </div>
  `
})
export class AppComponent {}

Example 2: Plain Text Chat

<openwebui-chat
  [endpoint]="'https://ai.example.com'"
  [modelId]="'llama3'"
  [apiKey]="'sk-abc123'"
  [enableMarkdown]="false"
></openwebui-chat>

Example 3: Dynamic Markdown Toggle

import { Component, signal } from '@angular/core';
import { OpenwebuiChatComponent } from 'openwebui-embedded';

@Component({
  standalone: true,
  imports: [OpenwebuiChatComponent],
  template: `
    <div class="app-container">
      <label>
        <input type="checkbox" [(ngModel)]="markdownEnabled" />
        Enable Markdown
      </label>
      
      <openwebui-chat
        [endpoint]="'https://ai.example.com'"
        [modelId]="'llama3'"
        [apiKey]="'sk-abc123'"
        [enableMarkdown]="markdownEnabled()"
      ></openwebui-chat>
    </div>
  `
})
export class AppComponent {
  markdownEnabled = signal(true);
}

Styling Markdown Content

The component includes default styles for markdown elements. You can override them with custom CSS:

::ng-deep openwebui-chat {
  /* Style markdown headers */
  h1, h2, h3 {
    color: #333;
    margin: 16px 0 8px;
  }
  
  /* Style code blocks */
  pre {
    background: #f5f5f5;
    padding: 16px;
    border-radius: 4px;
    overflow-x: auto;
  }
  
  code {
    background: #f0f0f0;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
  }
  
  /* Style links */
  a {
    color: #007bff;
    text-decoration: none;
  }
  
  a:hover {
    text-decoration: underline;
  }
}