Get started with React and Next.js
Wrap the viewer in a client component.
Install
npm install docuverseA licence key is needed: without one, nothing opens. Make a free account for trial keys (everything works, with a watermark), or choose a plan on the pricing page. Each key is for one SDK, made in your account under Keys: a Web SDK key for the viewer in websites (
licenseKey), a Server SDK key for Node.js (setLicenseKey(key)) and .NET (License.SetKey(key)), a Mobile SDK key for apps. A key used with another SDK is refused with an error that says which key to make.A viewer component
Create the viewer in useEffect and destroy it in the cleanup, so React’s strict mode and route changes don’t leave a second viewer behind.
'use client';import { useEffect, useRef } from 'react';import { createViewer } from 'docuverse/viewer'; export default function DocumentViewer({ src, author }) { const box = useRef(null); useEffect(() => { let viewer; let cancelled = false; createViewer(box.current, { document: src, author }).then((v) => { if (cancelled) v.destroy(); else viewer = v; }); return () => { cancelled = true; viewer?.destroy(); }; }, [src, author]); return <div ref={box} style={{ height: '100vh' }} />;}Fonts for Word documents
Word documents use the fonts they name. Serve installed fonts to the viewer with a route handler, and point the viewer at it:
import { fontResponse } from 'docuverse/fonts';export const GET = (request) => fontResponse(request); // in the component: createViewer(element, { document: src, fontUrl: '/uds-fonts' })The viewer runs in the browser only. Import it from a
'use client' file; a server component can pass it the document URL as a prop.