@docvyu/sdk
v0.0.6
Published
DocVyu DOCX Editor SDK - Universal document editor for any frontend framework
Maintainers
ltapia.aReadme
@docvyu/sdk
Universal DOCX editor SDK for any frontend framework. Built with WebAssembly for native performance.
Features
- 🚀 High Performance - Powered by Rust/WebAssembly
- 📄 Full DOCX Support - Load, edit, and save Word documents
- 🎨 Rich Formatting - Bold, italic, underline, fonts, colors, alignment
- 📝 Lists Support - Bullets and numbered lists with multiple formats
- 📐 Page Settings - Margins, page sizes, zoom
- 🌐 Multi-language - English, Spanish, Portuguese
- 🔌 Universal - Works with vanilla JS, React, Vue, Angular, etc.
- 🎁 Plug & Play - Complete editor UI ready to use
Installation
NPM (for bundlers)
npm install @docvyu/sdkCDN (for vanilla JS)
<link rel="stylesheet" href="https://unpkg.com/@docvyu/sdk/dist/cdn/docvyu.css">
<script src="https://unpkg.com/@docvyu/sdk/dist/cdn/docvyu.min.js"></script>Quick Start
Vanilla JavaScript (CDN)
The easiest way - just include the CDN files and go:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@docvyu/sdk/dist/cdn/docvyu.css">
<script src="https://unpkg.com/@docvyu/sdk/dist/cdn/docvyu.min.js"></script>
<style>
#editor { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="editor"></div>
<script>
var app = new DocvyuApp({
container: '#editor',
locale: 'en', // 'en', 'es', 'pt'
// licenseKey: 'your-api-key', // Optional: for licensed features
onReady: function(instance) {
console.log('DocVyu Editor is ready!');
},
onError: function(error) {
console.error('Error:', error);
}
});
app.init();
</script>
</body>
</html>That's it! You get a complete Word-like document editor with:
- Title bar with save/open buttons
- Ribbon with tabs (Home, Insert, Layout, View)
- Full formatting toolbar (fonts, sizes, colors, alignment)
- Document canvas with WYSIWYG editing
- Status bar with zoom controls and language selector
React
import React, { useRef, useEffect, useState } from 'react';
import { DocvyuApp } from '@docvyu/sdk';
function DocvyuEditor({ locale = 'en', licenseKey, onReady }) {
const containerRef = useRef(null);
const appRef = useRef(null);
useEffect(() => {
if (!containerRef.current) return;
const initApp = async () => {
appRef.current = new DocvyuApp({
container: containerRef.current,
locale: locale,
licenseKey: licenseKey,
onContentChange: () => console.log('Content changed'),
onSelectionChange: (state) => console.log('Selection:', state),
});
await appRef.current.init();
if (onReady) onReady(appRef.current);
};
initApp();
return () => {
if (appRef.current) appRef.current.destroy();
};
}, [locale, licenseKey]);
return <div ref={containerRef} style={{ width: '100%', height: '100vh' }} />;
}
export default function App() {
return <DocvyuEditor locale="en" onReady={(app) => console.log('Ready!', app)} />;
}Vue 3
<template>
<div ref="containerRef" class="editor-container"></div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { DocvyuApp } from '@docvyu/sdk';
const containerRef = ref(null);
let app = null;
onMounted(async () => {
app = new DocvyuApp({
container: containerRef.value,
locale: 'en',
// licenseKey: 'your-api-key',
onContentChange: () => console.log('Content changed'),
onSelectionChange: (state) => console.log('Selection:', state),
});
await app.init();
console.log('DocVyu Editor is ready!');
});
onUnmounted(() => {
if (app) app.destroy();
});
// Expose methods for parent component
defineExpose({
loadDocument: (data) => app?.loadDocument(data),
downloadDocument: (filename) => app?.downloadDocument(filename),
});
</script>
<style scoped>
.editor-container {
width: 100%;
height: 100vh;
}
</style>Configuration Options
const app = new DocvyuApp({
// Required
container: '#editor', // CSS selector or HTMLElement
// Optional
locale: 'en', // 'en', 'es', 'pt'
licenseKey: 'dvyu_live_xxx', // For paid tiers
appTitle: 'My Editor', // Title bar text
// Callbacks
onReady: (instance) => {}, // Called when editor is ready
onError: (error) => {}, // Called on initialization error
onContentChange: () => {}, // Called when content changes
onSelectionChange: (state) => {},// Called when selection changes
onLicenseChange: (info) => {}, // Called when license info changes
});
// Initialize (returns a Promise)
await app.init();API Reference
DocvyuApp Methods
| Method | Description |
|--------|-------------|
| init() | Initialize the application (async) |
| loadDocument(data: Uint8Array) | Load a DOCX file |
| getDocumentBytes(): Uint8Array | Get document as binary data |
| downloadDocument(filename) | Download document to user's device |
| setLocale(locale) | Change UI language |
| destroy() | Clean up resources |
Formatting Methods
| Method | Description |
|--------|-------------|
| setBold(enable) | Toggle bold |
| setItalic(enable) | Toggle italic |
| setUnderline(enable) | Toggle underline |
| setFontSize(size) | Set font size (e.g., 12, 14, 16) |
| setFontFamily(family) | Set font family (e.g., 'Arial') |
| setFontColor(color) | Set font color (e.g., '#ff0000') |
| setAlignment(align) | Set alignment ('left', 'center', 'right', 'justify') |
| setBulletList(enable) | Toggle bullet list |
| setNumberedList(enable) | Toggle numbered list |
Zoom Methods
| Method | Description |
|--------|-------------|
| zoomIn() | Increase zoom |
| zoomOut() | Decrease zoom |
| setZoom(level) | Set zoom level (e.g., 1.5 for 150%) |
| getZoom() | Get current zoom level |
License Tiers
| Feature | Free | Professional | Enterprise | |---------|------|--------------|------------| | Uses | 5 per IP | Unlimited | Unlimited | | Load/Save | ✅ | ✅ | ✅ | | Text Editing | ✅ | ✅ | ✅ | | Formatting | ✅ | ✅ | ✅ | | Watermark | Yes | No | No | | Max Doc Size | 5MB | 25MB | Unlimited |
Getting an API Key
- Visit docvyu.com/pricing
- Choose a plan that fits your needs
- Get your API key from the dashboard
- Use it in your application
Support
License
Commercial license. See LICENSE for details.