⚠️ Warning: This project is not yet stable and may undergo significant changes before reaching version 1.0.0. We strongly advise against using it in production environments.

Docen

Universal document format converter and DOCX editor built on TipTap/ProseMirror, with comprehensive TypeScript support. Convert between Markdown, HTML, and DOCX through a unified Tiptap JSON model.

Packages

Package	Version	Description
docen		All-in-one — headless Markdown/HTML/DOCX conversion + the full <docen-document> editor
@docen/vue		Vue 3 adapter — <DocenDocument> component (v-model + v-slot editor)
@docen/editor		Assembly layer — Fluent UI host + docx engine into <docen-document>
@docen/docx		Tiptap DOCX editor + converters, powered by @office-open/docx

Quick Start

Universal Converter (docen)

For seamless conversion between Markdown, HTML, and DOCX through a single unified API:

# Install with pnpm
$ pnpm add docen

import { parseHTML, generateDOCX, parseMarkdown, generateHTML } from "docen";

// HTML → DOCX
const doc = parseHTML("<h1>Title</h1><p>Hello World</p>");
const docx = await generateDOCX(doc);

// Markdown → HTML
const doc2 = parseMarkdown("# Title\n\nHello World");
const html = generateHTML(doc2);

💡 The docen package also bundles the full engine and editor — import { createDocxEditor } from "docen/docx" or import { DocenDocument } from "docen/editor" — so one dependency covers headless conversion, the engine, and the web component.

DOCX Editor (@docen/docx)

A full-featured WYSIWYG DOCX editor with near-lossless round-trip conversion:

$ pnpm add @docen/docx

import { createDocxEditor, parseDOCX, generateDOCX } from "@docen/docx";

const editor = createDocxEditor({ element: document.querySelector("#editor") });
editor.commands.setContent(parseDOCX(buffer));
const output = await generateDOCX(editor.getJSON());

Visual Editor (@docen/editor)

A turnkey web-component editor (<docen-document>) bundling the Fluent UI host with the @docen/docx engine:

$ pnpm add @docen/editor

<docen-document id="doc" filename="Welcome.docx"></docen-document>

<script type="module">
  import { registerComponents, applyTheme } from "@docen/editor";
  registerComponents();
  applyTheme("light");
</script>

Vue (@docen/vue)

A typed <DocenDocument> component — v-model for content, a v-slot="{ editor }" scope, and a template-ref expose — for Vue 3:

$ pnpm add @docen/vue

<script setup lang="ts">
import { ref } from "vue";
import type { JSONContent } from "@docen/docx";
import { DocenDocument } from "@docen/vue";
import { parseDOCX } from "@docen/docx";

// v-model carries Tiptap JSON; the template ref exposes the Tiptap editor
// plus a getJSON/setJSON pair.
const content = ref<JSONContent>({ type: "doc", content: [{ type: "paragraph" }] });
const editorRef = ref();

async function open(file: File) {
  const json = await parseDOCX(await file.arrayBuffer());
  editorRef.value?.setJSON(json); // preserves doc.attrs.styles
}
</script>

<template>
  <DocenDocument ref="editorRef" v-model="content" filename="Welcome.docx" editable />
</template>

Development

Prerequisites

• Node.js 18.x or higher
• pnpm 9.x or higher (recommended package manager)
• Git for version control

Getting Started

1. Clone the repository:

   git clone https://github.com/DemoMacro/docen.git
   cd docen
   

2. Install dependencies:

   pnpm install
   

3. Build all packages:

   pnpm build
   

Development Commands

pnpm build                       # Build all packages
cd packages/<pkg> && pnpm build  # Build one package
vp check                         # Lint & format

Contributing

We welcome contributions! See CONTRIBUTING.md for the full contribution workflow, coding standards, and PR checklist.

Support & Community

• 📫 Report Issues
• 📚 docen Documentation
• 📚 @docen/vue Documentation
• 📚 @docen/editor Documentation
• 📚 @docen/docx Documentation

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Built with ❤️ by Demo Macro