Skip to content

hxssworks/htmlTypist

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

htmlTypist

中文 · 日本語 · 한국어

Drop any HTML file. Click to edit. Press ⌘S to save.

htmlTypist is a lightweight, browser-based visual editor for HTML files. It lets you edit text content directly in the rendered view — no source code required — while keeping the underlying HTML structure intact.


Screenshots

htmlTypist — empty state

htmlTypist — sample document loaded


Why

HTML files are hard to edit without a code editor. Markdown is easy to edit but limited in layout. htmlTypist sits in between: you see the rendered page, click any text, type your changes, and save back to the original file.


Features

  • Drop & edit — drag any .html file into the editor; all text nodes become instantly editable
  • Live source sync — right panel reflects every edit in real time
  • Save in place — Chrome / Edge: ⌘S / Ctrl+S writes directly back to the original file via File System Access API
  • Four languages — UI available in English, 中文, 日本語, 한국어
  • Clean output — only text node content is modified; structure, styles, and scripts are untouched
  • Zero dependencies — single HTML file, no build step, no npm, no CDN

Usage

Option A — Open directly in browser

git clone https://github.com/hxssworks/htmlTypist.git
open htmlTypist.html

Option B — Drag and drop

  1. Open htmlTypist.html in Chrome or Edge
  2. Drag your .html file into the editor window
  3. Click any text to edit it
  4. Press ⌘S (Mac) or Ctrl+S (Windows) to save back to the original file

Save behaviour

Browser Save method
Chrome / Edge Writes directly to original file via File System Access API
Safari / Firefox Downloads as edited.html — replace original manually

Limitations

  • Text-only editing — does not support adding or removing HTML elements
  • External resources (fonts, images from other domains) may not load due to browser sandbox
  • Complex CSS layouts may render slightly differently inside the editor container

File structure

htmlTypist/
├── htmlTypist.html          ← the editor (single file, open this)
├── README.md               ← English (shown by default on GitHub)
├── README.zh.md            ← 中文
├── README.ja.md            ← 日本語
├── README.ko.md            ← 한국어
├── screenshot-en-empty.png
└── screenshot-en-sample.png

Stack

Pure vanilla JS + HTML + CSS. No frameworks, no bundler, no runtime dependencies.


License

MIT


Created by hxssworks · v1.0.0 · 2026

About

Drop any HTML file. Click to edit text. Press ⌘S / Ctrl+S to save — no code required.

Topics

Resources

License

Stars

0 stars

Watchers

0 watching

Forks

Packages

 
 
 

Contributors

Languages