gitmyhub

tools

Go ★ 4.8k updated 11mo ago ▣ archived

Codelabs management & hosting tools

The tools behind Google Codelabs, write a tutorial in Google Docs or Markdown, run one command, and get a finished interactive step-by-step tutorial web page you can host anywhere for free.

GoMarkdownHTMLJavaScriptGoogle Analyticssetup: moderatecomplexity 2/5

This repository contains the tools behind Google Codelabs, which are interactive step-by-step tutorials used to teach developers how to work with Google products and other technologies. The project has been running for over three years, and has produced more than 500 tutorials that have been used at events ranging from small local meetups to Google I/O. Anyone can use these tools to create and publish their own tutorials, not just Google.

The main tool is called claat, which stands for Codelabs as a Thing. You write your tutorial either in Google Docs (following a set of formatting rules) or in a Markdown text file, and then run claat to convert it into a finished web page or other output format. The conversion happens on your own computer via the command line, and the result is a folder of plain static files you can host anywhere, including GitHub Pages, Netlify, or a basic Python web server.

The supported output formats go beyond just web pages. The same source document can be converted into Markdown for Qwiklabs, special Markdown for Cloud Shell Tutorials, or formats used by Jupyter notebooks and related data-science platforms like Kaggle and Colaboratory. This means a single source file can produce several different finished tutorials aimed at different communities, though the project notes that at any one time you should pick one source format and stick to it rather than maintaining both a Google Doc and a Markdown file simultaneously.

For previewing work in progress, there is a Chrome browser extension that lets you see a rendered version of your tutorial directly from the Google Doc view, without running the full export. Once you are ready to publish, claat produces purely static output with no server-side requirements, so hosting is straightforward on any standard web platform.

The tools also include a site builder for creating a landing page that lists multiple codelabs, similar to the official Google Codelabs website. Usage tracking through Google Analytics is supported, the tutorials remember where a reader stopped, and the web output is designed to work on mobile devices.

Where it fits