• Home

  • Productivity

  • App tips

Google Docs is switching to canvas-based rendering. Here's what that means.

By Tyler Robertson · May 24, 2021
Google Docs logo, which is a simplified illustration of a piece of paper with a dogeared corner.

On May 11, Google announced that Docs is going to start using canvas-based rendering. It's a change that most of us won't be able to see visually, but it has huge implications for what's coming next from Google—and we're already starting to reap the benefits.

What is canvas-based rendering?

Before this change, a Google Doc was really just a lot of HyperText Markup Language (HTML), which told the page what the text should look like. For example, when you selected some text and clicked the Bold button, Google Docs told the page to add <b> and </b> tags around the text, which your browser then translated into a bolded font. Put another way, Google Docs was acting as the contractor to your architect, running around and laying down bricks of HTML as you built and designed your document, making sure everything looked right in the final product.

With the update to canvas-based rendering, Google Docs is throwing that approach out the window. Instead of piling on lots and lots of tags that tell us how the document should look, there's a single "canvas" element, which lets Google draw everything they need using JavaScript, a method already widely used in everything from data visualization to video games

Going back to the contractor/architect metaphor, this new method is like painting a very convincing picture of a house instead of building it brick-by-painstaking-brick. Or that episode of Looney Tunes where Wile E. Coyote draws a picture of a tunnel, but Road Runner can actually use it as a tunnel.

The roadrunner using a painted tunnel as a real tunnel

What does this mean for me?

At first? Probably nothing.

Google pointed out in their announcement that some Google Chrome extensions that relied on the HTML used by Google Docs will probably stop working, but they didn't call out any specific examples. If you think you might be using one of those extensions, they provided an example file using the new method for testing.

But in the long term, you're going to see a few practical benefits:

  1. Canvas lets Docs pick which parts of the doc you need to see right away and ignore the rest, meaning those big documents are going to start loading more quickly.

  2. Where HTML relies heavily on your browser to display your content properly, using canvas lets Google make sure your document looks the same no matter what browser or device you're using. This means you'll be able to edit a document from your phone, and your changes will actually look like that when you check the doc from your desktop. And you'll be able to share those changes with your boss, without worrying what their PC is going to do to the fonts.

  3. As they roll this out across other apps in the Google Workspace ecosystem, it's going to be even easier to move information from app to app. Want to include a Google Sheets spreadsheet in your doc, embed a doc into a Google Slides deck, or tag a person from Google Contacts? That's all getting easier.

This change also means that Google is going to have way more flexibility around what docs can do for you.

As in building a house, building a document with HTML had strict rules that needed to be followed; the foundation needed to be set just right, or the whole thing would collapse.

Using canvas and JavaScript, like art, doesn't need to follow any of those rules. They can pop in interactive elements, let you visualize data in new and interesting ways, and open up new possibilities to the community of users who were already making great tools with Google Apps Script. This is similar to what apps like Coda and Notion are already doing, with the colossal strength of Google's existing tech behind it.

This all sounds really good. Is it good?

Well, yeah... mostly!

I'm part of the generation that learned HTML as kids, and I have fond memories of putting together a new MySpace page during the wee hours, painstakingly crafting each tag or CSS rule to perfectly accentuate a particular Green Day lyric. 

Growing up, I always stuck to that "view source" mentality: any website that let me right-click and view its HTML was instantly more trustworthy in my eyes. No matter what I was working on, so long as I could take a peek into how it worked behind the scenes, I could feel grounded, connected to the bigger picture. When I became a professional and started writing more and more in apps like Google Docs, I always found a kind of peace in knowing that HTML was always there behind the scenes.

I say all of that to acknowledge that, while I know intellectually that it's just code, and on the whole, these are good changes, I'd be lying if I said this change didn't strike an emotional chord for me. I'm genuinely going to miss having HTML mixed into everything. Messy as it was, you could always find structure eventually, if you stared at it long enough.

Change begets change, as the saying goes, and this change means that more big apps are probably going to be switching to canvas-based rendering, which is exciting. And HTML is still a core part of the internet (canvas itself is an HTML5 element), so I don't think it'll go the way of Flash anytime soon. But it's important to take note when tech giants like Google make this kind of shift—and reflect on where we've come from.

Godspeed, rendering in HTML. Go <b>boldly</b> into the unknown.

Get productivity tips delivered straight to your inbox

We’ll email you 1-3 times per week—and never share your information.

mentioned apps

Related articles

Improve your productivity automatically. Use Zapier to get your apps working together.

Sign up
A Zap with the trigger 'When I get a new lead from Facebook,' and the action 'Notify my team in Slack'