Show HN: Leaf – Create interactive coding tutorials
1–10 of 24 posts
Re: Show HN: Leaf – Create interactive coding tutorials
#2Hey 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.
Re: Show HN: Leaf – Create interactive coding tutorials
#3Hey 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 the…
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
Re: Show HN: Leaf – Create interactive coding tutorials
#4This 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.
Re: Show HN: Leaf – Create interactive coding tutorials
#5Is this open source? Can I self-host it?
Re: Show HN: Leaf – Create interactive coding tutorials
#6Any plan for non-Google sign-in solution?
Re: Show HN: Leaf – Create interactive coding tutorials
#7I 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.
Re: Show HN: Leaf – Create interactive coding tutorials
#8Any 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.
Re: Show HN: Leaf – Create interactive coding tutorials
#9I'm missing C# highlighting
Re: Show HN: Leaf – Create interactive coding tutorials
#10I 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.