Last week I wrote about building an offline mirror for yarn dependencies, so I can start new projects with my favourite dependencies even when I don't have an internet connection.

Today I'm building on this theme with another important part of every developer's toolkit - documentation.

When I'm building frontend stuff, I'll consult documentation from the following sources:

1. MDN Web Docs - (in my opinion) the best resource for web developers. Covers HTML, CSS, Javascript, and HTTP
2. React Docs (or the new hook-driven Beta version) - API reference and guides for the react framework
3. CanIUse - checking whether various JS/CSS features are available in different versions of web browsers

For each of these resources, I'll look at whether it's possible to access them locally without an internet connection. Let's get started.

Honourable Mention - Dash

When I started looking into running documentation offline, I immediately came across Dash from kapeli.com:

Dash is an API Documentation Browser and Code Snippet Manager. Dash instantly searches offline documentation sets for 200+ APIs, 100+ cheat sheets and more. You can even generate your own docsets or request docsets to be included.

This looks nice, it covers all the languages and frameworks I need it to, and it's not too expensive. If you want a quick solution to offline documentation that you don't need to mess around with and you're happy to pay, maybe check it out and don't read the rest of this blog post.

[Disclaimer: I have no affiliation with Dash and I have never used it. Please let me know if it's good!]

MDN Web Docs

MDN Plus - $5 monthly

Let's start with the official solution: In March 2022, Mozilla launched MDN Plus - a premium subscription service which adds extra features to MDN Web Docs. Besides Collections and Notifications (letting subscribers curate MDN articles and watch pages for changes respectively), it also adds MDN Offline:

Leverage the offline capability of our MDN PWA to work on the go. Whether you're in a high-speed train, a cabin in the woods or just looking to save some data, MDN Offline gives you access to the full power of your favorite dev resource, so your projects aren't interrupted. The site is snappier and your experience better.

This sounds like exactly what we're looking for, but to get access to MDN Offline we need to pay $5.00 monthly (or $50 yearly). This seems reasonable enough and I really do want MDN to survive, but my goal was to find a free approach where possible so that's what I'll be doing.

Self-hosting the MDN Web Docs

This was actually way easier than I expected - because MDN is open-source, all the content that powers MDN is hosted in a GitHub repo which is remarkably easy to clone and run locally:

git clone git@github.com:mdn/content.git; cd content; yarn; yarn start

One 700MB download later, you can navigate to http://localhost:5042/ in your browser and have the entire MDN Web Docs at your disposal (including the pages which advertise MDN Plus, which is objectively funny). This approach is so easy that I'm worried it'll become more difficult if MDN needs to up their revenue, but I don't think I understand their business well enough to have an actual opinion on that.

MDN Web Docs - Done ✅

React Documentation

Self-hosting the React docs

Like MDN Web Docs, React's documentation is all in a GitHub repository which we can easily download, install dependencies and run the dev server locally:

git clone git@github.com:reactjs/reactjs.org.git; cd reactjs.org; yarn; yarn dev;

And if we want the shiny new beta docs, we can just switch to the beta directory and build that separately:

cd beta; yarn; yarn dev

React Docs - Done ✅

CanIUse.com

CanIUse has a GitHub repository which stores the raw data that power caniuse.com - namely a 3MB json file called data.json. Unfortunately the source for the caniuse.com website isn't part of this repo (or any other repo I could find) so we can't easily self-host it like we did MDN or reactjs.org.

Command Line Tool

Listed in the caniuse repo's Third party tools is a command line tool called caniuse-cmd. It fetches the data.json file mentioned above, and lets you query browser support from your terminal.

To install this:

yarn global add caniuse-cmd

Also make sure that my yarn's global bin folder was in my path:

export PATH="$PATH:$(yarn global bin)"

Now I can query for css properties or javascript features without leaving the terminal:

The big caveat with caniuse-cmd is that it only knows about properties in caniuse's own database. (When you search on caniuse.com, you're also seeing results from MDN's Browser Compatibility Data, which happens to be both massive and also very granular). This means if you try something common like caniuse font-size, it'll get confused and show you the result for "font-size-adjust". You can read more about all this on CSSTricks or mozilla.org.

I'd love to have this in a browser but I can't find any work in this direction besides an issue on the caniuse repo from 2019 requesting a PWA version of the site. Building a local version of caniuse.com based solely on the data.json file seems doable, but it wouldn't include MDN compatibility database. Fortunately we already have the entire set of MDN docs working offline which includes compatibility tables, so we'll call that a win.

CanIUse - Done  ✅

Conclusion

When I started writing this post number 4 on my list was StackOverflow, but apparently there's about 21 million questions and counting, and that seems like a really big download. Their team obviously know that nobody is productive without it, and have been working on an offline version since 2019, but the vibe is less "bored on 2 hour flight" and more "Research Station at South Pole", so I'm probably not the intended user. Maybe it's for the best - maybe Stackoverflow makes me worse at reading documentation. Probably something for another post.