I developed an Excel-like spreadsheet using JavaScript and Canvas

Rollpie — Fri, 05 Jun 2026 12:56:41 +0000

I built an Excel-like spreadsheet in JavaScript. Data isn't sent to a server, so you can use it safely. And it's free, of course.

Rollpie Sheet

You can save your edits in JSON format and load them back in as well.

The feature for exporting images of tables and the like is being developed as a separate library, which I plan to add later as an option.

There were two things I focused on while developing this:

History and snapshot management
The canvas update range

This spreadsheet keeps all cell data and everything related to it in its history. In other words, there's only a single snapshot. Also, the canvas always renders in full. Modern browsers render canvases very fast.

If you find anything hard to use or that you'd like improved, please leave a comment.

isWellFormed checks if a string has "broken code point"

Rollpie — Wed, 04 Jun 2025 11:31:54 +0000

We get a "broken" string when splitting incorrectly texts that contain surrogate pair code points (like emoji) and reusing parts of that.

const word = '😀'
const items = word.split('')

console.log(items)
// ['\uD83D', '\uDE00']

const array = ['A', 'B', items[0], 'C']

const text = array.join('')

console.log(text)
// AB�C

I often see � in console or log files. 😀 has 2 code points in UTF-16 and JS function splits 😀 to 2 code points. Each means nonsense in literal.

D83D ... High surrogate
DE00 ... Low surrogate

High or low surrogate can't be seen as a symbol but the pair of them is recognized as a symbol.

The "text" in the above example has single meaningless surrogate, which is shown as �.

How to check if a string has meaningless surrogates

The isWellFormed() checks if a string has lone surrogates.

const word = '😀'
const items = word.split('')

console.log(items)
// ['\uD83D', '\uDE00']

const array = ['A', 'B', items[0], 'C']

const text = array.join('')

console.log(text)
// AB�C

let isGoodText = true

if (text.isWellFormed()) {
    isGoodText = true

} else {
    isGoodText = false
}

console.log(isGoodText)
// false

This function is particularly useful when we make or format a text using regex and code points.

DEV Community: Rollpie

I developed an Excel-like spreadsheet using JavaScript and Canvas

isWellFormed checks if a string has "broken code point"

How to check if a string has meaningless surrogates