Code
Edytor XML pokazuje kod i jego drzewo elementów obok siebie. Wszystko, co wpiszesz, od razu pojawia się w drzewie - elementy, atrybuty, tekst, komentarze, CDATA i przestrzenie nazw - a kliknięcie dowolnego węzła przenosi do jego miejsca w kodzie. Nazwy, wartości i tekst można też edytować bezpośrednio w drzewie, uruchamiać zapytania XPath i przekształcać dokument w JSON lub YAML.
Wszystko działa w przeglądarce. Dokumenty nie są nigdzie wysyłane, nie ma rejestracji ani reklam.
Znaczniki, atrybuty, wartości, encje, komentarze i CDATA we własnych kolorach, numery wierszy, znaczniki zamykające dodawane samoczynnie i przejrzysta lista problemów z wierszem i kolumną.
Zwijaj i rozwijaj elementy, oglądaj atrybuty, tekst, komentarze, instrukcje przetwarzania i przestrzenie nazw i śledź ścieżkę zaznaczonego węzła.
Zmieniaj nazwy elementów i atrybutów, wartości i tekst, dodawaj, przesuwaj i usuwaj elementy - zapisywane w kodzie jako małe zmiany, ze znakami specjalnymi w postaci encji.
Pole XPath 1.0 zaznacza pasujące węzły; wyszukiwanie znajduje nazwy, wartości i tekst. Prefiksy przestrzeni nazw dokumentu działają w XPath.
Żadne DTD, schemat ani encja zewnętrzna nie są nigdy ładowane, a żadna encja nie jest rozwijana, więc XXE i bomby encji nie działają.
Dodaj wcięcia lub zminifikuj dokument albo przekształć go w JSON lub YAML: atrybuty jako @name, tekst jako #text, powtarzające się elementy jako listy.
Każda strona https (i localhost) może osadzić edytor za pomocą <iframe> i ?embed=1 - bez rejestracji, bez klucza. Po osadzeniu edytor ukrywa ten tekst i pokazuje przycisk Zapisz. Dokument można przekazywać do edytora i z niego na dwa sposoby.
src= otwiera plik (twój serwer musi zezwalać na CORS), webhook= sprawia, że „Zapisz” (Ctrl+S) wysyła dokument pod ten adres. Dodaj &token=…, aby wysyłać nagłówek Authorization: Bearer …, i &auto, aby zapisywać po każdej zmianie.
<iframe src="https://xml.giit.ch/?embed=1&src=https://your-site.com/data/catalog.xml&webhook=https://your-site.com/save.php"
allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>Webhook otrzymuje żądanie POST z JSON { editor: "xml", event: "save", id, name, content, updated }. Mały skrypt PHP, który go zapisuje:
<?php
header('Access-Control-Allow-Origin: https://xml.giit.ch');
header('Access-Control-Allow-Headers: Content-Type, Authorization');
header('Access-Control-Allow-Methods: POST, OPTIONS');
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') exit;
if (($_SERVER['HTTP_AUTHORIZATION'] ?? '') !== 'Bearer SECRET') { http_response_code(403); exit; }
$d = json_decode(file_get_contents('php://input'), true);
$name = preg_replace('/[^\w\- ]/u', '_', $d['name']);
file_put_contents(__DIR__ . "/data/$name.xml", $d['content']);
echo '{"ok":true}';Edytor zgłasza xmleditor:ready, twoja strona odpowiada xmleditor:load, edytor zgłasza xmleditor:loaded, xmleditor:change przy rzeczywistych zmianach i xmleditor:save, gdy użytkownik zapisuje. Twoja strona może wysłać xmleditor:get (bieżący stan) lub xmleditor:save (naciśnięcie Zapisz). Zapis odbywa się wtedy przez twoje własne logowanie i sesję.
<iframe id="ed" src="https://xml.giit.ch/?embed=1" allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>
<script>
const ed = document.getElementById('ed');
const ORIGIN = 'https://xml.giit.ch';
addEventListener('message', async e => {
if (e.source !== ed.contentWindow || e.origin !== ORIGIN) return;
const m = e.data;
if (m.type === 'xmleditor:ready') { // edytor jest gotowy: przekaż mu dokument
ed.contentWindow.postMessage({
type: 'xmleditor:load',
name: 'Catalog',
content: await (await fetch('/data/catalog.xml')).text()
}, ORIGIN);
}
if (m.type === 'xmleditor:change') document.title = '● not saved'; // rzeczywista zmiana
if (m.type === 'xmleditor:save') { // użytkownik kliknął „Zapisz”
await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: m.name, content: m.content }) });
document.title = 'Saved';
}
});
// Przycisk zapisu na twojej stronie: odpowiedź przychodzi jako xmleditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'xmleditor:get' }, ORIGIN); }
</script>Asystent AI na twojej stronie: działa także w ramce. Z allow="clipboard-write" w iframe „Kopiuj prompt” korzysta bezpośrednio ze schowka (w przeciwnym razie edytor używa starego polecenia kopiowania albo pokazuje prompt do ręcznego skopiowania). Link wysłany przez AI nie dotrze do edytora osadzonego w innej stronie, więc edytor prosi AI i użytkownika o wklejenie całej odpowiedzi AI do edytora - albo o otwarcie edytora we własnym oknie.
window.open("https://xml.giit.ch/?embed=window", "xmleditor-17") otwiera pełny edytor we własnym oknie, który wymienia te same wiadomości z window.opener. Linki od AI docierają do niego tam. xmleditor:load może też zawierać context: { host, title, rules } - prompt dla AI mówi wtedy, gdzie należy dokument, i stosuje twoje zasady - oraz hook: { url, token }, webhook tylko dla tego dokumentu, który nigdy nie jest zapisywany. Zamknięcie okna z niezapisanymi zmianami wysyła xmleditor:closing.
Przekaż edytorowi własny prompt, adres w twojej witrynie i klucz dla tej sesji edytora. Okno AI pokazuje wtedy „Połączono z” twoją witryną, to, co przekazujesz AI, oraz wybór: zmienić bieżący dokument lub utworzyć nowy; Kopiuj prompt łączy to wszystko. AI wysyła swój wynik z kluczem na twój serwer, a twoja strona otwiera go w edytorze - nowy dokument otwiera się osobno i zostaje w przeglądarce użytkownika. Jeden klucz na sesję edytora: pozostaje ważny, dopóki edytor jest otwarty, a edytor prosi o niego przez xmleditor:key-request tylko wtedy, gdy go nie ma. Edytor nigdy sam nie wysyła klucza i nigdy go nie zapisuje; adres musi być adresem https na twoim własnym hoście lub jego subdomenie.
const key = async () => (await fetch('/api/ai-key.php?doc=17')).json(); // jeden klucz na sesję edytora
const k = await key();
ed.contentWindow.postMessage({ type: 'xmleditor:load', name: 'Catalog', content, ai: {
label: 'My Site', prompt: 'Keep the sku attributes. Prices in CHF.',
endpoint: 'https://your-site.com/api/ai-result.php', key: k.key } }, ORIGIN);
// zapamiętaj id z xmleditor:loaded i ignoruj change/save/closing z innym id
// tylko gdy edytor nie ma klucza:
if (m.type === 'xmleditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'xmleditor:ai', key: k.key }, ORIGIN); }
// dopóki edytor jest otwarty, informuj serwer co minutę; zamknięcie edytora lub strony unieważnia klucz
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// twój serwer ma wynik (polling, SSE …): target to "current" lub "new"
ed.contentWindow.postMessage({ type: 'xmleditor:load', name: 'Catalog', content: draft, from: 'ai', target }, ORIGIN);Twórz klucze z co najmniej 128 losowymi bitami, przechowuj tylko ich hash, wiąż każdy z zalogowanym użytkownikiem, dokumentem i tą sesją edytora, twórz jeden na sesję, utrzymuj go ważnym tylko wtedy, gdy twoja strona zgłasza sesję jako otwartą, i unieważniaj go, gdy edytor lub strona zostaną zamknięte.
Cały protokół jest opisany w llms.txt - przekaż go AI, a zbuduje połączenie dla twojego systemu. Edytor LaTeX i Edytor SVG działają tak samo z prefiksami latexeditor: i svgeditor:.
Nie. Edytor działa w całości w przeglądarce. Dokumenty nigdy nie są wysyłane na serwer, chyba że sam skonfigurujesz webhook do własnego serwera.
Tak. Używa parsera XML wbudowanego w przeglądarkę i pokazuje pierwszy błąd poprawności z wierszem i kolumną, a także niezadeklarowane prefiksy przestrzeni nazw i podwójnie użyte id. Nie waliduje względem DTD ani XML Schema.
Tak. Edytor nigdy nie ładuje DTD, schematu ani encji zewnętrznej i nigdy nie rozwija encji z DTD, więc ataki XXE i rozwijania encji nie działają. Odwołania do takich encji zostają w tekście tak, jak są zapisane.
Wpisz wyrażenie XPath 1.0 nad drzewem, na przykład //book[price > 30]/title. Pasujące węzły są zaznaczone w drzewie; strzałki przechodzą od jednego do następnego. Prefiksy zadeklarowane w dokumencie działają, a _: oznacza domyślną przestrzeń nazw elementu głównego.
Tak. W Konwersji lub Eksporcie dokument staje się JSON lub YAML: atrybuty jako @name, tekst jako #text, powtarzające się elementy jako listy.
Tylko w przeglądarce. Kliknij przycisk folderu w lewym górnym rogu (Moje dokumenty), aby je otwierać, zmieniać ich nazwy, duplikować, pobierać lub usuwać. Wyczyszczenie danych witryny w przeglądarce je usuwa, więc pobierz te, które chcesz zachować - albo pozwól edytorowi wysyłać je na własny serwer („Zapis na serwerze”).
Tak, każda AI - ChatGPT, Claude, Gemini, Copilot lub AI w twoim narzędziu programistycznym. Kliknij „Asystent AI”, potem „Kopiuj prompt”, wklej go do swojej AI i napisz, co ma napisać. AI odpowiada linkiem; kliknij go, a dokument pojawi się w edytorze. „Cofnij” cofa każdą zmianę.
Tak. Osadź go w iframe i wymieniaj dokumenty przez postMessage albo pozwól mu wysyłać każdą zapisaną wersję na twój serwer przez webhook. Przykłady znajdziesz w sekcji Edytor na własnej stronie.
Nie. Edytor jest darmowy, bez reklam i bez rejestracji.