A premium Angular library that wraps Monaco Editor with beautiful themes, pattern detection UI, and coding interview preparation features
npm install @khlifiismail/monaco-pattern-editorA premium Angular library that wraps Monaco Editor (VS Code's editor) with beautiful themes, pattern detection UI, and coding interview preparation features.
β¨ Premium Monaco Themes - 9 carefully crafted themes for dark and light modes
π¨ Smooth Animations - Apple-inspired smooth transitions and effects
π― Pattern Detection UI - Visual feedback for coding patterns
π Complexity Analysis - Big-O notation badges
π‘ Progressive Hints - Multi-level hint system
β
Test Results - Beautiful test execution results panel
π Dark/Light Mode - Full theme switching support
π¦ Standalone Components - Works with Angular standalone apps
π Zero Configuration - Works out of the box
``bash`
npm install monaco-pattern-editor
`typescript
import { Component } from '@angular/core';
import { MonacoEditorComponent } from 'monaco-pattern-editor';
@Component({
selector: 'app-root',
standalone: true,
imports: [MonacoEditorComponent],
template:
[initialCode]="code"
[theme]="'obsidian-warmth'"
[height]="'600px'"
(codeChange)="onCodeChange($event)">
})
export class AppComponent {
code = 'console.log("Hello World!");';
onCodeChange(newCode: string) {
console.log('Code changed:', newCode);
}
}
`
Add global styles in your styles.scss:
`scss``
@import 'monaco-pattern-editor/styles/theme.scss';
Full documentation available at: https://github.com/KhlifiIsmail/Editor
MIT Β© Ismail Khlifi