LiveView web-based code editor

Hello, I’m experimenting in building a web-based code editor, which would be basically a textarea for the code you’re writing, and a preview / results / messages area for the results of that code. Sort of Tailwind Play, or the editors in MDN.

This is easy to build thanks to LiveView, I already have it working but I’m stuck trying to add line numbers to the textarea. I haven’t found an easy way to do that, I’ve seen there are JS libraries like CodeMirror to do that, but maybe there’s a simpler way to achieve this in LiveView?

Maybe splitting the lines on their own divs and using contenteditable? But then you have to support keyboard and mouse events…

Has anyone tried this using LiveView?

1 Like

Seen this? It uses vscode’s editor, which tailwind play uses too.

1 Like

Hey thanks, I hadn’t thought of that. I’ll check Monaco Editor.