Over the years, I've thought about different ways of creating an interactive tutorial about writing a simple programming language. For example, you can create a "wizard" style with next and back buttons, or you can create one single page with the code floating on the right side of the content (possibly sticky). One detail is that each example would grow in size (for the complete code), but would only focus on one sub-section. I thought about collapsing sections already covered, but being able to expand them, or just have a single button to expand all the hidden code. Has anyone had experience or have seen articles that use a "build from small to large", showing code along the way?

I've always loved this walkthrough: https://viewsourcecode.org/snaptoken/kilo

This looks like inline code (vs off to the side), and colored "diffs" to show the changes and also collapsed functions. I like it. Very visual.

Similar to what @Kartik Agaram shared, I enjoy how Build your own Lisp is setup.

Thank you Eli. Yes, it has a similar format and I like the build-ups. To support "visual diff" and code folding, I think I'll add Markdown code comments at the end of the line. Maybe something like:

NumericLiteral                  // >
  = value:[0-9]+ {
      return {
        type: 'NumericLiteral', // +
        value: Number(text())   // +
      };
    }

GitHub Markdown support adding + and - to the beginning of the line, but I want to be able to support other hints, maybe tooltips for example.

legit, I tend to shy away from tooltips because they are a headache to make accessible — I think that is why I’m drawn to this more literate code style, but I defo see the gap it leaves in getting comments sort of right as close to the code as possible

Maybe not hover tooltips, but like static popup notes

Assuming you already have good reference docs on your website, you might wait for the LLMs to crawl them and then create a tutorial chat UI on your site that asks the user for simple apps or examples they'd like to write, and walks them through how to do that. Could also periodically have the LLM generate a bunch of simple examples with descriptions, for quick tutorial browsing. Conveniently, these would update as your docs and APIs do. It's possible the docs themselves could be autogenerated...

Ah yes, I haven't done much with AI/deep learning. That could be the start of my journey.