Legalesign Document Editor/Viewer
npm install legalesign-document-viewerThe Legalesign Document Viewer is a platform-agnostic web component that allows you to edit, preview, and customize templates for document signing. Built with StencilJS, it works seamlessly with vanilla JavaScript, React, Vue, Angular, or any web framework.
This plug and play component is designed so that you can integrate key parts of document creation into your internal systems, such as a CRM or line of business application. As long as your system can render and support HTML components, you can use the Document Viewer. If you need additional help integrating the Document Viewer into your technical stack please get in touch with our support desk. You can use these larger widgets with REST/GraphQL API integrations to provide seamless document signing processes for your staff and customers.
``bash`
npm install legalesign-document-viewer
`bash`
npm install legalesign-document-viewer-react
Add the component scripts to your HTML:
`html`
templateid="YOUR_TEMPLATE_ID"
token="YOUR_AUTH_TOKEN"
endpoint="YOUR_GRAPHQL_ENDPOINT"
>
`jsx
import { LsDocumentViewer } from 'legalesign-document-viewer-react';
function App() {
return (
token="YOUR_AUTH_TOKEN"
endpoint="YOUR_GRAPHQL_ENDPOINT"
mode="compose"
/>
);
}
`
`html`
token="eyJraWQiOiJBTkJIeT..."
`html`
templateid="dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"
`html`
For more information on recipients see Recipients.
`html`
recipients='[
{"email": "user@example.com", "firstname": "John", "lastname": "Doe", "signerIndex": 1},
{"email": "user2@example.com", "firstname": "Jane", "lastname": "Smith", "signerIndex": 2}
]'
...>
Compose mode automatically:
- Detects pre-generated recipients
- Hides the sender from dropdown
- Hides document options
- Shows required fields by default
- Removes sender and sender fields from the editor
- Promotes quick selection of the required fields for each recipient
`html`
Compose mode automatically:
- Hides the toolbar
- Hides document options
- Hides toolbox
- Makes participants and fields read-only
`html`
...
>
`html`
endpoint="https://your-api.appsync-api.region.amazonaws.com/graphql"
`html`
{"email": "user@example.com", "firstname": "John", "lastname": "Doe", "signerIndex": 1},
{"email": "user2@example.com", "firstname": "Jane", "lastname": "Smith", "signerIndex": 2}
{"email": "user3@example.com", "firstname": "Joan", "lastname": "Mitchell", "signerIndex": 102, roleType: "WITNESS"}
]'
...
>
`html`
Listen to component events to track changes:
`javascript
const editor = document.querySelector('ls-document-viewer');
editor.addEventListener('update', (event) => {
console.log('Template changed:', event.detail);
});
`
You can track whether a template have become valid or invalid using
the validate event.
`javascript
const editor = document.querySelector('ls-document-viewer');
editor.addEventListener('validate', (event) => {
console.log('Template validation changed:', event.detail.valid);
});
`
Using an event in react prefixes it with the familiar on.
`jsx`
console.log('Template changed:', event.detail);
}}
...
/>
#### update event
Fired when the document template is changed, such as adding or removing fields. Provides not only
the event that caused it but also the updated state of the template object as JSON.
#### validate eventvalid
Fired when the document template is changed, the property in detail shows if the
template has become valid or invalid.
#### selectFields event
Fired when a field is selected in the editor.
#### addParticipant event
Fired when a participant role is added to the template.
`html
templateid="dHBsYjQ5YTg5NWQtYWRhMy0xMWYwLWIxZGMtMDY5NzZlZmU0MzIx"
token="YOUR_TOKEN_HERE"
mode="compose"
recipients='[
{"email": "signer@example.com", "firstname": "John", "lastname": "Doe", "signerIndex": 1}
]'
filtertoolbox="signature|initials|date"
>
``
The component uses modern web standards and supports:
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
- API Documentation{:target="_blank"}
- NPM Package{:target="_blank"}
- React Package{:target="_blank"}
- Support{:target="_blank"}
For technical support or questions about integration, contact the Legalesign support team or visit the API documentation at https://apidocs.legalesign.com.