Creating an HTML5 Based Document Editor

Share this article

No matter what kind of project you are involved with, at some point you will most likely end up working with electronic documents. We were no different. Being a business service provider, we soon realized how useful an internal document collaboration system could be. Basically, that was a jump-start for the development process that grew into something bigger than just creating a tool for our personal needs. We ventured to make the first HTML5 based document editor.

For starters

The online document management segment boasts such giants as Google, Microsoft, Zoho etc., so at first we decided to keep to the beaten track and use time-tested methods for product development. Long story short, files were converted to HTML format on our server to make working in a browser possible. The editing feature was enabled by the means of an open source CKEditor. The reverse conversion from HTML to the desired format was sprung into action allowing users to save their work. The outcome was neither surprising nor pleasing, as the editor was facing absolutely the same problems as its rivals, from a poor toolset to serious display errors after saving, converting or printing the document.


One of the most basic needs a generic user has is the ability to evaluate the document size. Desktop editors exploit pagination for that matter, which is a tough challenge for online ones.The problem is that current online editors work with a single HTML page no matter how much information it contains. In other words, if you take a 700-page document, the browser would still perceive it as one HTML page resembling a huge roll that has to be rerendered completely every time you make a change. We jokingly call it “papyrus effect”. Only two currently developing editors have this feature. While Zoho’s pagination is best characterized as approximate, Google Docs platform performs more accurately, but that in turn aggravates the notorious “papyrus effect” caused by the necessity to rerender the file as well as reapply pagination over again every time you type in a new symbol, for instance. One learns from one’s mistakes, so we decided to make proper pagination our primary objective. The first thing we had to do was to renounce old methods.

Development from scratch

Taking desktop editors as our benchmark for successful pagination issue resolution, we determined to use the same principles to get a worthy result. We changed the code architecture in the document rendering section so now all operations are performed on the visible part of the document, while the rest of the document is rendered only when referred to. In that way, we resolved several problems at once, making it possible to:
  • avoid low-speed operation with multipage documents (e.g. when changing type family)
  • zoom in/out the document itself (not the browser window)
  • display invisible characters
  • change the size of the margins

Identical Display Challenge

Another thing we noticed while working with online editors was the problem of non-identical document display in various browsers and after printing. From a user’s point of view it is just one issue, but from the developer’s at least two: font measuring (acquisition of font metrics) and text rendering in the document. Currently, online document editors use the browser for both rendering and measuring. However, browser measuring is never precise. Besides, it lacks important attributes like ascenders, descenders and other metrics. Moreover, every browser can have its own measuring means which consequently leads to improper display of the same document in different browsers. The same applies to the ways browsers render text. Current editors use browsers to render text on a “canvas” provided by the OS. That’s why we had to come up with our own font metrics acquisition engine as well as our own rendering methods. As a result, we have font metrics under control so we are able to send requests to our renderer. Without any doubt we have to give credit for the the new HTML5 technology (canvas element to be more exact) that grants access to the pixels of the content. Every single element is rendered accurately to a pixel and consequently is not dependent on a browser or an OS. Apart from identical display in different browsers, we managed to get good results when printing the document (saving it to .pdf format). Storing file parameters in a meta-file with a command set allows us to avoid conversion that inevitably causes quality losses.


Features we have become accustomed to on a desktop editor, such line spacing, an abundance of fonts and text styles, multilevel numeration, editing of tables or multipage reports are already penetrating the realm of online editing, no matter which browser you use, or where you’re trying to import your document from. In the long run, HTML5 guarantees a variety of even more significant enchantments in this sphere. Meanwhile, this is what we ended up with: html5 editor screenshot The editor is now a part of the TeamLab Office collaboration suite and can be tested there after sign in, or on our demo-portal (which is much quicker) at

Frequently Asked Questions (FAQs) about HTML5 Based Document Editor

How does an HTML5 based document editor differ from traditional document editors?

HTML5 based document editors are web-based applications that allow you to create, edit, and manage documents online. Unlike traditional document editors that require software installation, HTML5 editors run directly in your web browser. This means you can access your documents from any device with an internet connection. Additionally, these editors often come with features like real-time collaboration, which allows multiple users to work on the same document simultaneously.

Can I use an HTML5 based document editor offline?

While HTML5 based document editors are primarily designed for online use, some do offer offline capabilities. This means you can continue working on your documents even without an internet connection. Once you’re back online, your changes will be automatically synced.

Is it safe to use an HTML5 based document editor?

Yes, it is safe to use an HTML5 based document editor. These editors typically use secure cloud storage to save your documents. This means your data is encrypted and protected from unauthorized access. However, it’s always a good idea to check the security measures of the specific editor you’re using.

Can I collaborate with others using an HTML5 based document editor?

Absolutely! One of the key advantages of HTML5 based document editors is the ability to collaborate in real-time. You can share your documents with others and they can make changes simultaneously. This makes it a great tool for team projects.

How can I convert my documents to different formats using an HTML5 based document editor?

Most HTML5 based document editors support a variety of file formats. You can easily convert your documents to formats like PDF, DOCX, TXT, and more. Simply open your document in the editor, choose the ‘Save As’ or ‘Export’ option, and select your desired format.

Can I use an HTML5 based document editor on my mobile device?

Yes, you can use an HTML5 based document editor on your mobile device. Since these editors run in your web browser, they are compatible with any device that has an internet connection. Some editors also offer mobile apps for an even better user experience.

Do I need any special skills to use an HTML5 based document editor?

No, you don’t need any special skills to use an HTML5 based document editor. These editors are designed to be user-friendly and intuitive. If you’re familiar with traditional document editors, you should have no trouble using an HTML5 editor.

Can I use an HTML5 based document editor for free?

Many HTML5 based document editors offer free versions with basic features. However, for access to advanced features like unlimited storage, collaboration tools, and premium support, you may need to upgrade to a paid plan.

Can I customize the interface of an HTML5 based document editor?

Yes, many HTML5 based document editors allow you to customize the interface to suit your preferences. You can often change the layout, color scheme, and other visual elements to create a personalized editing environment.

Can I integrate an HTML5 based document editor with other tools I use?

Yes, many HTML5 based document editors can be integrated with other tools you use. This can include email clients, project management tools, cloud storage services, and more. This makes it easier to manage your documents and collaborate with others.

Alexander MitnikovAlexander Mitnikov
View Author

Alexander Mitnikov is a freelance translator interested in modern business and technology trends. His passion is software that helps entrepreneurs and freelancers like himself enhance their working process to the full. He is currently working as a marketing manager at Teamlab Office.

HTML5 Dev Center
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week