Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

PRODUCT LED GROWTH

Buy vs Build: Spell Check feature cost estimate

Published February 10th, 2022

Isn’t it nice to be right? Even when it’s something as simple as spelling a word… correctly? That feeling often correlates with a desire to be accurate, trustable and credible – all things that a spell checker can do for you and your business.

Di Mace

Communications Specialist at Tiny


Why is being accurate important? In his lab at Stanford University, respected Behavioral Scientist, BJ Fogg, researches how website and phone design can impact customers. He’s applied his findings to companies like eBay (to improve customer service) and Nike (to help simplify its sports technology line), as well as the alumni of Silicon Valley.

Often, it’s your website that’s the first point of contact for customers, therefore it’s responsible for first impressions and (in many cases) is the main source of revenue. Fogg’s research defined four types of credibility: presumed, reputed, surface and earned.

He’s shown that your web credibility comes from a website that’s trustworthy and knowledgeable. And it should come as no surprise that a common example of destroying your hard ‘earned’ credibility, is typos and other grammatical errors on your site. When they’re noticed, people have one of two reactions:

  • They’re immediately recognized and it turns off their desire and interest
  • They’re subtle errors that slowly damage your credibility through the copy you publish.

What’s the answer? An advanced spell checker. Its main benefit is its accuracy – it catches and corrects errors.

In an advanced spell checker, that same benefit spans multiple languages (either within the same document or separate ones), which is a must-have if you’re working within a global market.

The tool usually consists of two sections: one that allows the spell checker to scan through a block of text and highlight misspelled words, and another that uses an algorithm to compare the words used/typed, with the thousands of correctly spelled words in the dictionary built into the software.

But what’s involved in building a best-in-class, feature rich spell checker? And how much would that cost… versus buying a third-party component and assembling it as part of your tech stack? Let’s find out.

What does an advanced spell checker do?

An advanced, feature rich spell checker needs to simplify and streamline the process of checking and correcting text errors – ideally across multiple languages simultaneously, in the one document.

At its most basic level, the tool splits a document into words and checks them against a dictionary (relevant to the language chosen) for spelling errors. It functions in a similar way to the tools in both Word and GDocs, but it does not check either syntax or grammar. A more advanced spell checking tool allows you to check the spelling of multiple languages within the same document – something that’s crucial for apps that work with multiple languages.

Complexities of building a spell checking feature

Building a spell checker probably sounds relatively easy… it’s only either right or wrong spelling, isn’t it? Often though, it requires both a client and server side piece. You therefore need to consider:

  • Building the UI

– Choosing between as-you-type highlights under words (which can then be right clicked to bring up a menu), and/or a dialog that steps through each spelling error in the document and offers the user suggestions for fixing it, or to enter their own replacement.

– Supporting user dictionary formats (if required).

– Developers also need to allow for users to:

  • skip words
  • mark things as correctly spelled anyway
  • give them the ability to add words to a custom dictionary.
  • Checking words

– There's the complexity of figuring out how to check enough words at a time, so that the user can go through errors at a good pace without needing to wait for more to be checked.

– The whole document can’t all be checked at once, because the number of requests that could be simultaneously sent would be ridiculously large and users would experience delays (waiting for them all to come back) which would deliver a poor UX.

– Therefore, spell check requests need to be batched together so that the solution is performant.

  • Overall, the document needs to be traversed efficiently to find spelling errors without:

– Locking up the page

– Taking too long (for a reasonably-sized document)

– Sending a million requests to the server and overwhelming the network.

  • Handling oddities in network requests, like:

– Receiving responses from the server in a different order to how they were sent out

– Missing responses

– Duplicate responses.

  • Dealing with multiple languages (if your environment requires that), both when the entire document is in one language and when different sections are in different languages.

– Deciding how many languages you need to support now and if extended support is likely needed in the future.

  • Debugging problems given that you are managing the privacy of customer content

What functionality is crucial to an advanced spell checker?

An advanced spell checker has both client and server side parts, where:

  • The client side tokenizes content to send it to the server to be checked, and handles UI and DOM interaction
  • The server side checks words and sends suggestions back to the client.

Each area has specific functionality requirements.

Client-side:

  • Properly tokenizing the words for various languages.
  • Handling text fragmentation and inline tag nesting.
  • Skipping spell checking on things that users don't want to spellcheck (links etc.).
  • Multi-language support and language attribute boundaries.
  • Menu positioning and general menus for error suggestions, as well as handling edges of the screen.
  • Handling different numbers of simultaneous suggestions.
  • Providing a clean UI for marking errors and offering suggestions.
  • Responsive as-you-type highlighting so that users can correct a word before they go too far away from it.
  • Some way to perform a spell check across a large document that helps the user know they have no spelling errors left.
  • Cursor / selection management – this is more for a content-editable based HTML editor. It's imperative that the cursor position isn't broken when the document is changed by a spelling marker being added. Spelling processes are often asynchronous, which adds complexities and many issues with undo management and cursor management.
  • Splitting up words by tag boundaries rather than always whitespace. There might be no whitespace between things, but if they’re in different blocks, it's the equivalent of whitespace – you can't just rely on text content.
  • Undo management can be tricky – because of the asynchronous nature of requests, and because pressing undo recreates all the nodes in the document, you can't just "store a reference" to the word you need to add the spelling marker to, because the reference will become stale. In most cases, you need to find it again.

Client and server-side:

  • Full-document spell checking without slowing down the editor experience.

Server-side:

PREFER USING APIs?

Check out our APIs for these premium plugin/features:

API References

Accessibility Checker

Spell Checker Pro

Mentions

Advanced Tables

What expertise is required to build an effective and compliant spell checker?

  • Expertise in DOM traversal and manipulation.
  • An understanding of text nodes, cursors, viewport, etc. and how to handle them.
  • Ability to complete UI creation, including dialogs, word underlines, context menus, etc.
  • A server side developer to set up a spelling service.
  • An understanding of how to handle network requests between the client and server side, and how to optimize for performance, particularly at scale (i.e. lots of clients connecting to one service).

As you can see, building your own spell checker isn’t quite as easy as it seems on the surface, let alone keeping up with adding new dictionaries/languages, spelling updates, new words, and other oddities.

Get more insights in our
Buy vs Build White Paper

DOWNLOAD THE WHITE PAPER

Cost Estimate for an Advanced RTE Spell Checking Feature

Building an advanced feature like a spell checker, doesn’t start and end with the development and building phase. It also requires ongoing maintenance and extensibility work through the life of the feature.

In practical use, it should feature both:

  • As-you-type spell checking (which underlines misspelled words which can be right-clicked to bring up a context menu to correct them).
  • Dialog-based spell checking (which scans the document, opens a dialog, and lets users click through each misspelling to handle each one).

Both modes offer suggestions for correct spelling, the ability to ignore a word (e.g. if it’s currently misspelled), and to handle multiple languages – both at a document level and with different languages within one document. An advanced spell checker also needs to be optimized in many ways to ensure the UI is responsive, that the network load is minimized and it has the ability to add custom dictionaries.

All of these complexities and interactions need to be factored into the total cost of ownership (TCO) of the plugin.

COST ESTIMATE CURRENCY
All cost estimates quoted are in US$

This includes development/build work, maintenance and extensibility work

Build/Development – 1 x RTE Spell Checking Feature Cost Estimate (excl. core editor)

Using a normalized COCOMO Model, the estimated engineering requirements for building an advanced spell checking, using:

  • A Senior Software Engineer
  • Average salary rate (US$132, 205 ** p/yr excluding oncosts, RSUs and bonuses)
  • 10,874 lines of code (front end)
  • 5,477 lines of code (backend)

TOTAL LOC = 16,351


  • 63.5 person-months = 13.7months, using six developers
  • Excluding ongoing maintenance and extensibility work

EQUALS = $699,759 in development cost


Advanced RTE Feature COCOMO Modeling

Software Development (Elaboration and Construction)

Effort

63.5 person-months

Schedule

13.7 months

Cost

$699,759


total equivalent size

16351 SLOC

effort adjustment factor (EAF)

1.00

Acquisition Phase Distribution

PhaseEffortScheduleAverage StaffCost
Inception3.81.72.2$41,986
Elaboration15.25.23.0$167,942
Construction48.38.65.6$531,817
Transition7.61.74.4$83,971

It should be noted that the above $700K estimate for a single advanced spell checking feature, excludes the additional support costs required for the development of a product ready feature:

A full time Senior Product Manager***

  • During the Inception/Discovery Phase
  • Throughout the 13.7 months of the project

A full time Senior Product Designer****

  • 1 week during the project

Need more cost estimates to build your own rich text editor and advanced features?

Buy vs Build a Core Rich Text Editor

Buy vs Build an Advanced Copy-paste Feature/plugin

Read the entire TCO breakdown for both, in our Buy vs Build White Paper

And get the cost breakdown of building an advanced Accessibility Checking feature

Ongoing Maintenance – 1 x RTE Spell Checking Feature Cost Estimate (excl. core editor)

Engineering time and resources are required to both maintain and evolve the feature to keep pace with market, feature and related plugin changes.

For maintenance work, expect to dedicate a minimum of:

CLIENTSERVER
85 full time work days (2.8 months) per year, every year of the plugin’s life, of Senior Software Engineer** resources, to keep the spell check feature afloat.30 full time work days (1.0 months) per year, every year of the plugin’s life, of Senior Software Engineer** resources, to keep the spell check feature afloat.
Average salary rate (US$132, 205** p/yr excluding oncosts, RSUs and bonuses) or $11,017.80 per person-monthAverage salary rate (US$132, 205** p/yr excluding oncosts, RSUs and bonuses) or $11,017.80 per person-month
$30,849.84 per year$11,017.80

This work would include bug fixes, other tasks and various required maintenance.

TOTAL = $41,868** yearly in maintenance cost for a single feature, ongoing

PLUS

  • A full time Senior Product Manager*** throughout any maintenance work.
  • A full time Senior Product Designer**** sporadically during maintenance work.

What maintenance work is likely to be required?

  • Patching the HTTP libraries that get a security vulnerability (this happens more frequently than you'd imagine).
  • Sourcing and updating dictionary files for various languages.
  • Fixes for edge cases or bugs as introduced by other rich text editing features.

The additional ongoing maintenance, infrastructure and QA requirements for all rich text editor advanced features, include:

  • Continual testing and keeping development infrastructure up to date. This is the biggest consumer of engineering time and cost, to ensure the engineering team avoids the accumulation of technical debt (due to dependencies not being kept up to date and having to constantly play catchup).
  • Having sufficient licensing across all supported platforms (eg all the versions of MSWord, for testing)
  • Balancing the prioritization of plugin maintenance over primary features (productivity vs core product revenue).

Get more insights in our
Buy vs Build White Paper

DOWNLOAD THE WHITE PAPER

Long-term Extensibility – 1 x RTE Spell Checking Feature Cost Estimate (excl. core editor)

Extensibility work isn’t always easy to predict or plan. However, the one certainty is that users will demand feature upgrades and extended functionality, as new technologies continue to develop.

For extensibility work, expect to dedicate a minimum of:

CLIENTSERVER
30 full time work days (1.0 months) per year, every year of the plugin’s life, of Senior Software Engineer** resources, to account for larger changes.13 full time work days (0.5 months) per year, every year of the plugin’s life, of Senior Software Engineer** resources, to account for larger changes.
Average salary rate (US$132, 205** p/yr excluding oncosts, RSUs and bonuses) or $11,017.80 per person-monthAverage salary rate (US$132, 205** p/yr excluding oncosts, RSUs and bonuses) or $11,017.80 per person-month
$11,017.80 per year$5,508.90

This extensibility work includes feature requests and extensions and well as maintaining pace with market developments and changes in user needs.

TOTAL = $16,527** in extensibility cost for this single feature, annually ongoing

PLUS

  • A full time Senior Product Manager*** throughout any extensibility work.
  • A full time Senior Product Designer**** sporadically during extensibility work.

What extension work is likely to be required?

  • Staying ahead of new words being added to each language and dictionary.
  • Customisation options where users require specific modifications or a setting to give them more control (eg. the batch size of network requests).

TOTAL COST ESTIMATE for an RTE Spell Checking Feature (excl. core editor)

  • $699,759 build/development cost
  • $ 41,868 p/yr in maintenance cost, ongoing
  • $ 16,527 annually in extensibility cost, ongoing

$758,154 TOTAL COST


Note: All estimates exclude on-costs, RSUs and bonuses

* Using the Basic COCOMO Model (Accessed 28 Jan2021)

**Average base salary for a Senior Software Engineer is US$132,205 per year in Silicon Valley, CA

*** Estimated base salary for a Senior Product Manager is US$157,866 per year in Silicon Valley, CA

****Estimated base salary for a Senior Product Designer is US$144,925 per year in Silicon Valley, CA

(All salary rates accessed 24 Aug 2021)

Comparing spell checking plug-ins

When comparing spell checkers across the various rich text editors, not all of their features are deemed to be equal. Here’s a comprehensive breakdown undertaken across all the spell checking capabilities of three popular editors, to see the one that works best for a specific use case: Under Pressure – SpellChecker Pro

Comparing rich text editors

Choosing a rich text editor (RTE) to use within your SaaS product, web application, CMS, LMS, email marketing or internal workspace, isn’t a simple decision. Here’s comprehensive side-by-side comparison of key rich text editors (updated twice yearly):

TinyMCE Alternatives: WYSIWYG Editors Competitive Overview

Froala vs TinyMCE | Why TinyMCE is the Best Froala Alternative

TinyMCE vs Quill | Why TinyMCE is the Best Quill Alternative

TinyMCE vs Tiptap | Why TinyMCE is the Best Tiptap Alternative

TinyMCE vs Slate | Why TinyMCE is the Best Slate Alternative

TinyMCE vs CKEditor | Why TinyMCE is the Best CKEditor Alternative

Download the white paper:
The Great Debate: Buy vs. Build
Rich Text Editors

By completing and submitting the form you’ll receive information and tips from Tiny Technologies.

Want this look for your posts and pages?

Get a Setka demo from our Customer Success team,
or try Setka for 14 days, free.

Related Articles

  • Product-Led Growth

    Why a product narrative is necessary for your SaaS brand

    by Elise Bentley in Product-Led Growth
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor
Tiny logo
Privacy Policy - Terms of Use© 2022 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing