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

History in the Making: Developing the first WYSIWYG

Joe Robinson

August 31st, 2021

Written by

Joe Robinson

Artwork by

Markus Spiske

Category

As you may already know, the Xerox Alto computer ran Bravo, and it’s regarded as one of the first working WYSIWYG programs. But by looking closely at the window of time when Bravo was developed, you can see ideas that are still relevant for today’s development work.

Microsoft Windows software, particularly Word, has its origin in Bravo’s development. And if Butler Lampson and Charles Simonyi hadn’t worked together at Xerox PARC to  build Bravo, there would be no MS Windows today. 

Equally, considering the significance of Microsoft Word on not just the rich text editing field, but the wider workforce, it shows how important it is to look back at projects that came before (in your field of software development) to see how those concepts and discoveries can spring-board future technologies.

By looking at the problems past developers faced – and how they overcame them – you can draw inspiration for solving today's rich text editor issues and challenges.

What was behind the first WYSIWYG development?

The first WYSIWYG ran in an environment alongside other older, but pivotal, languages including Mesa, Lisp, and Smalltalk. The Computer History Museum details a fourth language that Xerox PARC teams worked on: BCPL (Basic Compiled Programming Language).

Ken Shirriff, an expert in restoring and testing computers from decades past, identifies BCPL as the first programming language available on the Xerox Alto. Using BCPL, and other languages available, Butler Lampson, Charles Simonyi and the Xerox PARC team developed Bravo – releasing it internally for the Xerox Alto in 1974.

BCPL was later refined into the B language, and then eventually into the C language. The blocks and scoping rules found in BCPL resemble similar structures that appear in C, along with Ivalues and rvalue pointers, and looping constructs. It’s the ancestor of C#.


The first WYSIWYG UI introduced undo

Lampson and Simonyi would often catch up while scribbling ideas down on yellow sheets of paper. They had several problems they wanted to solve – a major one was how to create a content writing experience that was easier than marking up text with different tags (the only option available to users in the early 1970s).

An essential bit of functionality that Lampson and Simonyi came up with in the problem solving process was programming the “piece table”. It was, and still is, a fundamental data structure needed to develop a working WYSIWYG.

Piece tables enabled Bravo to essentially figure out how to handle text placed in a document beyond adding it to the end of the file. Users could select a point to add new information, and using the piece table design, Bravo automatically moved the text around to fit the new information, adjusting where each character of text is allocated in computer memory.

Today, this approach is taken for granted, but at the time, a WYSIWYG that saved content and allowed a user to return to it and add new text was a revolution in text editing. It enabled the introduction of delete, undo, and redo abilities, all of which are now commonplace.

The instructions for these steps are available on page 36 of the Bravo documentation, written by Lampson and the team at Xerox PARC, in 1979:

“Now type D (for Delete). The word you selected is deleted from the document, and the selection moves over to the character after the original selection. The rest of the text is adjusted to make up for the deleted material; if necessary some words may be brought up from the next line to fill up the one which contained the deleted material.

You can undo the deletion by typing U (for undo). Try it; you will see the stuff you deleted reappear, and it will be selected again, just as it was before you deleted it.”

However, Lampson discussed in an interview (page 19) with David C Brock from the Computer History Museum  that Bravo’s undo function was not brought on by the piece table data structure – it was actually more of a hack. However, the idea and its development planted the seed for today’s WYSIWYG.

Test driving the first WYSIWYG demo


A Xerox Alto emulator called Salto (developed by Juergen Buchmueller) exists – for any enthusiasts looking to experience the Xerox Alto GUI and operating system. That said, be aware that it’s designed for Linux. But by running the bravo command inside the Xerox Alto emulator, you can see and experience the first WYSIWYG interface.

You can also find recordings of Bravo in action on YouTube. It’s a clear window to the past. You can find out more about the Xerox Alto from the Computer History Museum’s exhibits, and if this historical journey has inspired either ideas or questions, reach out to us.

WYSIWYGDevelopers
byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • Engineering

    Learn JavaScript in 2021: Hassib Modasser’s recommendation

    by Joe Robinson in Engineering
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© 2021 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing