Name: Transform your document experience with Nutrient’s Document Authoring SDK
Uploaded: 2025-02-26T16:00:36.073Z
Duration: 33 min 8 s
Description: Transform your document experience with Nutrient’s Document Authoring SDK

Transcript for "Transform your document experience with Nutrient’s Document Authoring SDK": Hey, everyone. Welcome to today's product demonstration of the Nutrient Document Authoring SDK. For those of you who haven't seen document authoring yet, you're definitely in forgery. I'm Greg Ives with the product marketing team here at Nutrient. And joining me today is our VP of product, Miloš Đekić. Milos, as always, it's an absolute pleasure to be with you, man. It's good seeing you. Likewise. Excellent. Well, we will see you in a few minutes. I'll go ahead and and get things kicked off. So, before we jump into, that amazing demo, I do wanna cover a few housekeeping items. We know everyone is very busy, so we try to keep, you know, these webinars short and sweet. So we're gonna come in in right around thirty minutes or so today. If you have any questions during today's webinar, just find the q and a functionality. It should be off to the right side of your screen. Also, just a quick note, you will see that we prerecorded the actual demo portion of the webinar so that Milos is available to answer any questions you may have along the way. Finally, yes, this webinar is being recorded and will be available on demand on our site as soon as the webinar is over. Alright. Onto the agenda. First, many of you attending today might have missed our recent announcement around our rebrand. So to start things off, I'm gonna give a sixty second overview of the new company and why we re, we we why we rebranded. Then we'll jump into why you're here today, and that's to learn more about document authoring SDK. After a quick overview, I'll, hand it over to Miloš where he'll run through a demo of some of the common use cases that we see. And then at the end, we have saved some time for a few questions. Alright. So to kick things off, you're likely aware that we made a major announcement recently with a complete company rebrand. Whether you knew us before as PSPDFKit, Mahimbi, Orpolis, Aquaforest, or even Integrify, we are now Nutrient. Same company with all the same technology, just rebranded under a single banner with a single mission. And that mission is to evolve how humans experience and interact with documents. With the rebrand, we now have an unrivaled suite of document solutions all under one roof. Whether it's our industry leading SDKs, our n three sixty five low code solutions, or our workflow automation platform, we take pride in simplifying the complexity you face with speed, savings, and security, ultimately to become your solution for today's digital document challenges, but also, more importantly, to be your partner for tomorrow's document innovations. We are Nutrient, and we are thrilled to be building the future of document innovation alongside of you. Alright. Now before I hand things over to Milos, I wanted to give a quick overview of the document authoring SDK. As we all know, most of the, document editors out there on the market come with their share of limitations. Two of the most common complaints we hear about those other editors are that they lack the necessary editing tools and that they struggle to convert file types. That means developers are having to sacrifice user experience for a task as simple as editing a document. That's why we developed document authoring SDK. Introduced late last year, document authoring is designed to keep your users more engaged by providing a familiar, easy to use WYSIWYG user experience. In fact, as you'll see in just a moment, it's eerily similar to the word processing you'd find in Google Docs or Microsoft Word. Document authoring also helps streamline your document workflows. For instance, you're able to open docx files and export edited documents to docx or with perfect fidelity to PDF. Document authoring helps saves users time and effort by allowing you to open, design, edit, and export even the most complex documents from the convenience of a web browser. Finally, developers are able to leverage the versatility of our proprietary backward compatible doc JSON format to easily onboard, serialize, and deserialize while maintaining the adaptability needed for complex document handling. But don't just take my word for it. Let's see it in action. I can't wait to show you what we've done here. Through the course of this demo, I will walk you through document creation with templates and show you how the SDK handles working with docx files and how it makes perfect fidelity PDFs. I'll then briefly show you how we built translation into the document editor by using doc. Json, our proprietary file format that's compatible with Microsoft Word and NLLM. And then I'll spend some time showcasing all the word processing capabilities, talk a little bit about how the future looks like and what's the vision driving us to make this product the golden standard for browser based document authoring and templating. Let's dive in. I don't know if you know about this, but we have this awesome Nutrient repository. It's, you can exit in GitHub. It's, public, and we'll share the URL at the end of the webinar. If you're working with our tech, I strongly suggest starring it or something because we publish a bunch of examples and POCs here all the time. But the one example that I wanna show you today is this one, Document Generative Vanilla JS. I actually built this one myself. And I did it, you know, only to demonstrate how easy it is to work with our document authoring SDK. As the title says, this is just vanilla JavaScript, and my Java you know, my JS skills were more than enough to get this to work. So there's a bunch of instructions there if you wanna run it yourself, but I'm now gonna just, you know, after calling the repo, it's basically MPM start and I should get a server running here. There we go. Okay. So this is a document generator. The idea is to get from a template and some data to decently formatted PDF on the other end. So I have a couple of pretty fun templates in doc JSON format, a demo, checklist invoice and menu, and the fact that they're in doc JSON means they they're stored somewhere in the server. This is what we use to serialize documents, and, well, it's JSON. Let me grab that checklist template. So what happened is I took that JSON, doc JSON from the server, I opened it up with our document authoring SDK's editor. Please disregard this watermark. Watermark. I'm using an evolution copy of the SDK. By the way, this is how the code for this looks like. Right? It's like just load the document. I'm fetching it from the back end, literally. It's it's that trivial to get it running. And then, I mean, this is how the doc JSON looks like, by the way. This is it's I mean, it's a JSON. It has a structured it's very familiar to me. I can read it. There's a bunch of formatting here. I don't know. Looking at this for them, the ultimate checklist. Yeah. It's like right here. It's like some sort of text with the sub that's actually subtitle left aligned, invented this much and that much, blah blah blah. It's very, very, easy to read actually. Now, in a few minutes, I'll I'll show you what we actually built without UI using doc JSON. But this template I just opened, I can already immediately, edit it. Right? And then it's I'm using some pretty standard, you know, template notation. These brackets are used as delimiters to, describe a variable. This hashtag describes an object. I expect whatever templating engine grabs this to be able to iterate through objects. And I have a title. I have some sections. Each section has a title and a bunch of items, and then all items have a text. And this is what I expect, to be rendered by the templating engine. So leave let's leave the template be at the moment and just move to the next step. Here, I basically loaded a pretty fine JSON data file and used this open source highlighting tool to make it look pretty. And you can see here that I've actually configured these delimiters to match what is in the template. I'm gonna rename this to, like, Miloš because I can, and then just took it to the next step. So what happened here was I took the template from the first step, which was a doc JSON, and I exported it as a doc x. Then I took the data JSON from the second step and delivered both that doc x and that data to our web SDK, which has a built in Office templating engine, and I extracted it to generate a DocX. And then I took the DocX, imported here, and now you see now you see it, right here, and we're editing a DocX. Here's how this looks like in code. It's pretty straightforward. Right? I'm essentially grabbing that, template document. I'm exporting it as doc x. I am instructing the PSPD of Git which is a web SDK to populate the document template. I'm giving it that particular document and I'm giving it the data, Jason. By the way, when in doubt, just ask here, with the SKI thing on our website how to, I don't know, export doc x with authoring, SDK. It's going to give you a very, very good response, very good, guide. And I I think we are about to launch a GitHub Copilot extension as well, so you can literally do all of this in Versus Code. But back back to the topic at hand. Obviously, this really didn't turn out that well. Doesn't look like a checklist, so I'm briefly gonna go go back two steps and fix this in the template itself. So I'm missing a space here. I'm gonna do a new line here, and I think this will fix it. Let's next next this thing. There we go. Amazing. So again, right? Authoring SDK generated a DOCX template. Web SDK took the DOCX and the JSON data generated this DOCX output, which I then opened up with the authoring SDK. And now I can basically do some final styling changes. Let's do this. Let's make this, next page, next page, next page. This looks polished enough to me. It looks exactly like a like a checklist. And next step, boom. I just used the authoring SDK to export the document from the editor into PDF. If you disregard, you know, the evaluation watermark here, you will see that the document looks exactly like it did in the editor. So, we're talking pixel perfect % fidelity. Okay? Let's recap real quick. What can you do with document authoring? You can create a template from scratch or by importing a doc JSON or docx. Obviously, doc JSON could have been assembled somewhere programmatically as well. I mean, it's JSON. Then you can edit a document, let's say the output of applying data to a template with the Web SDK again, either doc JSON or docx, all in the browser, and export a pixel perfect PDF. So imagine if you're building, I don't know, a signing app, and you could basically cover the entire life cycle. User uploads a template they've authored with, I don't know, marks a word, or they pick from under your predefined templates, then they use doc authoring to tweak the template. Web SDK, for example, generates the document based on some data. The user applies, I don't know, their name appears everywhere where the signature is expected, for example. And then the user tweaks the final outcome before moving to signing. If things went terribly wrong because the template didn't work out, just go back and edit the template, right? All inside your app. And then finally, the user gets a pixel perfect PDF, which they can sign with our web SDK. And for example, if it needs to be digitally signed, I don't know, use our DWS API to apply a Apadis compatible signature, whatever. I hope you like that. And before I deep dive into editing capabilities, I promise to show you how we built the translation into this thing. Okay. So we are basically translating a document live while it's opened in the authoring SDK. But in the pack, what we're doing is we're grabbing that doc JSON and knowing and understanding the structure, we're shipping it to an LLM and telling the LLM to translate from, you know, source language to destination language and then we're simply replacing the content of that in the document itself. It's just very, very easy to do. So now I'm gonna go to our online demo. So this one does not have a wiremark. It annoyed me a bit there. And, you know, if the depth of application of our authoring SDK, has demonstrated, didn't win you over yet, well, let's talk about the editing experiences. I'm going to actually open up a document. It's a DocX document, and I have created this one myself. Alright. So I've used this exact demo to create this document literally from scratch. And my takeaway from the experience is, I mean, it's fast. It's smooth. It's very reminiscent of the experience you get with Google Docs, but this one, you can actually plug into your app. Right? It also doesn't care much about the size of the document. I've I've opened, like, crazy big word documents, and there was no slowing down or anything. It it's such a well optimized, lightweight SDK. So what do we have here? For starters, I wanna show you page layout options. Right? So we, I mean, this already makes our editor very unique, especially when looking at some browser based, DOCX editors. Right? It's this is as powerful as you'd expect from MS Word. Look, if I change things, let's move to AI file, for example. Look how the content perfectly perfectly reflows. I mean, there's some there's some page breaks here that we can fix. But then it's just it's just phenomenal. Just phenomenal. Right? Let me go back to, let me go back to a four because I just like it better. You've noticed that I'm using this red color for like headings and that's actually one of our brand colors called coral. This is pretty neat. Right? The document actually had its own styles. This document, I already altered it myself, so I saved them, and this works exactly like that if you open up, something that you've created in Microsoft Word. Like, you get the same experience that you get with Google Docs or, I don't know, Microsoft Word. And if I wanna make a change, let's say, I want to make all headings, green. I think this one is called data green, also one of our colors. I can grab this and say, update heading one to match. And boom. All headings are now green. So again, very, very powerful. And again, if you pull it from Microsoft Word, you open up a docx file, it would just all work. No need to, like, I don't know, reformat anything, which is pretty cool. I bet you also notice this image here. Right? So, yeah, images are definitely supported. You can actually, like, insert them from the toolbar. And then when they're there, you can, I don't know, move them around, resize them? Doesn't look that well though, so I'm just trying to bring it back as it was. It works pretty good. But in this particular version that I'm showcasing at the moment, we still can't move them around, but this is about to land. Actually, I can show you a little bit of a sneak peek. So don't mind this very testy document. But look at this image right here. I think it's a goat or something. I can actually move this one around. So this is all just working already, but it still hasn't landed in that, version over there. So, yeah. I mean, we're we're soon gonna be supporting dragging images around and whatnot. Now, obviously, there's a lot of rich text formatting starting with the font. So there's a lot of built in fonts, but you can expose the SDK to a bunch of custom fonts in a similar way in which your web SDK works when you're doing things like editing PDFs, right? Then there's obviously text size. And, you know, please notice how I'm, like, double clicking and triple clicking to select text here. All these are, like, well established controls, right, in the void. And both with the mouse or trackpad, keyboard, all of it is just supported out of the box. Right? Then there's your classics, you know, bold, italic, whatnot, underlines and, I don't know, structures, that you'd you'd you'd expect. It just all works like a charm. Let's move on to text core. I mean, you've seen me do this with, like, like, the titles and whatnot, but we support, custom text colors. Right? Which you've already seen. The reason why why these are here is because I've I've saved them with the document. Right? So if, again, if you open up a docx, there were some custom colors there. It will just pull them in. Same goes for doc json as well. Right? So you can just add a custom color, drop the hex right there, or play with this selector. And, I mean, easy peasy lemon squeezy. Right? Moving on to things like alignment. Everything you've come to expect, from left to right and justify and center. And then let's go straight to list. I mean, you can already see that these are these are supported. Let me deal with this break. These are already supported. There's actually multiple multiple, levels supported. I can indent. I can out dent. Sorry. And I'm actually using using keyboard shortcuts. Right? And, but I also have these toolbar buttons for that as well, so I can play with that. There's multiple levels of hierarchy supported pretty smooth. You can obviously play with the styling of the list and enumeration, so you can see it here. Right? I can't I can grab this thing and say, pardon me, and say, I don't know, I want this style and that style. And it will just figure it out. Same goes for enumeration. I can turn this into a numbered list. I can play with numbers, indent, and do things. And, obviously, I can I can play with, you know, restarting and continuing previous numbering? All of that is already supported. Something I find to be extremely useful is this one. You can actually go ahead and clear all formatting. I've seen I don't know. This is what your users are are gonna expect. You know, I've seen a bunch of these, like, rich text that are in even word processor level, DOCX editors similar to ours here that simply don't have this option. I can tell you it will be it will be missed. Let me show you something that's not here actually, which is tables. So you can go ahead and insert a table from the toolbar. And then you can play with things with a dedicated menu, like add some rows, add some columns, and then, I don't know, let's let's grab a couple of columns and style them a little bit, give them a background. Let's grab these and give them give them some some different borders, for example. I like that. Left, right, bottom. Cool. Why give them some inner different colors, right? Because we can. Amazing. Pretty much things that you can also do in in Plexus Microsoft Word, not necessarily Google Docs, right? But the the cool thing, is that when you import a table from from a Microsoft Word document, you know, you don't really lose any formatting, which is which is extremely important, especially for, you know, table heavy documents like, I don't know, invoices and stuff like that. So I just don't lose any formatting. And, one of the reasons also is the fact that, you can you can play with paddings for these individual columns, but you can also play with column width. Right? By the way, I'm using, centimeters here. I'm used to that, but you can just use, I don't know, points or inches or whatever, I guess, works for you, and then everything sort of, adjusts. Right? So inches. Right? Or you can just set auto auto width, which is just amazing. And, again, the the most important thing here is if, I don't know, your users are using their previously built DocX templates for something, I don't know, when they import, there's just no need to reformat anything. I'm not sure if you've seen this, but I've been doing a bunch of undo redo. Right? And I've been using the keyboard shortcut for that. But there's obviously there's obviously, the toolbar option as well. So undo, redo. It's a lot of history there, and it just works. So I've been using command z and command shift c, by the way, on on a Mac. And there's one more really, really cool thing that I really like. It really helps. And that's this one. It's formatting mark. Right? You remember that from Microsoft Word. It's just super useful, especially when you're dealing with this multiple, styling options and whatnot. And I don't know if you noticed this, but, when you're going through the toolbar and whatnot, you can actually see that there are some keyboard shortcuts. Right? So, see line break, section break. I've seen this one, has like command, command shift p. Let me try that. Command shift p. Yeah, it all just works. And there's also, as you've seen, the option to insert some breaks. So line break. Cool. And then a section break. Let me try a keyboard shortcut. So command shift and return. Boom. Yeah. There we go. And a and a page break with with command command return. By the way, I'm using my trackpad now to zoom in and out. Again, stuff that you'd expect to just work, but there's obviously also that convenient, toolbar item as well. I already told you can confirm, you know, configure the preferred units, but that reminds me, the UI will actually support localization out of the box. Not in this version, but I can show you a sneak peek of that as well. Here's a version of it. That should have yeah, there we go. So, I can select a different locale. We used these three for the to start with, so I just switched to French, and as you can see, everything is in French. And that goes for the context menu which by the way also exists. Copier, I'm not sure if I'm giving it justice, but, you know. I have no idea. Sorry. I really can't read French, but, maybe I can try with German. Nope. Anyways, if you're wondering if, left to right is gonna be supported with localization, the answer is yes. Absolutely. Quick reminder, while we're on the editor, you can always export to bulk x or export to PDF. In both cases, what you see here is exactly what you're gonna get. So, I mean, let's try it. Let's download PDF. Yeah. See that? Pixel perfect fidelity. Okay. That was it, folks. But before I let you go, I really wanna tell you a little bit about the future. So this is what we'll be working on. We'll be improving the fidelity of the docx import as we support more and more word processing capabilities such as, I don't know, headers and footers, image manipulation, page numbers, etcetera. Then we'll work on introducing collaborations, starting with comments, suggesting changes, real time collaborative editing, and of course, comments and red lines will be compatible with MS Word. We'll be introducing document versioning, built in assistance for content creation. But what you will love, and is actually one of the first things that will land in the SDK, we will enable programmatic content manipulation. Yes. There's gonna be an API that will allow, all this editing magic programmatically. Now when you add to this, the fact that the entire UI that you see here is built using our design framework, which is, themeable, uses tokenization to bring things like, light, dark mode, element states, etcetera, etcetera, you will be able to create fully custom interfaces for content creation. So there's gonna be an API to do all this editing, and and you can completely revamp this UI or at at the bare minimum, theme it to completely fit into your look and feel. Our design framework is there from the get go and that means you'll be able to just completely customize this toolbar and the context menu eventually and whatnot. In fact, we'll likely already use all that customization power to bring to life a more advanced template creation interface. Thinking about all this, you can see how much we want to make this product the future of content creation and document authoring for the browser. There's so much more to come from this team. I mean, if you ask me, I'm pretty sure we'll be editing PDFs like this at some point as well with this level of user experience. And it already works so good. The experience is just already great. I haven't been so excited to showcase the product in like forever. It is truly a plug and play Google Docs experience for your web app. Thank you so much for your attention. Miloš, what an amazing demo. Really nice work. So everyone just saw, we made it as easy and as intuitive as possible for end users to design their documents no matter the use case. We've provided advanced features like complex tables, undo, redo, and sophisticated numbering. And with the ability to open and work on docx files and then save edits back to docx or even x, export to a PDF, document authoring ensures that documents look consistent across all browsers and when saved. Alright. So that brings us to the end of today's presentation. If you have any questions about what was just covered, go ahead and drop them in the q and a now. Or if you'd like to talk about your specific needs, with, one of our team members after the webinar, we'd love to hear from you, whether that's reaching out to our customer success team or a member of our sales org. We also invite you to visit Nutrient to learn more about document authoring SDK and all of the other, solutions that we provide. You'll find a ton of helpful resources like our blog, product pages, guides, and demos. You can also sign up for a free trial of our solutions to test things out for your self. Alright, Miloš. Let's see how many questions we can get through. I saw a few coming in. The first, are there any limitations on exporting documents such as file size? Oh, good question. There there's no limitations. So this is a % browser based, SDK. So the document actually lives in the browser. So as long as the browser can handle it, it can be any size and you just download it and export it or do whatever. So zero limitation in that sense. Great. Alright. The next. Can it open PPTX, so PowerPoint files? No. So opening opening docx files, Office files is just one out of many things that the SDK does. Right? So we didn't necessarily build an Office editor even though you absolutely can and should use it for that purpose because it does a very good job. But we are not really focused on on building presentations per se or or building an an office editor per se where we have a much bigger, role to play with this SDK. Makes sense. Okay. See the next one. Is this a part of your web SDK? I I I can understand how somebody could confuse, the two. This is a standalone SDK, so it's not built into the West web SDK. It's not a part of it, but it is something that's on our radar. We we are thinking how we could make this very convenient for our Web SDK customers so that they can just, let's say, open a DOCX rather than a PDF, in the Web SDK and just, you know, start editing. Great. Okay. Looks like we got one more. Can this be integrated into Salesforce? Yes. It can. Salesforce, SharePoint, anything that you can think of, you can definitely integrate. It's it's funny that that that it's that you're asking about Salesforce because Salesforce actually has so many limitations in terms of, you know, what you can use. Like, you can't really easily fetch remote resources, I believe. So our document SDK is very suitable for that kind of, deployment because it works a % in the browser. Yeah. I've seen that in action and it it's it is amazing. Alright. Well, that brings us, to the end. That's all the time we have for today. So if we didn't get to your questions, no worries. We'll follow-up directly after the webinar as we always do. On behalf of Miloš and the entire Nutrien team, thank you so much for joining us today. Enjoy the rest of your day too. Thank you.