Was ist das?
AI Built Editor ist eine Editor-Library, die Rich-Content direkt im Browser
bearbeitbar macht – Text, Überschriften, Listen, Tabellen, Code-Blöcke, Bilder,
einklappbare Abschnitte. Sie wird mit einem einzigen <script>-Tag
eingebunden: kein npm, kein Bundler, kein Server.
Das Bemerkenswerte ist nicht die Funktionsliste, sondern was darunter liegt. Ein Editor, der sich beim Tippen richtig anfühlt, ist eines der undankbarsten Probleme der Frontend-Entwicklung: Der Browser will den Inhalt selbst verwalten, die Library will es besser wissen, und der Cursor sitzt am Ende immer an der falschen Stelle. Diese Library löst das mit einem eigenen Dokumentmodell – und ist damit ein handfester Beleg dafür, was mit KI heute in kurzer Zeit entsteht.
Funktionen
Zwei Bedienmodi
Power-User sehen die Syntax, sobald der Cursor auf der Zeile steht. Im End-User-Modus bleibt sie dauerhaft verborgen – sichtbar ist nur das fertige Ergebnis, bedient über eine Toolbar.
Reiche Inhalte
Tabellen in zwei Schreibweisen, Code-Blöcke mit Syntax-Highlighting, Bilder, Links, Zitate und einklappbare Abschnitte.
Erweiterbare Syntax
Jedes Element ist eine eigene Spec-Klasse. Ein neues Element heißt: eine Datei ergänzen – die Engine bleibt unangetastet.
Eigene Kurzbefehle
Eigene Inline-Ersetzungen per JSON definieren: (i) wird zum Info-Icon, ((Text)) zu dezent gesetztem Text.
Themes
Vier mitgelieferte Designs, hell und dunkel – oder Ihr eigenes CSS. Zur Laufzeit umschaltbar.
So ist es entstanden
- Architektur zuerst: Dokumentmodell, Transaktionen und Rendering auf Papier festgelegt
- Zerlegung in zehn Schritte – jeder mit eigener Spezifikation und eigener Testseite
- Die KI baut Schritt für Schritt; jeder Schritt ist lauffähig, bevor der nächste beginnt
- Ablauf: Spezifikation → Implementierung → Testseite → nächster Schritt
Gut zu wissen
Der Schlüssel ist nicht das Prompten, sondern die Zerlegung. Wer eine KI bittet, „einen Editor zu bauen“, bekommt etwas, das nach fünf Minuten Tippen auseinanderfällt. Wer zehn Schritte spezifiziert und jeden einzeln absichert, bekommt eine Library, die trägt.
Genau diese Arbeitsweise bringe ich in Kundenprojekte ein: nicht die KI ersetzt die Entwicklung, sondern eine saubere Spezifikation macht die KI zum schnellen und verlässlichen Werkzeug. Das Ergebnis ist normaler Code, den Sie lesen, prüfen und selbst weiterentwickeln können.
Was kostet so ein Projekt?
Festpreis nach Spezifikation · die Zerlegung in Schritte ist Teil des Angebots. Der Preis hängt vom Umfang ab und wird nach einem Erstgespräch individuell eingeschätzt – entscheidend ist, wie klar sich das Vorhaben in abnehmbare Schritte zerlegen lässt.
Ist mit KI geschriebener Code schlechterer Code?
Nicht, wenn die Architektur vorab festgelegt und jeder Schritt getestet wird. Diese Library hat ein sauber getrenntes Modell, Transaktionen und Rendering – die gleiche Struktur, die ein von Hand geschriebener Editor hätte. Der Unterschied liegt im Tempo, nicht in der Qualität.
Warum keine fertige Editor-Library?
Weil bekannte Editoren große Abhängigkeiten mitbringen, einen Build-Schritt erzwingen und
sich bei eigener Syntax nur mühsam biegen lassen. Diese Library ist ein <script>-Tag
und gehört Ihnen komplett – genau das ist mit KI wirtschaftlich geworden.
Kann ich sie in meine Anwendung einbauen?
Ja. Ein Container-Element, die gewünschten Syntax-Elemente und der Inhalt als Text genügen. Der Inhalt wird als Markdown gelesen und geschrieben, lässt sich also einfach speichern – in einer Datei ebenso wie in einer Datenbank.
Ist das fertig oder noch in Entwicklung?
Die Library läuft und ist als Live-Demo testbar; sie befindet sich in der Erprobungsphase. Für einen Einsatz bei Ihnen wird sie auf Ihren Anwendungsfall zugeschnitten und mitgetestet.
Wofür?
Der Machbarkeitsbeweis
Wenn eine Editor-Engine in Tagen entsteht, dann auch das Werkzeug, das in Ihrem Betrieb seit Jahren auf der Wunschliste steht.
Redaktion in eigenen Apps
Wissensbasen, Dokumentation, Notizen und Berichte direkt in Ihrer Anwendung bearbeiten – ohne zweites System.
Nutzer ohne Technikbezug
Der End-User-Modus versteckt jede Syntax: Wer eine Textverarbeitung bedienen kann, kann auch diesen Editor bedienen.
Oberfläche für KI-Inhalte
Von KI erzeugte Texte prüfen und überarbeiten – im gleichen Markdown-Format, in dem Sprachmodelle ohnehin schreiben.
Was der Editor beherrscht
- Text: Überschriften, Absätze, fett, kursiv, durchgestrichen, Inline-Code
- Struktur: verschachtelte Listen (Tab/Shift+Tab), Zitate, Trennlinien
- Tabellen: Pipe-Tabellen mit Spaltenausrichtung sowie eine einfache Schreibweise ohne Sonderzeichen
- Code: umschlossene Blöcke mit Sprachangabe, optional mit Syntax-Highlighting
- Einklappbare Abschnitte: lange Dokumente bleiben übersichtlich
- Bilder und Links: per Dialog eingefügt und später per Rechtsklick wieder bearbeitbar
Maßgeschneidert für Ihre Anwendung
Die Library ist kein geschlossenes Produkt, sondern ein Baukasten. Für einen Einsatz bei Ihnen wird genau das zusammengestellt, was Sie brauchen:
- Nur die Syntax-Elemente laden, die in Ihrem Kontext sinnvoll sind
- Eigene Elemente für Ihre Fachsprache – als zusätzliche Spec-Klasse
- Toolbar und Rechtsklick-Menü nach Ihrem Bedarf zusammengestellt
- Theme im Design Ihrer Anwendung, hell oder dunkel
- Speicherung als Markdown – in Dateien, Datenbank oder Ihrem bestehenden System
Architektur & Kontrolle: Ein einzelnes contenteditable-Element,
aber nichts wird dem Browser überlassen: Die Library führt ein eigenes
Dokumentmodell, wendet jede Eingabe als Transaktion darauf an,
baut die Anzeige neu auf und setzt den Cursor anschließend explizit aus dem Modell zurück.
Kein Framework, kein Build-Schritt, kein Server – der gesamte Code läuft im Browser
und liegt bei Ihnen.
Tech-Stack
Vanilla JavaScript • contenteditable • eigenes Dokumentmodell • Markdown • CSS-Themes • highlight.js (optional)
Selbst ausprobieren
Die Demo läuft komplett im Browser – tippen Sie los und sehen Sie, wie sich Syntax in fertigen Inhalt verwandelt.
Live-Demo testenAuf einen Blick
<script>-Tag – kein npm, kein Bundler, kein ServerMehr als ein Editor: Dieses Projekt zeigt die Arbeitsweise hinter meinen Apps, die arbeiten und meiner Automatisierung – wie das im Detail abläuft, beschreibt der Beitrag AI-first-Entwicklung steigert Produktivität.
Was würden Sie bauen, wenn es schnell ginge?
Erstgespräch kostenfrei – vor Ort in Bamberg/Nürnberg oder online.