Modern editors have a dirty secret: most of them hand you a blob of HTML and call it a document. That blob is hard to validate, hard to transform, and hard to move between systems. Ezynota takes a different path. Every piece of content is a structured object, and the source of truth is portable JSON, not markup soup.
Ezynota is a free, open-source (MIT), framework-agnostic, block-based editor library from Bookklik Technologies. It's built for structured editing experiences: CMS platforms, documentation systems, note-taking apps, comments, and knowledge bases.
Block-first, JSON-first
In Ezynota, a paragraph, heading, list, quote, code block, image, table, callout, or divider is a block. The rich text inside each block is stored as JSON, never as opaque HTML strings.
The architecture follows one rule: the DOM is only a view. Every edit becomes a typed transaction against the document model. That design pays off in a few practical ways:
- Your data is predictable and serializable from day one.
- Import and export between JSON, Markdown, and sanitized HTML is lossless.
- Undo, diffing, and persistence become straightforward engineering instead of hacks.
A workspace, not just a textarea
Ezynota goes beyond a single text field. Out of the box it provides browser-local workspaces with folders, linked notes, trash, search, and IndexedDB storage, so you can ship a full note-taking experience with zero backend. Add find/replace, themes, RTL support, and fullscreen mode, and you have a complete writing environment.
Accessibility and security are defaults here, not afterthoughts. Keyboard-complete operation, ARIA menus, sanitized pasted HTML, and no eval anywhere. The entire library also has zero runtime dependencies.
Getting started
Declarative (browser bundle)
<link rel="stylesheet" href="ezynota.css" />
<div data-ezn-editor></div>
<script src="ezynota.umd.cjs"></script>
Every [data-ezn-editor] element mounts a workspace editor after DOM readiness, and elements added later are observed automatically. Mounts emit bubbling ezn:ready, ezn:change, and ezn:error DOM events. Attributes like data-ezn-mode, data-ezn-theme, data-ezn-readonly, and data-ezn-workspace configure each mount.
ESM / bundlers
npm install ezynota
import { Ezynota } from "ezynota/core"; // no automatic scanning
import "ezynota/dist/ezynota.css";
const editor = new Ezynota({
target: "#editor",
placeholder: "Start writing...",
onReady(api) {},
onChange(api, batch) {}
});
Self-contained demos live in the examples folder, and the full guides and API reference are at https://bookklik-technologies.github.io/ezynota/.
What's in the box today
Ezynota is at v0.1.1, release-candidate quality: browser-local multi-note workspaces, four lifecycle modes, tables, images, callouts, collapsible sections, and Markdown interchange. Accounts, server synchronization, real-time collaboration, and direct DOCX/PDF conversion aren't included yet, and the roadmap is open.
Try it
If you're building anything where users write structured content, whether that's a CMS, a docs tool, or a notes app, Ezynota will save you months. Clone it, embed it, and help shape the roadmap on GitHub.