Edytor HTML WYSIWYG

Sprawdzone w październiku 2026 · przez zespół Mobirise, który prowadzi mobirize.com

Jak edytujesz

Przeciągasz bloki na stronę, poprawiasz tekst bezpośrednio na niej i klikasz obraz, aby go podmienić. Każdy blok ma własny panel parametrów: odstępy, tło, widoczne elementy i liczbę kolumn.

Co zapisuje

HTML, CSS i trochę JavaScriptu, wszystko oparte na Bootstrap 5. Bloki leżą na siatce Bootstrap, która sama dopasowuje się do wąskich i szerokich ekranów.

Cena

Za darmo dla stron prywatnych i firmowych, z jednym motywem startowym i około 200 blokami. Subskrypcje zaczynają się od 149 $ rocznie.

Systemy

Windows 7 i nowsze, macOS 10.13 i nowsze z osobnymi instalatorami na Apple Silicon i Intel oraz Linux z rodziny Debiana, np. Ubuntu. Istnieje też wersja kreatora w przeglądarce.

Dostęp do kodu

Gotowe pliki zostają Twoje niezależnie od planu. Ręczna edycja HTML bloku wymaga rozszerzenia Code Editor, płatnego dodatku.

Główne ograniczenie

Otworzysz tylko projekty Mobirise. Strony ani szablonu zbudowanego w innym narzędziu nie wczytasz do dalszej edycji wizualnej.

To określenie obejmuje narzędzia dla bardzo różnych osób. Gdy wiesz, jakiej rodziny szukasz, oszczędzasz większość poszukiwań.

Uczciwa lista skrócona według sytuacji. To my robimy Mobirise, więc czytaj nasz wpis z tą świadomością.

Cała strona, bez kodu, za darmo

Mobirise: zbudowany z bloków, instaluje się na Windows, Macu i Linuksie, a jego darmowy plan eksportuje pliki Bootstrap 5.

Praca na istniejącym HTML

Pinegrow: przyjmuje dowolny istniejący projekt i pozwala edytować wizualnie lub w kodzie; dla osób biegłych w HTML i CSS.

Praca z Bootstrap za jednorazową opłatę

Bootstrap Studio: jedna płatność, od 29 $, wczytuje gotowe strony, po aktywacji działa offline.

Dowolne rozmieszczanie obiektów na Windows

WYSIWYG Web Builder: płótno z dowolnym ustawianiem, kupowane raz, z 30 dniami na wypróbowanie.

Natywny kreator z blokami na Maca

Blocs: darmowy do wypróbowania, eksport i publikacja wymagają jednorazowej licencji.

Pisanie kodu z wyrenderowanym podglądem

Adobe Dreamweaver: profesjonalny edytor kodu sprzedawany w Creative Cloud.

Pole formatowania w Twojej własnej aplikacji

Jedna z wbudowywanych bibliotek, np. TinyMCE lub TipTap; żadne z opisanych tu narzędzi desktopowych tego nie robi.

Siedem narzędzi w jednej siatce, z zachowaniem wierszy, które przemawiają na korzyść rywali.

Dane z 13–16 października 2026 ze stron z cennikami i dokumentacją poszczególnych sprzedawców, w dolarach bez podatku, chyba że zaznaczono inaczej. Oferty często się zmieniają, więc przed zakupem sprawdź je na stronie sprzedawcy.

Osoby, które szukają edytora html w czasie rzeczywistym, chcą jednej z dwóch rzeczy: zmienić stronę i od razu to zobaczyć albo pisać kod i patrzeć, jak odświeża się podgląd. To różne narzędzia.

Dodaj płatne rozszerzenie Code Editor, a Mobirise obsłuży oba style: otwierasz HTML i CSS bloku lub strony, zmieniasz je i patrzysz, jak płótno się aktualizuje.

Każdy generator kodu HTML zamienia kliknięcia albo jedno wpisane zdanie w znaczniki, a jego wartość zależy od wyniku. Poniższy fragment pokazuje, jaką strukturę Bootstrap 5 tworzy kreator z blokami dla prostej sekcji w dwóch kolumnach. To ogólny kod ilustrujący wzorzec, a nie plik motywu Mobirise.

<section class="features">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-6">
        <h2>Fresh bread every morning</h2>
        <p>Baked on site from 6 am, six days a week.</p>
        <a class="btn btn-primary" href="menu.html">See the menu</a>
      </div>
      <div class="col-12 col-lg-6">
        <img src="../assets/images/bakery.webp" alt="Loaves cooling on a rack"
             class="img-fluid" loading="lazy">
      </div>
    </div>
  </div>
</section>

Na telefonach klasy siatki układają kolumny jedna pod drugą, a od dużego punktu przerwania stoją obok siebie. Poziom nagłówka wybierasz w edytorze, obrazy same zamieniają się na WebP, a tekst alternatywny uzupełnia się z ustawień obrazu.