[ashout]

Is there a tutorial somewhere that goes over how to make the interactive editor on the right of the blog post? That is super cool!

[wattenberger]

Hey thanks! The code is all up at https://github.com/Wattenberger/blog/ for anyone who's curious.

There are some interesting bits in there - the basic structure is:

- the post itself is at src/Interactions

- the code changes using a ScrollEvent component (src/_ui/Code)

- the code examples (inline and fixed on the right) are using the Code component (src/_ui/Code)

- the inline demos are using the LocalExample component (src/_ui/LocalExample). The LocalExample component basically builds an iframe and displays it

Both of these components support:

- a list of lines that are removed

- a list of lines that are added

I've been liking that this setup lets me have complete examples that work as standalone web pages, but I can also edit them on the fly and work through changes on-the-fly. Which lets me talk about interim states [like this one](https://github.com/Wattenberger/blog/blob/master/src/Interac...).

I'm happy to answer any questions about it, the code is a bit messy :)

[stackola]

This appears to be a custom react setup, no premade framework that I could find.

I found the non-minified .jsx [1] for it though, if you're into that.

[1] https://gist.github.com/stackola/6e0afcfab8048152426f387e1ce...