Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

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!



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 :)


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...




Consider applying for YC's Fall 2025 batch! Applications are open till Aug 4

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: