explaingit

googlecodelabs/tools

4,751GoAudience · developerComplexity · 2/5Setup · moderate

TLDR

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.

Mindmap

mindmap
  root((codelabs tools))
    What it does
      Tutorial conversion
      Static site output
      Multi-format export
    Tech Stack
      Go
      Markdown
      Google Docs
      HTML
    Use Cases
      Write codelab tutorials
      Host on GitHub Pages
      Generate Jupyter output
    Audience
      Developer educators
      Technical writers
      Event organizers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Write a technical tutorial in Google Docs and convert it into a polished codelab web page with a single claat command.

USE CASE 2

Create a step-by-step workshop guide and host it on GitHub Pages or any static web host at no cost.

USE CASE 3

Generate multiple output formats from one source, web page, Jupyter notebook, and Qwiklabs Markdown, without rewriting the tutorial.

USE CASE 4

Build a landing page that lists all your organization's codelabs, similar to the official Google Codelabs site.

Tech stack

GoMarkdownHTMLJavaScriptGoogle Analytics

Getting it running

Difficulty · moderate Time to first run · 30min

Google Doc tutorials require specific formatting rules to export correctly, Markdown input is more straightforward.

In plain English

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.

Copy-paste prompts

Prompt 1
Using the claat tool from googlecodelabs/tools, convert my Markdown tutorial file into a codelab web page, what Markdown formatting rules do I need to follow and what is the exact claat command?
Prompt 2
How do I set up claat to convert a Google Doc into a codelab, including the required document formatting conventions and the export command?
Prompt 3
I want to host multiple codelabs together as a site. Show me how to use the codelab site builder from googlecodelabs/tools to generate a landing page listing all my tutorials.
Open on GitHub → Explain another repo

← googlecodelabs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.