Building a Live Editor
As I have been working on my personal blog, I wanted to include the ability to edit code on site, and also preview it live. I started using react-live which I have had prior experience using and setting up, however I wanted to customize the theme of the editor a bit and try to work on a new and challenging task over the weekend.
So I decided to build
(see the project here).
Starting Off with Executing Code
I started off by looking at the source of react-live to figure out how they are
able to actually call the code that you edit inline. It turns out, that they use
new Function contructor to pass the code as a string along with an
assortment of the keys of the things within scope for the code, and then call
This allows us to evaluate code that the user types within the editor on the site, and probably goes without saying but could be a really bad™️ thing to do with live user input.
So now that we know how to actually execute the users code, how do we build the editor part?
The Code Editor
Well that part is actually pretty simple, because other awesome developers out there, have already shared open source projects for editing code within the browser. Since I wanted to keep the project fairly small, I went with react-simple-code-editor.
This editor allows me to control the highlighting of the code complete, and also is really easy to just start using:
Great, so we have a way to execute the code, and a way to edit the code, what about the syntax highlighting though?
Highlighting the Code
Well we are just as lucky as we were before, thanks to the
library, we are able to use a React wrapping API around the
This ends up looking like:
So wrapping it all up, we end up with an API that looks like this:
Be sure to checkout the project here: github.com/hamlim/react-preview-editor on GitHub (make sure to ⭐ it too 😆).
And check it out in CodeSandbox here.
Have feedback about this post or questions, don't hesitate to reach out on Twitter (@immatthamlin)!
Follow the discussion on this blog post on twitter.