Leaf has a code editor & image selection block in the right pane. In the left pane, you are able to write out the steps of your coding tutorial using Markdown. You can then associate your steps with parts of your codebase / certain images, so that when you scroll through a finished tutorial, the code editor automatically scrolls to the relevant code & image.
To get a sense of what a completed tutorial might look like, check out this example of creating a CSS toggle switch — https://getleaf.app/daily-dev-tips/creatingdaynig-3219ec7d. Here’s another example of how a Binary Search algorithm explanation could look like — https://getleaf.app/dsps301/binarysearch-kchl1gs6.
With Leaf, you can go back & forth between the two-panel view and a standard blog post format view (see Binary Search example above). That means you can write any type of standard blog/article using this tool, but can additionally choose to include the two-panel view when conducive to getting your point across. Right now, we support just the interactive coding blocks / image blocks, but the plan is to add other types of interactive components such as maps & animations in the future.
If you’re interested in authoring a tutorial in this way, or just want to check out the user interface a bit more, sign up here: https://getleaf.app/signup. For more examples, check out the explore page: https://getleaf.app/explore.