Google Docs will move to canvas based rendering instead of DOM

This page summarizes the projects mentioned and recommended in the original post on news.ycombinator.com

Sevalla - Deploy and host your apps and databases, now with $50 credit!
Sevalla is the PaaS you have been looking for! Advanced deployment pipelines, usage-based pricing, preview apps, templates, human support by developers, and much more!
sevalla.com
featured
InfluxDB – Built for High-Performance Time Series Workloads
InfluxDB 3 OSS is now GA. Transform, enrich, and act on time series data directly in the database. Automate critical tasks and eliminate the need to move data externally. Download now.
www.influxdata.com
featured
  1. makepad

    Makepad is a creative software development platform for Rust that compiles to wasm/webGL, osx/metal, windows/dx11 linux/opengl

    In 2009, I joined Mozilla and started working on the Bespin[1] project, which Ben Galbraith & Dion Almaer had brought to Moz. Bespin was built with a canvas-based renderer. Bespin was way faster than other browser-based code editors at the time.

    Then the Ajax.org/Cloud9 folks came along with their Ace editor[2], which was DOM-based and still very fast. We ended up merging the projects.

    Rik Arends[3] was one of the Ajax.org folks and he's been working on a WebGL-based code environment called Makepad[4], which is entirely built in Rust and has its own UI toolkit. He's complained a lot about how difficult it is to make a performant JS-based editing environment.

    My point in all of this is just that there are absolutely tradeoffs in performance, accessibility, ease-of-development, internationalization, and likely other aspects. If raw performance is what you're going for, it's hard to beat just drawing on a canvas or using WebGL. Google Docs needs to worry about all of that other stuff, too, so I'll be interested to see how this shapes up.

    [1]: https://en.wikipedia.org/wiki/Mozilla_Skywriter

    [2]: https://en.wikipedia.org/wiki/Ace_(editor)

    [3]: https://twitter.com/rikarends

    [4]: https://makepad.dev

  2. Sevalla

    Deploy and host your apps and databases, now with $50 credit! Sevalla is the PaaS you have been looking for! Advanced deployment pipelines, usage-based pricing, preview apps, templates, human support by developers, and much more!

    Sevalla logo
  3. Flutter

    Flutter makes it easy and fast to build beautiful apps for mobile and beyond

    Perhaps Flutter. It uses Canvas to render in the web.

    https://flutter.dev/

  4. x-spreadsheet

    The project has been migrated to @wolf-table/table https://github.com/wolf-table/table

  5. particles.scroll.pub

    Particle Syntax Website

    > The way to fix this trend would be to reimagine the presentation layer of the browser as something other than a stack of hacks over hypertext, but so far nobody seems to have a good solution.

    About a decade ago I had the start of a Eureka moment on how to do this (back then — https://medium.com/space-net/spacenet-51aca95d49a2, nowadays https://treenotation.org/). It seems to me we've missed a sort of fundamental universal notation of the universe, which you can think of as "two-dimensional binary". I predict we will soon see a Cambrian Explosion of new formats and notations that are simpler and more interoperable with each other, and some will have the opportunity to build new great languages for rendering stacks.

  6. EtherCalc

    Node.js port of Multi-user SocialCalc

    Well, to be fair Libre Office online exists[0]. However, I believe EtherCalc[1] is faster.

    [0] https://www.libreoffice.org/download/libreoffice-online/

    [1] https://ethercalc.net/

  7. react-canvas

    High performance <canvas> rendering for React components

    I remember Flipboard using canvas to render their UI before using react, which has the same idea, you can look at the repo and their post about it:

    https://github.com/Flipboard/react-canvas

  8. InfluxDB

    InfluxDB – Built for High-Performance Time Series Workloads. InfluxDB 3 OSS is now GA. Transform, enrich, and act on time series data directly in the database. Automate critical tasks and eliminate the need to move data externally. Download now.

    InfluxDB logo
  9. gpuweb

    Where the GPU for the Web work happens!

    It seems like WebGPU is the next thing:

    https://github.com/gpuweb/gpuweb/wiki/Implementation-Status

  10. xabber

    Root project for all Xabber related software projects

  11. slate

    A completely customizable framework for building rich text editors. (Currently in beta.) (by ianstormtaylor)

    With a canvas-based engine, the editor is no longer relying on the contenteditable spec right?

    For the majority of use cases, do you think contenteditable + view layer which precisely updates the HTML is still viable though. Or more specifically, what do you think about libraries like ProseMirror (https://prosemirror.net/) or Slate.js (https://github.com/ianstormtaylor/slate)?

    I understand if you have really long documents or spreadsheets (I imagine latter is more frequent), you could maybe solve performance rendering problems with virtualization, which canvas gives more flexibility to?

  12. ProseMirror

    The ProseMirror WYSIWYM editor

    With a canvas-based engine, the editor is no longer relying on the contenteditable spec right?

    For the majority of use cases, do you think contenteditable + view layer which precisely updates the HTML is still viable though. Or more specifically, what do you think about libraries like ProseMirror (https://prosemirror.net/) or Slate.js (https://github.com/ianstormtaylor/slate)?

    I understand if you have really long documents or spreadsheets (I imagine latter is more frequent), you could maybe solve performance rendering problems with virtualization, which canvas gives more flexibility to?

  13. Preact

    ⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

    Sorry, I should have clarified a bit more — I'm writing a cross-platform desktop application that has a preact[0] frontend (+ a Go backend) using `firefox --app application.ini`.

    I have been experimenting with performant lists (which is why I brought up the XUL tree), though at the moment, I'm only using the XUL menubar element in order to populate the native macOS menubar.

    I am a fullstack web dev in my day job, so my goal here is to write a fast, easily extendable UI that I can quickly iterate upon using modern html/js/css/etc.

    Basically, since I love gecko and used to write XUL add-ons many years ago (I'm already familiar with the internal browser architecture, etc.), I'm using XULRunner (`firefox --app application.ini`, as previously mentioned) as a replacement for Electron.

    I'm basically using XULRunner in the same way spotify uses the Chromium Embedded Framework[1].

    [0]: https://preactjs.com/

    [1]: https://en.wikipedia.org/wiki/Chromium_Embedded_Framework

  14. HedgeDoc

    HedgeDoc - Ideas grow better together

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • 🚀 2025: 10 Free Must-Know Websites Every Developer Should Bookmark

    5 projects | dev.to | 26 Feb 2025
  • React vs Flutter

    2 projects | dev.to | 30 Jun 2024
  • What is the appropriate webpack loader for the 'canvas' package in a Node.js environment?

    2 projects | /r/nextjs | 26 May 2023
  • Making YouTube video with React

    9 projects | dev.to | 25 Feb 2023
  • HTML Coding Platforms

    2 projects | /r/learnprogramming | 9 Dec 2021