Okay that title is not entirely true, so sue me (please don't). We won't be building a text editor in Go, at least not entirely. We'll be using HTML/CSS alongside Go for building this editor that will have all the features that you could ever imagine — it's gonna take over the world as the text editor everyone loves to use!
NOT.
This tutorial series will focus on building a small text editor with minimal functionality. It WILL NOT be perfect, and it might not become your daily driver, but you'd have built something useful ON YOUR OWN (I cannot stress enough on how good that feels), and hopefully, you'll learn something new along the way (I did).
This editor will have 2 major parts,
A frontend, in HTML/CSS, because that is arguably the easiest way for someone to hack together a basic UI.
A backend, in Golang. This choice mostly comes down to personal preference. I could have easily built a backend in Python or NodeJS instead, but I chose Golang because I enjoy it more and want to learn it myself, and hopefully, you'll enjoy it too.
Let's begin with the 'fun' part
All right, so what do we want to do with our editor? Currently, not so much. We just want to open a file, edit it, and save it. So we'll create 2 pages — one for opeining the file, one for editing it — a very simple UI.
So create an open.html file with the following code:
<!DOCTYPE html>
<html>
<head>
<title>My text editor</title>
<style>
label, input, textarea {
margin-bottom: 10px;
display: block;
}
</style>
</head>
<body>
<label for="file">Choose a file to open:</label>
<input type="file" name="file">
<input type="submit" value="Open" />
</body>
</html>
The <label> tag is simply a label for an element like <button>, <input>, <textarea>, etc. The <input type="file"> tag is HTML's built-in way to browse files on your system. display: block makes the element be the only element in that line.
Well, what does margin-bottom: 10px add?
This is what our page looks like:
Doesn't look like much but we'll worry about that later.
Now we need a page to edit the file we just opened, so create an edit.html and add the following HTML to it:
<!DOCTYPE html>
<html>
<head>
<title>My text editor</title>
<style>
label, textarea {
margin-bottom: 10px;
display: block;
}
</style>
</head>
<body>
<label>File name</label>
<textarea rows="20" cols="70"></textarea>
<button>Save</button>
<a>Cancel</a>
</body>
</html>
The textarea is for writing multi-line text, while rows and cols correspond to its width and height respectively. This is what it'll look like:
Feel free to play around with the HTML/CSS to make the pages look just right (to you).
Right now, the pages don't do anything on their own, so in the next post, we'll be adding a backend to build some functionality.
Until next time...
Cover image by Eduardo Higareda
Latest comments (0)