Show HN: Leaf – Create interactive coding tutorials | Hacker News Reader

Show HN: Leaf – Create interactive coding tutorials

getleaf.app

127 pointsdsps30123 comments

Putting on my technical writer hat and providing feedback from that perspective. First impressions:

> Leaf is a platform built from the ground up, for coding tutorials

In general I do think there could be a market for this. Lots of people want to create those kinds of side-by-side tutorials and they are hard to DIY. You would probably need to let customers brand the tutorial experience (host it on their own domain, etc.)

I don't much care that it's "built from the ground up", I suggest focusing the tagline more on the user. What's in it for me?

The "Learn more" link seems to go to an index of examples (it's a bit broken on iOS Chrome so I'm not sure). Regardless I was expecting it to link to an overview/explanation [1] doc

"Get started" button prompts me to sign-in. Seems like I should be able to test this product without providing credentials? At minimum you could link to a written tutorial of the workflow so that I can get a gist of it in action.

Stopping here. General feedback is that there's too much friction and the mobile UI is rather rough.

[1] https://documentation.divio.com/explanation/

I think this is a very rude feedback and lazy on your part to use this on iphone when it is clearly not intended for mobile use. I think it is very clear what's in it for the site owners.

> host it on their own domain

You can embed it in full page in your site. Little hacky I know.

There's nothing rude about the parent's feedback. They took the time out of their day to check out the product and provide their first impressions, which might be valuable to the creator.

Anyway, lots of people browse on their phone even if they're not going to use the product on their phone.

Go read The Mom Test.

Hey HN, my name is Adish Jain & I am building Leaf. Inspired by Stripe's API documentation (https://stripe.com/docs/payments/integration-builder), Leaf is a no-code tool which helps anyone author coding tutorials in a similar side-by-side format.

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.

Nice, this is useful for building tutorials. There are couple of things which you could think about -

1. How to host a page on a custom domain?

2. How to add dynamic content to the code? (example I change some variable which reflects in the code as well)

3. It would be useful if you can get the geenerated js/css files for any tutorial which can be embedded in other docs.

Because I guess this kind of tool is an addition to standard documentation. I built something very similar for our startup. Although in my case the code is built from dynamic content. https://test.cashfree.com/docsdemo/create-order

This is pretty great! The example you cited in this post should be prominent in the home page, and mobile users should still be able to see an example of what this does from the home page.

I like the look of the tutorials you've linked to! This definitely seems like a useful format.

One worry I always have when a new tool like this comes out, especially as a SaaS: what's the business model? It's just too much of an investment to create something only to have the platform disappear.

This looks like a great tool for learning. If this was self hosted, I would use it as an addition to a first-semester programming course in the university I work in right away!

However, I agree with the sentiments of some other posters that a SaaS model is simply a non-starter, for obvious reasons institutionally wise, but also for any personal use. I simply do not want to be tied to a particular service just to write a specific kind of post.

If there is a way to host this at the moment, please contact me if you want a test drive in a university context.

I can see this being really useful on documentation sites, kudos.

If you want to make money from your coding knowledge, CourseMaker [1] has similar functionality with video hosting/payments/custom domains all baked in.

[1] https://coursemaker.org

Looks like a good product. One very minor point: on Safari 14.1.1, the "Say goodbye to publishing code" line is too close to the "coding tutorials" line above it, so the descender of the g overlaps the b beneath it.

This looks really cool, I signed up and will definitely have a play with this.

I'm not sure if it's just me but your log in with Google isn't working for me. I put a breakpoint in your function that handles failures there and it has {"response: {error: "popup_closed_by_user"}} - but I just clicked my Google account as I usually would so I'm not sure why it's saying that. Sign up by Email worked fine anyway but figured I'd let you know in case it's affecting others.

I was quite surprised how many languages you support after logging in, it might be worth adding a list/some highlights somewhere on the marketing side because I think it'd a big advantage. If you're taking requests for one more, Elixir would be great!

I'm not sure if this is your site but the "How do scrolling and steps work in the Leaf codebase?" tutorial links to https://outofthebot.me/howdoscrolling-i4owsa28 which has an SSL error. Switching to http is a 404.

probably a ad/popup blocker

Hey Adish! This looks really cool. I'm working on something similar at https://codeamigo.dev

Maybe we could sync up :)

I'm taking a similar approach, but teachers are also required to create tests for each step of the tutorial. That way, user's need to pass a test to get to the next step.

I wrote about the project in more detail here: https://news.ycombinator.com/item?id=27900111

Or check out a tutorial: https://codeamigo.dev/lessons/54, as you can see the platform forces you to be interactive, rather than being passive about it.

This is beautiful and awesome! Would love to assist with some code if desired--is there a github repo?

Great idea. Just FYI on mobile home page looks good and even the tutorials look good, but the Explore page was offset so as to be unreadable. Also feel like Explore page should put top 5 examples at the top instead of random test examples.

Will definitely try it out.

I think this might be neat but I can’t really tell. On my iPhone the screenshots are very small and I can’t read them. I went to “learn more” but the page seems formatted for desktop and the info is cut off. One suggestion I have is maybe link to a demo of the product so I can see it in action. Maybe that’s what’s on the learn page, sorry if it is, but I would suggest putting one in the homepage too to increase engagement.

Very neat and could be very useful.

I would like to see this integrated with existing doc build tools like Sphinx. All of my documentation+examples for [various projects] are auto-built with [Sphinx / other tools].

If you can make it easy to add this as an extension, then I’m sold. If I have to link to / embed another website, I’m not interested.

Looks very nice.

Can't really tell, from the site, but is this JavaScript/TypeScript-only?

I'm missing C# highlighting

Any plan for non-Google sign-in solution?

It has email/password sign-in FWIW, if you enter an email in the box then username/password fields appear.

Is this open source? Can I self-host it?

Reply on news.ycombinator.com