Онлайн-редактор HTML

Free

Редагуйте HTML, CSS та JavaScript у трьох панелях із живим ізольованим попереднім переглядом, що оновлюється під час введення тексту, плюс завантаження в один клік як окремого HTML-файлу.

Живий попередній перегляд

Недавня Активність

Видно всім. Останні 20 використань серед усіх відвідувачів, найновіші спочатку.

Выполнен живой предпросмотр (132 символов HTML, 77 символов CSS, 102 символов JS)

19 хвилин тому

Eine Live-Vorschau ausgeführt (132 HTML-Zeichen, 77 CSS-Zeichen, 102 JS-Zeichen)

32 хвилини тому

Ran a live preview (27 HTML chars, 42 CSS chars, 151 JS chars)

4 години тому

Ran a live preview (27 HTML chars, 42 CSS chars, 102 JS chars)

4 години тому

Ran a live preview (27 HTML chars, 77 CSS chars, 102 JS chars)

4 години тому

Ran a live preview (132 HTML chars, 77 CSS chars, 102 JS chars)

4 години тому

Коментарі (0)

Знайшли цей інструмент корисним? Залиште коментар, поділіться порадою, чи скажіть нам, як ми можемо покращити його.

Ще немає коментарів. Будьте першим, хто поділиться думками!

Що робить цей інструмент

Пишіть HTML, CSS та JavaScript у трьох окремих панелях і дивіться, як вони об'єднуються в єдиний живий попередній перегляд, що оновлюється під час введення тексту, з завантаженням результату в один клік як окремого HTML-файлу.

Як Це Працює

Інструмент складає повний HTML-документ із ваших трьох панелей (CSS, обгорнутий у тег style, ваш HTML у body, ваш JavaScript у тегу script наприкінці) і завантажує цей документ в ізольований iframe за допомогою атрибута srcdoc. Sandbox дозволяє виконання скриптів, але блокує доступ попереднього перегляду до DOM, кук чи сховища цієї сторінки, тож ваш код працює в реалістичному, але ізольованому браузерному середовищі.

Проблеми, які це вирішує

Швидка перевірка фрагмента HTML, правила CSS чи невеликого скрипту без створення локальних файлів.
Створення прототипу невеликої сторінки чи ідеї інтерфейсу з експортом у робочий HTML-файл.
Демонстрація або обмін самодостатнім прикладом коду, який хтось інший може вставити й негайно запустити.

Часті запитання

›Чи безпечно запускати ненадійний JavaScript у попередньому перегляді?

Попередній перегляд працює всередині ізольованого (sandbox) iframe, де скрипти дозволені, але доступ до того самого джерела вимкнено, тому код у попередньому перегляді не може читати чи змінювати цю сторінку, ваші куки чи локальне сховище. Проте в межах цього sandbox він усе ще може вільно виконувати JavaScript, відкривати діалогові вікна чи робити мережеві запити, як і будь-яка інша веб-сторінка, тож продовжуйте ставитися до будь-якого коду, вставленого з ненадійного джерела, так само, як якщо б ви запускали його в новій вкладці браузера.

›Як об'єднуються панелі HTML, CSS і JavaScript?

Інструмент обгортає ваш CSS у тег <style> всередині head документа, розміщує ваш HTML прямо в body і додає ваш JavaScript у тег <script> наприкінці body, точно як типовий односторінковий HTML-документ, а потім завантажує цей об'єднаний документ у попередній перегляд.

›Чи можу я завантажити те, що створив, як справжній файл?

Так, кнопка «Завантажити як .html» зберігає точно той самий об'єднаний документ, показаний у попередньому перегляді, як єдиний файл index.html, готовий до відкриття прямо в браузері чи завантаження на веб-сервер.

›Чи оновлюється попередній перегляд автоматично під час введення тексту?

Так, попередній перегляд автоматично оновлюється через короткий час після того, як ви припиняєте вводити текст у будь-якій із трьох панелей, тож ви можете побачити ефект ваших змін без натискання окремої кнопки запуску.

›Чому вивід console.log ніде не з'являється на сторінці?

Попередній перегляд є справжнім, ізольованим браузерним документом, тому вивід console.log надходить до власної консолі цього документа, а не на цю сторінку. Відкрийте інструменти розробника вашого браузера та виберіть контекст iframe попереднього перегляду, щоб побачити вивід консолі, або скористайтеся alert() для швидкої видимої перевірки.

Перетворюйте текст між Unicode та Punycode (RFC 3492), кодуванням лише з символів ASCII для інтернаціоналізованих доменних імен, з повним режимом домену (з урахуванням крапок, автоматичним префіксом xn--) та режимом простої метки, перетворюючи кілька рядків одразу.