Hacker News new | ask | show | jobs
Show HN: Zero WYSIWYG – A lightweight, zero-dependency HTML editor (github.com)
2 points by KaTXi 64 days ago
2 comments

Hi HN! I built this WYSIWYG editor as an extraction from the admin of a gaming news site (todojuegos.com) I've maintained since the early 2000s. The main goal was to have a full-featured editor with zero npm dependencies, just a single JS + CSS file.

Key features: 35+ built-in features, 7 languages, dark/light themes, slash commands, Markdown import/export, table editing, emoji picker, code blocks... all at ~120KB with no external dependencies.

It uses contentEditable + document.execCommand (yes, I know it's "deprecated" but it works reliably across browsers).

Live demo: https://katxi.github.io/zero-wysiwyg/

wow this looks super cool!

How long did it take to develop?

Have you considered the competitors like tiptap editor? Curious what is your opinion VS tiptap's pros/cons.

Thanks! The project started because I needed to replace Xinha (https://xinha.webfactional.com/) in the admin panel of a gaming news site I've been running since the early 2000s. Xinha served me well for years, but it was no longer actively maintained and had accumulated a lot of legacy baggage. I wanted something lightweight that just worked without pulling in a framework or a tree of dependencies.

Development time: the core editor took a few weeks of focused work, but I've been iterating on features for a couple of months now (slash commands, markdown mode, table editing, etc.).

Regarding Tiptap: it's a great project and I have a lot of respect for it. They're solving a different problem though. Tiptap is built on top of ProseMirror, which gives you a proper document model, collaborative editing, and a very composable extension architecture. If you're building something like Notion or a collaborative SaaS editor, that's absolutely the right choice.

The trade-off is complexity and size. Tiptap pulls in ProseMirror and its own packages, easily 200KB+ of dependencies before you even add extensions. You need a bundler, a build step, and you install features one by one as separate packages.

Zero WYSIWYG comes from the opposite direction. It's a single JS file and a single CSS file, about 120KB total, zero dependencies. You drop a `<script>` tag in your page, call `init()`, and you immediately get it working.

It's really aimed at a different use case: traditional server-rendered sites (PHP, Django, Rails...) where you just need a reliable textarea replacement in your admin panel without introducing a build pipeline or a framework dependency. That's the world I come from, and that's the itch it scratches.