Skip to content

update quick start in readme #526

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
harbournick merged 1 commit into from
May 23, 2025
Merged

update quick start in readme #526

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 22 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@

## ✨ Features

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

Or install with CDN

```html
<link rel="stylesheet" href="https://unpkg.com/@harbour-enterprises/superdoc/dist/style.css">
<script type="module" src="https://unpkg.com/@harbour-enterprises/superdoc/dist/superdoc.umd.js"></script>
```

### Basic usage

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

const url = '...'; // The URL to your document
// For CDN use - `SuperDocLibrary.SuperDoc`
const superdoc = new SuperDoc({
selector: '#superdoc',
documents: [{
id: 'my-doc-id',
type: 'docx',
url // *JS file object or file URL
}]
toolbar: '#superdoc-toolbar',
document: '/sample.docx', // URL, File or document config
documentMode: 'editing',
pagination: true,
rulers: true,
onReady: (event) => {
console.log('SuperDoc is ready', event);
},
onEditorCreate: (event) => {
console.log('Editor is created', event);
},
});
```

For a list of all available properties and events, see the documentation or refer to [SuperDoc.js](packages/superdoc/src/core/SuperDoc.js)

## 📖 Documentation

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:
Expand Down
Loading