I’m a big fan of spreadsheets. I love how spreadsheets let you seamlessly progress from static content (numbers) to dynamic content (formulas). Whenever I see a table in a text editor, I want it to be a spreadsheet. I don’t want to have to move my data into a separate spreadsheet. I want the capability to be right there.
Tiny Sheets is our experiment to add spreadsheet capabilities to TinyMCE. It’s an early demo release, and you can try it out on our new Tiny Labs page.
Tiny Sheets turns any table in TinyMCE into a spreadsheet. When your cursor is inside a table cell, you can press
= to switch to formula editing mode, type in your formula, and then press
enter. Just like you would expect from a spreadsheet, the text of the cell is updated to be the result of the formula.
Also, to help you keep track of which cells have formulas, any cell that does contain a formula has a small marker in the lower right-hand corner.
You’ll also notice that we pop up row and column headings when the cursor is in the table. These headings help you identify cell coordinates for your formulas. You can also click on a row or column header to select that row or column.
Under the hood
We store the formula for a cell in an HTML data attribute of the cell. The data attribute lets us edit the formula, and recalculate the value if its source data changes.
During recalculation, we identify which cells need their text changed and only update those cells. We also cache any values already calculated and perform circular reference detection.
To add formulas to Tiny Sheets, we use an open source spreadsheet formula parser, which gives us a broad set of supported formulas out-of-the-box. These include basic arithmetic operators and range functions like
Design challenges making tables into spreadsheets
A key design challenge for Tiny Sheets is to understand when a user wants a standard table or when they want a spreadsheet. We could make the user explicitly choose to insert a spreadsheet instead of a table, but we wanted it to be more seamless. This comes down to the progression of static to dynamic content I mentioned above. You may start by just adding numbers to a table, but then later decide that you need a formula. We want the spreadsheet functionality to be available when you need it, rather than you needing to move the content to a separate spreadsheet.
On the other hand, a user making an HTML table may not always need formulas or to see row and column headings. To bring this product to market, we certainly have some design challenges ahead of us, and we’re excited to tackle them.
What’s next for Tiny Sheets? We continue to work on improvements to formula calculation and dealing with table cell changes. We need to add more polish to the UI. We also need to think through the best way to give users the co-located functionalities of a standard table and a spreadsheet.
However, we want to show Tiny Sheets to our users (in its current state) to demonstrate the possibilities, measure interest, and gain feedback that helps us shape this new capability.
We’re also thinking beyond spreadsheets. How about diagrams, charts, presentations, mind maps and to-do lists? What about full-scale image editing? The possibilities are endless. Web content editors shouldn’t be limited to only using text. Rich content can be much richer than it is now, and our goal is to unlock this potential.
We want to hear from you! Please email us at labs [at ] tiny [dot] cloud to shape the future of Tiny Sheets (or any of the products in Labs). What did we get right? What is Tiny Sheets missing that is a must-have for you? What do you think is the best way to allow both a spreadsheet and a standard table to co-exist? What could work a little better? Let us know!