Launch HN: SideGuide (YC S22) – Learn APIs by running them in live environments

Companies use us to let developers experiment with fully-configured examples with zero setup. If you saw Hyperbeam’s interactive example on Show HN a few days ago (https://news.ycombinator.com/item?id=32598062), that was built using SideGuide.

We originally started as a B2C coding education platform after graduating college. Knowing how to use APIs has become a critical part of solving meaningful coding problems, but we watched hundreds of devs struggle to learn from API documentation. API and SDK documentation is often lacking in depth and interactive examples, leading to an incomplete understanding both of the implementation process (how to get an API or SDK working) and of the value (what you can actually do with it). We repeatedly saw students floundering with this, then wasting hours re-inventing the wheel instead of using an off-the-shelf solution.

Eventually we realized that the pain of getting an API or SDK running wasn’t just limited to students, but is something that developers have to deal with all the time—especially when deciding whether or not to use a particular product. When you just want to quickly test an API, you shouldn’t have to futz around with installations, dependencies, and whatnot. Developers and technical PMs should be able to quickly play with the real code before investing time and money in a product. That is why we built SideGuide.

SideGuide allows API/SDK companies to create instant live coding environments that help their prospective users (developers) understand the implementation process and product value through real guided examples.

A company can create a live code environment/sandbox from a GitHub repo of any product example or lab. These online code sandboxes allow developers to quickly play around and learn with no setup or friction and after they are done they export the repo for use in their own projects.

These sandboxes can have optional guides that walk potential users through different parts of the implemented code. The steps in the guides can be attached to any file or code block in the project, so nuance in the code or structure can easily be explained.

In addition, we provide observability and a feedback mechanism for the sandboxes. This is so examples and guides can constantly be improved and support can be delivered when it’s needed.

Getting this right is a challenge because it’s only valuable if you create an experience that developers love. That means spinning up environments quickly, tight integration with API documentation/authentication, and flexible workflows for all of the different types of developers.

Our solution is different from other online coding environments in two main ways. First, we are focused on APIs/SDKs. We are building features to allow developers to quickly play, test, and learn about products instead of providing a fully featured IDE like most other solutions. Second, we give API companies a white-label solution, so they do not have to send clients to another platform to play with their product. This is what Hyperbeam did with their Show HN mentioned above (https://news.ycombinator.com/item?id=32598062). As that example shows, it allows for a more seamless solution all around.

Since we want devs to be able to experiment with examples with no initial setup, we decided to build our own web-based editor with Next.js, Monaco, and Sandpack. We built the UI with Next.js, which ...