A minimal, self-hosted web html editor with live preview and autosave
dwith_web_editor is a lightweight web html editor built for developers who value clarity, control, and zero overhead. With the v1.0 release, the project delivers a stable foundation that emphasizes correctness, transparency, and long-term maintainability.
✨ Overview
At its core, dwith_web_editor runs entirely in the browser while PHP serves as a thin backend layer. Because of this separation, the system stays fast, predictable, and easy to understand.
In addition, the editor provides real-time editing, instant preview, and reliable autosave without introducing unnecessary complexity.
As a result, no database is required. Likewise, no framework is involved. Finally, no build process is needed.
🚀 Key Features
Live Preview Every change appears instantly through iframe srcdoc, which allows continuous visual feedback.
Editor ⇄ Preview Text Highlight Sync When readable text is selected in the editor, the same content highlights inside the preview pane. Therefore, the relationship between code and output becomes immediately clear.
Real-Time Search Keywords highlight as you type, and the editor scrolls to the first match automatically.
Autosave The editor saves content at fixed intervals, which significantly reduces accidental data loss.
Version History Previous snapshots remain available and can be restored directly from the interface.
File-Based Storage The system stores all data as JSON files, keeping behavior transparent and portable.
No Authentication Layer The design intentionally targets trusted or single-user environments.
🧠 Design Philosophy
This project avoids abstraction for its own sake. Instead, each feature exists to solve a specific and observable problem.
For example, the editor relies on simple browser primitives rather than hidden logic. Consequently, developers can read, modify, and extend the codebase with confidence.
No frontend framework
No database
No user system
No build toolsBecause of this approach, the project remains easy to audit and maintain over time.
🛠 Technology Stack
PHP 8+ for backend APIs
CodeMirror 5 as the editor engine
Vanilla JavaScript for all UI logic
iframe srcdoc for isolated preview rendering
📁 Project Structure
├── index.php
├── api.php
├── autosave/
│ └── .gitkeep
├── README.md
├── LICENSE
└── .gitignoreThe autosave directory must stay writable by the web server. Otherwise, autosave and history features will stop functioning.
⚙️ Installation
Upload the project to a PHP-enabled server
Grant write permissions to the autosave directory
Open index.php in your browser
After these steps, the editor becomes usable immediately.
🔌 Backend API
All server-side logic lives inside api.php. The API remains intentionally small and explicit.
save Store current editor content
list Return recent autosave history
load Restore a saved snapshotAdditionally, cleanup routines and storage limits run server-side to prevent uncontrolled growth.
🔒 Security Notes
This project does not include authentication or authorization. Therefore, deployment should remain limited to trusted environments such as local machines or private servers.
🎯 Intended Use Cases
HTML prototyping
Internal documentation tools
Learning and experimentation
Minimal self-hosted utilities
📦 Release Information
Version: v1.0 Status: Stable License: Open Source
🔮 Future Direction
Over time, optional modular extensions may appear. However, the core principle will stay the same.
Simple, transparent, and predictable behavior.
In conclusion, this web html editor offers a clean alternative to complex tools. For developers who want a dependable browser-based HTML editor that stays out of the way, dwith_web_editor v1.0 provides a solid starting point.
If you want to explore the source code or adapt this web html editor for your own workflow, the full project is available on GitHub: https://github.com/netus/dwith_web_editor
Leave a Reply