Show HN: Leaf – Create interactive coding tutorials

by dsps301 • 5 years ago

127 23 5 years ago

dsps301• 5 years ago

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.

sha_r_roh• 5 years ago

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

unoti• 5 years ago

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.

dangoor• 5 years ago

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.

macdoniel• 5 years ago

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.

mcintyre19942• 5 years ago

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.

beret4breakfast• 5 years ago

probably a ad/popup blocker

aloisdg• 5 years ago

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

threatofrain• 5 years ago

Any plan for non-Google sign-in solution?

mcintyre19942• 5 years ago

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

christophergs• 5 years ago

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

kkwtfeliz• 5 years ago

I'm missing C# highlighting

ModernMech• 5 years ago

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.

maneesh• 5 years ago

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

zelos• 5 years ago

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.

dwagnerkc• 5 years ago

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.

kaycebasques• 5 years ago

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/

YetAnotherNick• 5 years ago

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.

justusthane• 5 years ago

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.

ajdegol• 5 years ago

Go read The Mom Test.

ChrisMarshallNY• 5 years ago

Looks very nice.

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

dlivingston• 5 years ago

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.

plondon514• 5 years ago

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.

Show HN: Leaf – Create interactive coding tutorials

Related Stories