I wrote a programming language with ChatGTP. Our jobs are safe.
Tags: figma, javascript, chatgpt, typescript
Published: 2023-06-25 22:38:43

## Intro

In this article, I'll talk about how I used *ChatGPT* to write a new programming language to compete with *Figma* called **Stylo**.

I'll not go deep into the project as I wrote everything in the *GitHub* [repository](https://github.com/matteobortolazzo/stylo) where you can find the app, the syntax, and the project's future. In this article, I'll focus on what I learned instead.

![Stylo app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/blcz8z8lot7reholm5qv.png)

## Context

A few months ago, I read a [tweet](https://twitter.com/justinfagnani/status/1636107375202701313) on how the industry focuses on **design-to-code** instead of **design-as-code**. At first, I couldn't understand. That's what we do every day, I thought.

Then I started thinking of a more accessible language, faster to write than _HTML_ and _CSS_. My brain clicked: _"Somethinging like Microsoft's [Bicep](https://learn.microsoft.com/en-us/azure/azure-resource-manager/bicep/overview?tabs=bicep) could work!"_. I took my notepad and opened _VS Code_.

That was only one problem. I never wrote a language or a compiler before.

## Syntax

Luckily, _ChatGPT_ was released a few days prior, and the internet said you can build new business without effort. We'll see how that went...

> **Disclosure**
I don't have conversation screenshots as _OpenAI_ updated the app and ordered chats by the last message instead of the first one. I deleted every conversation on top, thinking they were the newest ones... Sorry, I suffer if I see more than three tabs opened in a browser.

![OCD and Browser chatGPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ji5wrotajp1plzbb5hcn.png)

I started by submitting my ideal language, a mix of *Bicep* and *Angular*. I was proud of myself. *ChatGPT*, whom we'll call *Gipi* from now on, replied, "Great job, buddy! You are awesome! But here's a completely different language that's much better than yours". 

I took my pride aside and refined its language with a few more messages until I was happy.

> The syntax changes constantly during development as more cases arise.

## Branding

As you know, naming is the most challenging part of programming. And I couldn't live knowing my project folder was called something like "design-language-test". I needed a name.

*Gipi* helped here too. We went back and forth a few times. I wanted something short, easy to remember, and that made sense.

We ended up with _Stylo_. Which I later found means pen in French. That is good enough for me. Now I can start coding.

## First code

What I knew about compilers was that we needed at least three things:
* A lexer: to split the string into building blocks (tokens)
* A parser: to create an Abstract Syntax Tree (AST) representing the code
* A renderer: to converte the AST to HTML and CSS

I asked *Gipi* to create a lexer in _Typescript_, and few seconds I got it. I was amazed by how fast it was.

I then asked it to write the parser and, finally, the renderer. Job done. Ready to get rich.

![Stylo AST example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jif5zdwi78q062lrrox6.jpeg)

Not really. Nothing was working. Actually, it was not even compiling.

## Minimum Viable Product

Now the gory journey to make anything work starts. I wanted to use as less brain as possible, letting *Gipi* think on my behalf. I pay for it after all!

I started with the lexer, pasting the code and the error in the chat, applying the fix, running, repeat. This went on for several cycles until I did it myself. *Gipi* couldn't understand the code, like, "I am sorry, now I get it, here's the solution". But they were just lies.

Fixing the lexer was easy. Fixing, aka building-from-scratch, the parser was a different story. That took a couple of days in my spare time.

The renderer was relatively easy. Once you have the _AST_, you just convert the nodes to _HTML_, which is also a tree.

## New features

Of course, I was unhappy with some basic features. I wanted the syntax to support anything I needed. I did everything on my own. At this point, the code was so complex that it was not worth trying with *Gipi*.

However, I still needed a web editor to use easily use the renderer. Here _AI_ helped a lot as a glorified search engine. It told me which code editor to use for _React_, how to enable syntax highlight and create a pan and zoom frame.

However, when I asked for the actual code, again, nothing was working, and it was stuck in a loop. I ended up doing everything myself again.

```typescript
component Footer(primaryText = "Ok", secondaryText = "Cancel") {
  block(class="p-4 flex justify-end gap-2 border-t-2") { 
    SecondaryButton(secondaryText)
    PrimaryButton(primaryText)
  }
}
```

## Conclusions

If you read this far, you know what I am going to say. For a few more years, our jobs are safe. *Gipi* is great for boilerplate code, while _Copilot_ is a faster autocomplete that I greatly appreciate.

However, we still need to put effort into what we do, know how to code and how things work. Most importantly, be ready to maintain what _AI_ wrote for years to come.

Check the *GitHub* [repository](https://github.com/matteobortolazzo/stylo) too!

![Clippy love](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dltjry9q8nodmdqok6r6.png)