Code
Редактор HTML показує ваш код і сторінку поруч. Усе, що ви вводите, одразу з’являється в перегляді - заголовки, списки, таблиці, зображення і весь ваш CSS, - а клацання будь-чого в перегляді переносить вас до його місця в коді. Текст можна редагувати й просто в перегляді. Так можна швидко створювати лендинги, розсилки, статті й форми, нічого не встановлюючи.
Усе працює у вашому браузері. Сторінки нікуди не вивантажуються, немає ні реєстрації, ні реклами.
Теги, атрибути, сутності, коментарі, а також CSS і JavaScript усередині сторінки власними кольорами, номери рядків, закривальні теги, що додаються самі, і акуратні відступи одним клацанням.
Сторінка такою, як її показує браузер, у фреймі, де скрипти й атрибути on… ніколи не виконуються, а посилання нікуди не ведуть. Перевірте її на повну ширину, у розмірі планшета або телефона.
Клацніть заголовок або абзац у перегляді й пишіть: зміна потрапляє в код, а &, < і > записуються як сутності.
Незакриті або неправильно вкладені теги, невідомі елементи, зображення без alt, відсутні файли й id, використані двічі, - кожна проблема з номером рядка.
Перетягніть файли в редактор і використовуйте їх за іменем: <img src="../logo.png">, <link rel="stylesheet" href="../style.css">. Вони зберігаються разом зі сторінкою у вашому браузері.
Файл .html, один файл HTML з усіма файлами всередині, ZIP із файлами, PDF через діалог друку або простий текст.
Будь-яка сторінка https (і localhost) може вбудувати редактор за допомогою <iframe> і ?embed=1 - без реєстрації, без ключа. У вбудованому вигляді редактор приховує цей текст і показує кнопку «Зберегти». Передати документ у редактор і отримати його назад можна двома способами.
src= відкриває файл (ваш сервер має дозволяти CORS), webhook= змушує «Зберегти» (Ctrl+S) надсилати документ на цю адресу. Додайте &token=… для заголовка Authorization: Bearer … і &auto, щоб зберігати після кожної зміни.
<iframe src="https://html.giit.ch/?embed=1&src=https://your-site.com/pages/offer.html&webhook=https://your-site.com/save.php"
allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>Вебхук отримує POST із JSON { editor, event: "save", id, name, content, assets, updated }. Невеликий PHP-скрипт, який його зберігає:
<?php
header('Access-Control-Allow-Origin: https://html.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__ . "/pages/$name.html", $d['content']);
echo '{"ok":true}';Редактор повідомляє htmleditor:ready, ваша сторінка відповідає htmleditor:load, редактор повідомляє htmleditor:loaded, htmleditor:change при справжніх змінах і htmleditor:save, коли користувач зберігає. Ваша сторінка може надіслати htmleditor:get (поточний стан) або htmleditor:save (натиснути «Зберегти»). Тоді збереження проходить через ваш власний вхід і сеанс.
<iframe id="ed" src="https://html.giit.ch/?embed=1" allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>
<script>
const ed = document.getElementById('ed');
const ORIGIN = 'https://html.giit.ch';
addEventListener('message', async e => {
if (e.source !== ed.contentWindow || e.origin !== ORIGIN) return;
const m = e.data;
if (m.type === 'htmleditor:ready') { // редактор готовий: передайте йому документ
ed.contentWindow.postMessage({
type: 'htmleditor:load',
name: 'Offer',
content: await (await fetch('/pages/offer.html')).text(),
assets: { 'logo.png': 'data:image/png;base64,…' } // необов’язкові файли
}, ORIGIN);
}
if (m.type === 'htmleditor:change') document.title = '● not saved'; // справжня зміна
if (m.type === 'htmleditor:save') { // користувач натиснув «Зберегти»
await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: m.name, content: m.content, assets: m.assets }) });
document.title = 'Saved';
}
});
// Кнопка збереження на вашій сторінці: відповідь надходить як htmleditor:save
function saveNow() { ed.contentWindow.postMessage({ type: 'htmleditor:get' }, ORIGIN); }
</script>ШІ-асистент усередині вашої сторінки: він працює і у фреймі. З allow="clipboard-write" на iframe «Копіювати промпт» використовує буфер обміну напряму (інакше редактор вдається до старої команди копіювання або показує промпт, щоб скопіювати його вручну). Посилання, яке надсилає ШІ, не може дістатися до редактора всередині іншого сайту, тому редактор просить ШІ та користувача натомість вставити всю відповідь ШІ в редактор - або відкрити редактор в окремому вікні.
window.open("https://html.giit.ch/?embed=window", "htmleditor-17") відкриває повний редактор в окремому вікні, і він обмінюється тими самими повідомленнями з window.opener. Посилання від ШІ доходять до нього туди. htmleditor:load може також містити context: { host, title, rules } - тоді промпт для ШІ каже, де розміщено документ, і дотримується ваших правил - і hook: { url, token, assets: false }, вебхук лише для цього документа, який ніколи не зберігається. Якщо закрити вікно з незбереженими змінами, надсилається htmleditor:closing.
Передайте редактору власний промпт, адресу на вашому сайті та ключ для цього сеансу редактора. Тоді діалог ШІ показує «Під’єднано до» вашого сайту, що ви повідомляєте ШІ, і вибір змінити поточний документ або створити новий; Копіювати промпт збирає все разом. ШІ надсилає свій результат із ключем на ваш сервер, а ваша сторінка відкриває його в редакторі - новий документ відкривається окремо й залишається в браузері користувача. Один ключ на сеанс редактора: він дійсний, поки редактор відкрито, і лише поки ключа немає, редактор запитує його через htmleditor:key-request. Редактор ніколи сам не надсилає ключ і ніколи його не зберігає; адреса має бути https на вашому власному хості або його піддомені.
const key = async () => (await fetch('/api/ai-key.php?doc=17')).json(); // один ключ на сеанс редактора
const k = await key();
ed.contentWindow.postMessage({ type: 'htmleditor:load', name: 'Offer', content, ai: {
label: 'My Site', prompt: 'Keep the [[placeholders]]. Write in German.',
endpoint: 'https://your-site.com/api/ai-result.php', key: k.key } }, ORIGIN);
// запам’ятайте id з htmleditor:loaded та ігноруйте change/save/closing з іншим id
// лише поки редактор не має ключа:
if (m.type === 'htmleditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'htmleditor:ai', key: k.key }, ORIGIN); }
// поки редактор відкрито, повідомляйте свій сервер щохвилини; закриття редактора або сторінки анулює ключ
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// ваш сервер має результат (polling, SSE …): target - "current" або "new"
ed.contentWindow.postMessage({ type: 'htmleditor:load', name: 'Offer', content: draft, from: 'ai', target }, ORIGIN);<?php // api/ai-key.php - ключ цього сеансу редактора для користувача, що увійшов (його викликає ваша сторінка)
session_start(); // перевірте, чи може користувач редагувати цей документ
$key = bin2hex(random_bytes(24));
$_SESSION['ai'][hash('sha256', $key)] = ['doc' => (int)$_GET['doc'], 'seen' => time()]; // або у вашій базі даних; ?alive= знову встановлює seen
echo json_encode(['key' => $key]);
<?php // api/ai-result.php - ШІ надсилає сюди (без заголовків CORS: ШІ викликають його із сервера)
$key = preg_replace('/^Bearer\s+/', '', $_SERVER['HTTP_AUTHORIZATION'] ?? '');
$row = find_key(hash('sha256', $key)); // ваша база даних: не анульований, бачений за останні 3 хвилини
if (!$row) { http_response_code(401); exit('{"ok":false,"error":"key not valid"}'); }
$d = json_decode(file_get_contents('php://input', false, null, 0, 2000000), true);
save_draft($row['doc'], $d['content'], $d['target'] === 'new' ? 'new' : 'current'); // ваша сторінка показує його через htmleditor:load
echo '{"ok":true}';Створюйте ключі щонайменше зі 128 випадкових бітів, зберігайте лише їхній хеш, прив’язуйте кожен до користувача, що увійшов, до документа й до цього сеансу редактора, створюйте один на сеанс, тримайте його дійсним лише поки ваша сторінка повідомляє, що сеанс відкритий, і анулюйте його, коли редактор або сторінка закриваються.
Увесь протокол - у llms.txt: дайте його ШІ, і він побудує під’єднання для вашої системи. Редактори LaTeX і SVG працюють так само з префіксами latexeditor: і svgeditor: - latex.giit.ch, svg.giit.ch.
Ні. Редактор повністю працює у вашому браузері. Ваші сторінки та їхні файли ніколи не надсилаються на сервер, якщо тільки ви самі не налаштуєте вебхук на свій власний сервер.
Ні. Перегляд показує HTML і CSS сторінки, але скрипти й атрибути on… ніколи не виконуються, а посилання нікуди не ведуть. Тому редактор безпечний із будь-якою сторінкою, яку ви відкриваєте. Код зберігає свої скрипти, тож експортована сторінка працює, як і раніше.
Перетягніть або вставте їх у редактор чи додайте у вкладці Файли праворуч. Вони зберігаються разом зі сторінкою у вашому браузері й використовуються за іменем, наприклад <img src="../logo.png"> або <link rel="stylesheet" href="../style.css">.
Натисніть «Експорт», виберіть PDF і натисніть «Друк / Зберегти в PDF». У діалозі друку виберіть як принтер «Зберегти як PDF».
Лише у вашому браузері. Натисніть кнопку з текою вгорі ліворуч («Мої документи»), щоб відкривати, перейменовувати, дублювати, завантажувати або видаляти їх. Очищення даних сайту в браузері видаляє їх, тому завантажте ті, які хочете зберегти, - або нехай редактор надсилає їх на ваш власний сервер («На сервер»).
Так, будь-який ШІ - ChatGPT, Claude, Gemini, Copilot або ШІ у вашому інструменті для програмування. Натисніть «ШІ-асистент», потім «Копіювати промпт», вставте його у свій ШІ та скажіть, що треба написати. ШІ відповідає посиланням; клацніть його, і сторінка з’явиться у вашому редакторі. «Скасувати» повертає кожну зміну назад.
Так. Вбудуйте його через iframe й обмінюйтеся документами через postMessage або нехай він надсилає кожну збережену версію на ваш сервер через вебхук. Приклади - у розділі Редактор на вашому сайті.
Ні. Редактор безкоштовний, без реклами й без реєстрації.