@tomaszatoo/ngx-md-editable

Edit Markdown. Render HTML. A lightweight Angular component for expressive content.

Features

• 🔄 Two-way binding using Angular’s model()
• 🧩 Compatible with FormControl and ngModel
• 🧠 Reactive signals for live HTML preview
• 🧱 Built-in Markdown → HTML conversion via MarkdownService
• 🧹 Auto-resizing text area for clean UX
• 🛡️ Sanitized HTML output for safe rendering
• 🏷️ Label and Placeholder inputs
• 🍀 Styles free

Install

npm i @tomaszatoo/ngx-md-editable

Example Usage

Template

<form [formGroup]="form">
  <md-editable formControlName="description"></md-editable>
</form>

or with standalone binding:

<md-editable [(markdown)]="markdownText"></md-editable>

Tip: use inline attribute to let component accept only inline text.

<md-editable [(markdown)]="markdownText" [inline]="true"></md-editable>

Component Logic

import { Component, signal } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-editor-demo',
  templateUrl: './editor-demo.component.html',
})
export class EditorDemoComponent {
  form = new FormGroup({
    description: new FormControl('**Hello Markdown!**'),
  });

  markdownText = signal('# Hello, Markdown world!');
}

Notes

• For usage examples and updates, visit Tomas Zato on Codeberg.

Licence

MIT (c) 2025 Tomas Zato