Skip to content

Commit c0272c3

Browse files
committed
update quick start in readme
1 parent 5ae07a8 commit c0272c3

1 file changed

Lines changed: 22 additions & 7 deletions

File tree

README.md

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333

3434
## ✨ Features
3535

36-
- **📝 Microsoft Word compatible**: View and edit DOCX documents (and view PDFs too) with great import/export, advanced formatting, comments, and tracked changes
36+
- **📝 Microsoft Word compatible**: View and edit DOCX documents with great import/export, advanced formatting, comments, and tracked changes
3737
- **🛠️ Easy to integrate**: Open source, can be self-hosted, seamlessly integrates with React, Vue, vanilla JavaScript, and more
3838
- **👥 Real-time collaboration**: Features multiplayer editing, live updates, commenting, sharing, and revision history
3939
- **📐 Extensible architecture**: Modular design makes it easy to extend, brand, and customize
@@ -47,23 +47,38 @@
4747
npm install @harbour-enterprises/superdoc
4848
```
4949

50+
Or install with CDN
51+
52+
```html
53+
<link rel="stylesheet" href="https://unpkg.com/@harbour-enterprises/superdoc/dist/style.css">
54+
<script type="module" src="https://unpkg.com/@harbour-enterprises/superdoc/dist/superdoc.umd.js"></script>
55+
```
56+
5057
### Basic usage
5158

5259
```javascript
5360
import '@harbour-enterprises/superdoc/style.css';
5461
import { SuperDoc } from '@harbour-enterprises/superdoc';
5562

56-
const url = '...'; // The URL to your document
63+
// For CDN use - `SuperDocLibrary.SuperDoc`
5764
const superdoc = new SuperDoc({
5865
selector: '#superdoc',
59-
documents: [{
60-
id: 'my-doc-id',
61-
type: 'docx',
62-
url // *JS file object or file URL
63-
}]
66+
toolbar: 'superdoc-toolbar',
67+
documentMode: 'editing',
68+
document: '/sample.docx', // URL, File or document config
69+
pagination: true,
70+
rulers: true,
71+
onReady: (event) => {
72+
console.log('SuperDoc is ready', event);
73+
},
74+
onEditorCreate: (event) => {
75+
console.log('Editor is created', event);
76+
},
6477
});
6578
```
6679

80+
For a list of all available properties and events, see the documentation or refer to [SuperDoc.js](packages/superdoc/src/core/SuperDoc.js)
81+
6782
## 📖 Documentation
6883

6984
Visit our <a href="https://docs.superdoc.dev" target="_blank">documentation site</a> and <a href="https://github.com/Harbour-Enterprises/SuperDoc/tree/main/examples" target="_blank">code examples</a>. Key topics include:

0 commit comments

Comments
 (0)