Would you like to upload an image?

WYSIWYG Editor

Type raw HTML in left hand pane, see it generated in right hand pane. When you begin typing an image tag ('<img ') a pop up will appear allowing you to select an image from your local file system. This image will be displayed in the display pane using a server friendly URL.

This is a prototype of a WYSIWYG editor that allows the user to write html and see a preview of it in the display pane. A particular feature is that the user can construct image tags with urls that point to a resource on a server and the display pane will show the image - even before the image has been uploaded!

This works via the magic of service workers. When the user picks an image from their local file system using the file picker, the image is stored in an indexedDB database. When the image tag is constructed, the browser makes a request for it, but this request is intercepted by the service worker which serves the image from the database.