HTML Text Editor: vizuální editace webů bez složitého rozhraní

7. ledna 2026

Často potřebuju upravit texty na webových stránkách. Změnit nadpis, přepsat odstavec, opravit překlep. Ale pokaždé musím otevřít VS Code, najít správný soubor, projít HTML strukturu a upravit text mezi tagy. To je zbytečně mnoho kroků na jednu změnu slova.

Chtěla jsem nástroj, kde otevřu stránku, kliknu na text a rovnou ho přepíšu. Jako kdyby web byl Word dokument. Bez složitého rozhraní, bez cloudových služeb, bez předplatného.

Problém, který jsem řešila

Mám několik webových projektů – HTML soubory ve složkách na disku. Když potřebuju opravit text na stránce, musím projít tento proces: otevřít editor kódu, najít správný HTML soubor, prohledat strukturu dokumentu, najít konkrétní element s textem, upravit ho a uložit. To všechno kvůli jednomu slovu.

Existují CMS systémy a vizuální editory, ale ty vyžadují buď nahrání projektu někam do cloudu, nebo složitou konfiguraci. Já chtěla něco jednoduššího – otevřít lokální složku, vidět stránku tak, jak vypadá v prohlížeči, a rovnou editovat texty.

Řešení: lokální webová aplikace

Vytvořila jsem si HTML Text Editor – webovou aplikaci, která běží lokálně na mém počítači. Node.js server, který mi umožní načíst jakoukoliv složku s HTML soubory a editovat texty přímo v prohlížeči.

Struktura je jednoduchá:

  • Sidebar – seznam všech HTML souborů v projektu, hierarchicky uspořádaný podle složek
  • Náhled – stránka se zobrazí přesně tak, jak vypadá v prohlížeči
  • Edit mód – kliknu na text a můžu ho rovnou upravit
  • Auto-save – Ctrl+S uloží změny zpět do původního souboru

Jak to funguje v praxi

Spustím server příkazem npm start a otevřu localhost:3333 v prohlížeči. Zadám cestu ke složce s projektem, třeba /Users/jmeno/projects/muj-web. V levém panelu se zobrazí všechny HTML soubory.

Kliknu na soubor, který chci upravit. Stránka se načte v náhledu – vidím ji přesně tak, jak vypadá normálně v prohlížeči. Pak stisknu E nebo kliknu na tlačítko „Edit mód" v toolbaru.

V Edit módu se stránka orámuje oranžově a objeví se nápis „Edit mód aktivní". Teď můžu kliknout na jakýkoliv text – nadpis, odstavec, tlačítko, odkaz. Kurzor se umístí přesně tam, kam jsem klikla, a můžu rovnou psát. Žádné hledání v HTML struktuře.

Když jsem hotová, stisknu Ctrl+S. Změny se uloží zpět do původního souboru na disku. Před uložením se automaticky vytvoří záloha s příponou .backup, takže se nemusím bát, že něco pokazím.

Co aplikace umí

  • Načtení celého projektu – stačí zadat cestu ke složce a zobrazí se všechny HTML soubory
  • Správné zobrazení – CSS, JavaScript, obrázky – všechno funguje jako v normálním prohlížeči
  • Edit mód – zablokuje odkazy a tlačítka, takže můžu editovat i interaktivní prvky
  • Editace kliknutím – kliknu na text a rovnou ho upravím, kurzor se umístí na pozici kliknutí
  • Zálohy – před každým uložením se vytvoří .backup soubor
  • Varování – když mám neuložené změny a zkusím zavřít stránku, dostanu varování
  • Klávesové zkratky – E pro Edit mód, Ctrl+S pro uložení, Escape pro ukončení editace

Co jsem se naučila

Express.js je perfektní pro rychlé vytvoření lokálních webových nástrojů. Jeden soubor se serverem, jeden soubor s UI, a máte funkční aplikaci. Není potřeba složitá konfigurace ani build proces.

Největší výzva byla správně implementovat Edit mód. Musel zablokovat všechny interakce – odkazy, tlačítka, onclick handlery – ale zároveň povolit editaci textu. Řešením bylo přidat CSS pravidlo pointer-events: none na interaktivní prvky a pak ho selektivně povolit pro elementy s atributem data-editable.

Zajímavé bylo taky řešení ukládání. Před uložením se vytvoří čistá kopie dokumentu bez editačních elementů – toolbaru, stylů, atributů. Výsledný HTML soubor vypadá úplně stejně jako originál, jen s upravenými texty.

Proč to stojí za to

HTML Text Editor mi šetří čas při každé úpravě textů. Místo hledání v kódu prostě kliknu a píšu. Je to intuitivní – funguje to tak, jak bych čekala, že editace webu má fungovat.

Aplikace běží lokálně, nepotřebuje internet, neposílá data nikam pryč. Soubory zůstávají na mém disku, můžu je verzovat v Gitu. Mám plnou kontrolu nad projekty.

Pokud taky pracujete s HTML soubory a často měníte texty, zkuste si postavit něco podobného. Nebo si stáhněte můj projekt a upravte si ho podle sebe. Možná zjistíte, že editace webů může být mnohem jednodušší, než jste si mysleli.