Building a text editor in Go
Tags: go, tutorial, beginners, javascript
Published: 2019-11-08 11:13:55

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 &#8212; 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,

1. A frontend, in **HTML/CSS**, because that is arguably the easiest way for someone to hack together a basic UI.

2. 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 &#8212; one for opeining the file, one for editing it &#8212; a very simple UI.

So create an `open.html` file with the following code:
```html
<!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? 

![Take a guess, moron](https://media.giphy.com/media/3o6MbfMujnSYQwyLAs/giphy.gif)

This is what our page looks like:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xe6xfdufjfxcro11f0j3.png)

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:

```html
<!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:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ndrp4mc0bccm0sgmrlky.png)

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.


![We're done](https://media.giphy.com/media/3ov9k0wLTAsOxBeQJa/giphy.gif)

Until next time...

_Cover image by [Eduardo Higareda](https://dribbble.com/eldelentes)_