How it works 

On page load a script calls an ajax endpoint, to fetch information about all editable (by the current backend user) content elements on the current page.

The script then injects (if it's possible) an Edit Menu into the frontend for each editable content element.

This is only possible, if the content element "c-ids" (Content Element IDs) are available in the frontend template, e.g. "c908". By default the fluid styled content elements provide these ids.

Example HTML output of a content element
<div id="c10" class="frame frame-default frame-type-textpic frame-layout-0">
    ...
</div>
Copied!

The rendered Edit Menu links to the corresponding edit views in the TYPO3 backend.

Frontend Edit Screencast