WordPress tinymce, Page Builder Framework

There are many Page Builders for WordPress now days for example Unyson (an open source plugin), I want to understand how really they work in WordPress backend.

My ultimate goal is to give a visual builder to edit my shortcodes, for example if I have a [column] ... [/column] I want this to display a visual DIV or IMAGE to show its a column.

I just need direction, how to get started on developing a page builder for WordPress. Here is what I understand:

1. Add new button to tinymce
2. Add some extra layer and replace tinymce area with that new page builder once clicked
3. In that area we get content from actual tinymce editor and then through Javascript, convert the [shortcodes] to DIVs and visual layout. And once the default editor is clicked/switched, it takes current content data (in page builder) and puts it back in default editor...

Is there any quick tutorial free/paid available somewhere for making a simple WordPress page builder or a framework.

via Chebli Mohamed