Instaedit - pixel perfect web editor
Instaedit is wysiwyg editor of your page content, designed for editing of websites based on github pages (like binaryage.com).
Brief usage tutorial
Markup origins of content on your site
Put data-content-origin attribute on top level element wrapping content of some of your site source code on github.
<section id="page" data-content-origin="https://raw.github.com/binaryage/blog/gh-pages/_posts/2012-04-26-totalspaces-brings-back-grid-spaces.md">
Content of https://raw.github.com/binaryage/blog/gh-pages/_posts/2012-04-26-totalspaces-brings-back-grid-spaces.md
Add a content-script
Its a script which defines a way of applying changes. Code is executed in isolated scope with content variables defined in it - see content-script example - https://github.com/binaryage/instaedit/blob/master/demo/js/content-script.coffee - as you can see, coffee script is also supported, instaedit automatically recognizes the language by postfix - .coffee and .js.
And you should define it as a script
<script type="instaedit/contentscript" src="https://raw.github.com/binaryage/instaedit/master/demo/js/content-script.coffee"></script>
or meta in head
<meta name="instaedit/contentscript" value="https://raw.github.com/binaryage/instaedit/master/demo/js/content-script.coffee">
Install a browser extension
You should install a browser extension because of restrictions in github api policy, if you want to just try instaedit, then you can add this code to your site
but you will loose a "commit" feature.
or Edit button on your site. You will see instaedit editor
Edit a content-script
After clicking "Edit parser" button you will get another editor with your content script code in it. Editor will be informing you about syntax errors during editing. When you will be satisfied with new version then click "Apply" button. Instaedit compiler will compile the code and immediately start applying it on content - eventually you will can see you concrete mistakes in code via notifications on the right side of editor - like that
You should be signed to github and have appropriate privileges for editing. Extension will let you click on "Commit" button yourselves (you can check it one more time and make sure about changes)
Still have troubles?
See our demo here - https://github.com/binaryage/instaedit/tree/master/demo
or feel free to contact me - email@example.com