DEV Community

Cover image for Transform code screencasts into markdown tutorials for Dev and GitHub
Ian Jennings for Replayable

Posted on

Transform code screencasts into markdown tutorials for Dev and GitHub

Paircast speedrun

Writing tutorials is tedious

When you write tutorials on Dev.to (or GitHub, or anywhere else) your workflow is probably repetitive. Maybe it looks something like this:

  • Create the full app
  • Break the app into code samples
  • Awkwardly arrange the code samples in order
  • Follow along yourself
  • Realize the code samples don't make sense
  • Make a ton of edits
  • Write explanations for each code sample
  • Do everything again for a video

You end up repeating your work and explaining yourself over and over; in this case, at least 3 times. If something needs to be updated, well, start all over.

That's why I created Paircast. I spent 6 years in Developer Relations writing tutorials. I dreamt of a better way, then I built it.

Screencasts as documentation

Paircast simplified

Paircast squashes all these steps into a single process.

As you work, Paircast records your screen, microphone, and camera like a screencast or live-coding on Twitch.

Now I know what you're thinking. Video sucks for coding. You can't search, you can't copy and paste, and it's hard not to navigate.

Paircast uses git behind the scenes to track file changes and align them with your screencast. Code changed are displayed as git diffs within a markdown file next to your video. See a demo here.

Publishing to Dev.to, GitHub, and more

Not only that, but Paircast transcribes your voice and weaves what you say between the code changes.

This turns your code screencast into a full-on markdown tutorial you can post to Dev.to, GitHub, or even embed in your repo readme or documentation. See an example of that output on Dev.to or GitHub.

Pairast Git Integration

And what about git?

Paircast actually links commits back to the video as well. So when you upload your full example to GitHub or GitLab, developers can jump to the point in the video where that line of code was created!

Check out the docs on using git blame with Paircast for more on that.

Get Started

Ready to get started!? Awesome. Paircast is available for Mac and Windows, and it works with any programming language.

Paircast is currently in beta, but you can get instant access just by joining our Discord. Stop in, say hi, talk to our #beta bot, and let me know how things go.

Beyond docs and tutorials

It doesn't stop here. I designed Paircast to be "screencasts for developers," and the use cases go far beyond tutorials. You can use Paircast for:

  • Documentation
  • Creating onboarding guides
  • Answering support emails
  • Interviewing developers with coding takehomes
  • Video Pull Requests
  • Performing code review
  • Conducting developer experience research

I've got a lot of writing to do! Follow Paircast here on Dev.to to follow the Paircast journey.

Top comments (3)

Collapse
 
byrro profile image
Renato Byrro

This means that in a “git blame” view you’ll be able to navigate directly to the point in the Paircast where that line of code was written!

This is an extremelly helpful feature for who's learning. They can read the code and, whenever need more info to understand, click to watch the full explanation of that specific line.

Collapse
 
byrro profile image
Renato Byrro

Very interesting project Ian. Just downloaded and will try it out this weekend.

Collapse
 
ianjennings profile image
Ian Jennings

Awesome! Join us on Discord here: discord.com/invite/9g5aUTW