freecodecamp / devdocs

API Documentation Browser

DevDocs — API Documentation Browser

DevDocs combines multiple developer documentations in a clean and organized web UI with instant search, offline support, mobile version, dark theme, keyboard shortcuts, and more.

DevDocs was created by Thibaut Courouble and is operated by freeCodeCamp.

We are currently searching for maintainers

Please reach out to the community on Discord if you would like to join the team!

Keep track of development news:

• Join the devdocs chat room on Discord
• Watch the repository on GitHub
• Follow @DevDocs on Twitter

Table of Contents: Quick Start · Vision · App · Scraper · Commands · Contributing · Documentation · Related Projects · License · Questions?

Quick Start

Unless you wish to contribute to the project, we recommend using the hosted version at devdocs.io. It's up-to-date and works offline out-of-the-box.

DevDocs is made of two pieces: a Ruby scraper that generates the documentation and metadata, and a JavaScript app powered by a small Sinatra app.

DevDocs requires Ruby 3.3.0 (defined in Gemfile), libcurl, and a JavaScript runtime supported by ExecJS (included in OS X and Windows; Node.js on Linux). Once you have these installed, run the following commands:

git clone https://github.com/freeCodeCamp/devdocs.git && cd devdocs
gem install bundler
bundle install
bundle exec thor docs:download --default
bundle exec rackup

Finally, point your browser at localhost:9292 (the first request will take a few seconds to compile the assets). You're all set.

The thor docs:download command is used to download pre-generated documentations from DevDocs's servers (e.g. thor docs:download html css). You can see the list of available documentations and versions by running thor docs:list. To update all downloaded documentations, run thor docs:download --installed. To download and install all documentation this project has available, run thor docs:download --all.

Note: there is currently no update mechanism other than git pull origin main to update the code and thor docs:download --installed to download the latest version of the docs. To stay informed about new releases, be sure to watch this repository.

Alternatively, DevDocs may be started as a Docker container:

# First, build the image
git clone https://github.com/freeCodeCamp/devdocs.git && cd devdocs
docker build -t thibaut/devdocs .

# Finally, start a DevDocs container (access http://localhost:9292)
docker run --name devdocs -d -p 9292:9292 thibaut/devdocs

Vision

DevDocs aims to make reading and searching reference documentation fast, easy and enjoyable.

The app's main goals are to:

• Keep load times as short as possible
• Improve the quality, speed, and order of search results
• Maximize the use of caching and other performance optimizations
• Maintain a clean and readable user interface
• Be fully functional offline
• Support full keyboard navigation
• Reduce “context switch” by using a consistent typography and design across all documentations
• Reduce clutter by focusing on a specific category of content (API/reference) and indexing only the minimum useful to most developers.

Note: DevDocs is neither a programming guide nor a search engine. All our content is pulled from third-party sources and the project doesn't intend to compete with full-text search engines. Its backbone is metadata; each piece of content is identified by a unique, "obvious" and short string. Tutorials, guides and other content that don't meet this requirement are outside the scope of the project.

App

The web app is all client-side JavaScript, written in CoffeeScript, and powered by a small Sinatra/Sprockets application. It relies on files generated by the scraper.

Many of the code's design decisions were driven by the fact that the app uses XHR to load content directly into the main frame. This includes stripping the original documents of most of their HTML markup (e.g. scripts and stylesheets) to avoid polluting the main frame, and prefixing all CSS class names with an underscore to prevent conflicts.

Another driving factor is performance and the fact that everything happens in the browser. A service worker (which comes with its own set of constraints) and localStorage are used to speed up the boot time, while memory consumption is kept in check by allowing the user to pick his/her own set of documentations. The search algorithm is kept simple because it needs to be fast even searching through 100,000 strings.

DevDocs being a developer tool, the browser requirements are high:

• Recent versions of Firefox, Chrome, or Opera
• Safari 11.1+
• Edge 17+
• iOS 11.3+

This allows the code to take advantage of the latest DOM and HTML5 APIs and make developing DevDocs a lot more fun!

Scraper

The scraper is responsible for generating the documentation and index files (metadata) used by the app. It's written in Ruby under the Docs module.

There are currently two kinds of scrapers: UrlScraper which downloads files via HTTP and FileScraper which reads them from the local filesystem. They both make copies of HTML documents, recursively following links that match a set of rules and applying all sorts of modifications along the way, in addition to building an index of the files and their metadata. Documents are parsed using Nokogiri.

Modifications made to each document include:

• removing content such as the document structure (<html>, <head>, etc.), comments, empty nodes, etc.
• fixing links (e.g. to remove duplicates)
• replacing all external (not scraped) URLs with their fully qualified counterpart
• replacing all internal (scraped) URLs with their unqualified and relative counterpart
• adding content, such as a title and link to the original document
• ensuring correct syntax highlighting using Prism

These modifications are applied via a set of filters using the HTML::Pipeline library. Each scraper includes filters specific to itself, one of which is tasked with figuring out the pages' metadata.

The end result is a set of normalized HTML partials and two JSON files (index + offline data). Because the index files are loaded separately by the app following the user's preferences, the scraper also creates a JSON manifest file containing information about the documentations currently available on the system (such as their name, version, update date, etc.).

More information about scrapers and filters is available in the docs folder.

Available Commands

The command-line interface uses Thor. To see all commands and options, run thor list from the project's root.

# Server
rackup              # Start the server (ctrl+c to stop)
rackup --help       # List server options

# Docs
thor docs:list      # List available documentations
thor docs:download  # Download one or more documentations
thor docs:manifest  # Create the manifest file used by the app
thor docs:generate  # Generate/scrape a documentation
thor docs:page      # Generate/scrape a documentation page
thor docs:package   # Package a documentation for use with docs:download
thor docs:clean     # Delete documentation packages

# Console
thor console        # Start a REPL
thor console:docs   # Start a REPL in the "Docs" module

# Tests can be run quickly from within the console using the "test" command.
# Run "help test" for usage instructions.
thor test:all       # Run all tests
thor test:docs      # Run "Docs" tests
thor test:app       # Run "App" tests

# Assets
thor assets:compile # Compile assets (not required in development mode)
thor assets:clean   # Clean old assets

If multiple versions of Ruby are installed on your system, commands must be run through bundle exec.

Contributing

Contributions are welcome. Please read the contributing guidelines.

Documentation

• Adding documentations to DevDocs
• Scraper Reference
• Filter Reference
• Maintainers’ Guide

Related Projects

Made something cool? Feel free to open a PR to add a new row to this table! You might want to discover new projects via https://github.com/topics/devdocs.

Project	Description	Last commit	Stars
yannickglt/alfred-devdocs	Alfred workflow
Merith-TK/devdocs_webapp_kotlin	Android application
gruehle/dev-docs-viewer	Brackets extension
egoist/devdocs-desktop	Electron application
skeeto/devdocs-lookup	Emacs function
astoff/devdocs.el	Emacs viewer
naquad/devdocs-shell	GTK shell with Vim integration
hardpixel/devdocs-desktop	GTK application
qwfy/doc-browser	Linux application
dteoh/devdocs-macos	macOS application
Sublime Text plugin	Sublime Text plugin
mohamed3nan/DevDocs-Tab	VS Code extension (view as tab)
deibit/vscode-devdocs	VS Code extension (open the browser)
mdh34/quickDocs	Vala/Python based viewer
romainl/vim-devdocs	Vim plugin
waiting-for-dev/vim-www	Vim plugin
luckasRanarison/nvim-devdocs	Neovim plugin
toiletbril/dedoc	Terminal based viewer
Raycast Devdocs	Raycast extension	Unavailable	Unavailable

Copyright / License

Copyright 2013–2024 Thibaut Courouble and other contributors

This software is licensed under the terms of the Mozilla Public License v2.0. See the COPYRIGHT and LICENSE files.

Please do not use the name DevDocs to endorse or promote products derived from this software without the maintainers' permission, except as may be necessary to comply with the notice/attribution requirements.

We also wish that any documentation file generated using this software be attributed to DevDocs. Let's be fair to all contributors by giving credit where credit's due. Thanks!

Questions?

If you have any questions, please feel free to ask them on the contributor chat room on Discord.

devdocs's Issues

angular.module vs angular.Module

On the angular.module page, there are are links to angular.Module sections, but they link to angular.module. angular.Module (type in ng) seems to have been missed by the scraper.

Add multilingual support

I think add multilingual support is a good idea because not everybody speak english very well ;-)

Some keyboard shortcuts have stopped working.

I am using Firefox 26 and my keyboard shortcuts don't work now. They used to, when I first visited DevDocs,f but don't now. Probably since the last update?

The PageUp/PageDn keys work normally, so do the Alt+Arrows. But,

Arrow keys don't select the next/prev function as they used to. "Search as you type" also doesn't work.

This isn't an intentional change, is it?

ES6 docs in JavaScript section.

I agree that ES6 is evolving as of now, but few of them can have docs?

Search in some subsections does not work unless manually entering URL

When I click any of the links from Angular JS and down, I see that the URL in the browser is switched so that the section is added on the end.

For example, if I click "python", and try to search for itertools, I see the URL change from devdocs.io to devdocs.io/python, but no python stuff when I search:

... only HTMl / JS / web stuff.

Only if I manually select the URL bar in the browser tool bar and hit [Enter], the search works properly.

System info:
OS: Xubuntu 13.10 64bit
Browser: Chromium, Version 31.0.1650.63 Ubuntu 13.04 (31.0.1650.63-0ubuntu0.13.04.1~20131204.1)

Current page's table of contents

Some documentations have very long pages that are difficult to browse through. We could improve this by adding a fixed-positioned table of contents which is automatically generated based on the current page's headings (<h2>, <h3>, etc.).

If URL route without a trailing slash(/), then page not found :'OOPS'

RT..

should be match the same url with the missing '/'

Support multiple versions of a piece of software

I found out about this project from the Postgres Weekly newsletter. The devdocs for postgres (http://devdocs.io/postgresql/) will be very useful to me. One thing that's lacking from the official postgres documentation, though, is the ability to choose a specific version of Postgres. In my case, I'd like to read the documentation for Postgres 9.2 since I'm not running 9.3 yet.

Visual indicator on doc page to identify source

When looking at documentation from different sources it's difficult to tell at a glance which source you're looking at. For example, when looking up event.preventDefault you'll get a result for DOM and jQuery. When reading the documentation, there is no visual difference between the two since they're styled the same, except for the icons in the results sidebar.

I recommend adding some sort of color difference for different sources, within the documentation pages. For instance, a blue header with the jQuery logo for jQuery vs. a green header with the DOM logo for MDN DOM documentation. It'll make it very easy to tell at a glance which source you're reading from.

Git within "Javascript" category

Git is a multipurpose tool , thus making it part of Javascript section does not seem relevant.

Apart form Git, are there numerous other docs that are cross-language / technology / platform ? It may be wise to create a "Tools" section.

Update angular docs, 1.2.0 was released some time ago

I know about https://github.com/Thibaut/devdocs/blob/master/lib/docs/scrapers/angular.rb#L3-L11 but now angular 1.2.0 was released, can't you just grab the data from angular repo directly?

missing APIs for HTML

first thing I wrote was "checked" and only got a CSS spec. it didn't find any specs for any HTML attributes...

Various "Oops, that page doesn't exist."

Those does not exists:
http://devdocs.io/css/nav-down
http://devdocs.io/css/nav-index
http://devdocs.io/css/nav-left
http://devdocs.io/css/nav-right
http://devdocs.io/css/nav-up

Linked from http://devdocs.io/css/

Don't use location.replace

https://developer.mozilla.org/en-US/docs/Web/API/Location.replace

That causes history issue (there's none) in WebKit2 :( Could you please don't use it for navigation? Maybe some HTML5 History API or just location.fragment?

Thanks.

Github Readmes From Repos

It would be really useful to be able to add a repo to devdocs and have it import that repos Readme or have some sort of similar plugin architecture.

Adding Yii Documentation

Opening a new issue per documentation.

Offline web app

DevDocs's offline setup isn't very good, requiring people to manually install, run, and update the code. Ideally we should cache everything in the browser using a storage API.

IndexedDB is supported by most browsers but I'm not sure it can reliably store tens of thousands of files amounting to hundreds of megabytes.

Chrome also supports the FileSystem API.

Usability enhancement to go back to the home page

Hi, first let me say that this project is amazing in a lot of ways.

Second thing, i have a small usability feature request, i will describe the use case shortly.

After inserting some text in the search box (for example, "find") and clicking on an interesting entry (for example, jQuery "find"), the entry's section is selected, and the search box reduces its scope just to that section (in the example case, it will search just within jQuery). I don't find easy, keyboard means to go back to a global search, aside hitting the browser back button, clicking on the bookmark again or editing the url by hand.

Since it happens often to me to jump from one section to another, i would maybe prefer that the section switch did not happen at all, but while this is arguable, i think that an easier way to get back to the global search mode may be of benefit of all kind of users.

Cheers!

What about having devdocs in French? (or other languages)

I personally don't mind reading documentation in English but I know quite a few fellow workers who would prefer it in French (or their mother tongue).
I understand that documentation is not always available in all languages but quite a few exist and I think it would be nice to offer the option when it exists.
And I am ready to help if required ^^

"Browser not supported" in Opera Mobile for Android with user-agent "Desktop"

With user-agent "Mobile" site is loading correctly

Categorize documentations

Once DevDocs supports a few more documentations it may be a good idea to organize the "Select documentation" list by "kind" or programming language.

Search by documentation (e.g. "r<tab>") does not always work

Typing a tag followed by hitting the tab key in the search field such as "ruby" or "r" does not always work. It's most notably broken on the initial page http://devdocs.io whereas on some subpages such as http://devdocs.io/ruby/array this feature works normally.

Tested on Firefox 26 (Mac and Win), Chrome 32 (Mac) and Safari 7 (Mac).

Ability to create profiles

It would be great to be able to create profiles, ie "frontend", "backend" each having different settings (available languages/tools).

This implies supporting login, using GH login could be great.

Lastly I want to thank you for this app, really great !

Say I wanted to add a command load this via launchctl

I want devdocs to run every time my Mac boots.

How should I go about it? I tried using rvm, but ran into this error message when I put the rvm-specific rackup command in the launchctl configuration:

env: ruby_executable_hooks: No such file or directory

Then I tried using "rvm use system" and installing/running rackup and got this error message:

/System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/dependency.rb:296:in `to_specs': Could not find 'rack' (>= 0) among 4 total gem(s) (Gem::LoadError)
    from /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/dependency.rb:307:in `to_spec'
    from /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/core_ext/kernel_gem.rb:47:in `gem'
    from /usr/local/Cellar/ruby/2.0.0-p353/bin/rackup:22:in `<main>'
/System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/dependency.rb:296:in `to_specs': Could not find 'rack' (>= 0) among 4 total gem(s) (Gem::LoadError)
    from /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/dependency.rb:307:in `to_spec'
    from /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/core_ext/kernel_gem.rb:47:in `gem'
    from /usr/local/Cellar/ruby/2.0.0-p353/bin/rackup:22:in `<main>'

Then, I tried running

bundle install --path $(shell pwd)

and got an actual segfault, which seems pretty amazing.

/Users/kevin/code/local-servers/usr/devdocs/devdocs-master/ruby/2.0.0/gems/eventmachine-1.0.3/lib/rubyeventmachine.bundle: [BUG] Segmentation fault
ruby 2.0.0p247 (2013-06-27 revision 41674) [x86_64-darwin13.0.1]

Problematic keyboard shortcuts on Windows

The help page lists a few Cmd key combinations, in particular Cmd + ← and Cmd + → for navigating back and forth in history. On Windows these combinations become Ctrl + ← respectively Ctrl + →, which is highly problematic because that exact behaviour is already mapped to Alt + ← respectively Alt + →. Meanwhile, the Ctrl combinations have a different behaviour: to jump the cursor a full word left or right.

I haven't tested how GNU/Linux compares.

I suggest that, for Windows, the back/forth navigation shortcuts, being first-class citizens, be completely dropped. Failing that, that they be rebound to Alt to avoid the above confusion.

Ctrl + Enter (Cmd + Enter) does not currently interfere with anything so doesn't need special handling.

As an aside, and as a much more innocent issue, I would expect the behaviour mapped to Alt + ↓, Alt + ↑ for ↓, ↑ and ↓, ↑ for Ctrl + ↓, Ctrl + ↑, the rationale being that the default behaviour of ↓, ↑ is incremental scrolling and I would expect to normally have far more need of that than navigating up/down the list of items.

Can't select text in search box

It seems to not be possible to select text with the mouse in the search box.

Offline installation

I am trying to install devdocs on a Ubuntu 12.04 LTS platform but when running the 'bundle install' command I get the error "Could not find html-pipeline-1.2.0 in any of the sources". It appears that this particular version is referenced in the Gemfile.lock but has been "yanked" from the site :-(
Which version should I use?

PHP docs don't properly handle internal/external linking distinction

Every link in the PHP docs is treated as an external link, regardless of whether the article linked to exists within the DevDocs library or not. This may be due to the fact that PHP's site is geographically distributed with help from subdomains, so a link to www.php.net/something might redirect to us2.php.net/something - presumably to assist with load balancing. If the subdomain changes between the request and the links, the scraper or processor may not properly detect that the links actually go to the same content, despite having a different domain, and treat them as external.

This isn't a major inconvenience as I can either click the link and continue on the upstream site, or I can remember that the PHP links aren't properly handled and find the article I want via search. Still, it's less convenient and breaks the usage flow, so it would be nice if it was fixed. Had I the time, I'd probably attempt to write the patch myself.

Missing pages from PHP's Strings module

Following pages are missing from PHP's Strings module

• htmlspecialchars_​decode
• number_format
• strip_tags
• substr_​compare
• substr_​count
• substr_​replace

Improved desktop wrapper

I was thinking of scripting up a desktop wrapper for devdocs. Currently I have it wrapped with Fluid as indicated in your docs, but it would be nice to improve the wrapper with taskbar/menu options, a custom app icon, and have proper sync abilities so it can load offline if need be. I was thinking TideSDK, Node-Webkit, or even trying out the new Brackets-Shell.

Thoughts?

Add links to the official website on each documentation's root page

Related issue: #18

Add a "Search all" to dropdown to search over all doc sets when match isn't found in activated sets

It's not apparently obvious that I have to activate a documentation set
I saw underscore in my list of potential sources, but didn't activate it. When I was searching, I got no result -- made me think devdocs was broken

I think it might be nice to have a spot where you "Search over non-activated documentation sources" when there are no results

Rearranging documentations in the sidebar / results

I'd like to be able to rearrange documentations in the sidebar by dragging them in the "Select documentation" list. The order should also be reflected in the search (when results have identical scores).

Invalid character printed on Ruby docs

Found illegal markup added on this Ruby doc :

On http://devdocs.io/ruby/csv#class-CSV-label-Writing, some ";;" are added. These chars should not added.

Example :

CSV.open("path/to/file.csv", "wb") do |csv|
  csv <;;<;; ["row", "of", "CSV", "data"]
  csv <;;<;; ["another", "row"]
  # ...
end

Expected :

CSV.open("path/to/file.csv", "wb") do |csv|
  csv << ["row", "of", "CSV", "data"]
  csv << ["another", "row"]
  # ...
end

Allow scrolling right-hand (doc) panel with arrow keys

Can you allow scrolling the right hand side, where the documentation is shown, with the up/down arrow keys, if focus is on the right hand side?

Right now, no matter where focus is in the app, the up/down arrow keys change the selected item in the sidebar.

Not all users have multi-touch trackpads, and if they don't they are forced to use the browser rendered scrollbar to scroll the right hand panel up/down.

I would be willing to implement this, but it would help to have a push in the right direction.

Support for browser keyword search

A nice feature would be support for browser keyword search by adding an explicit search URL such as:

http://devdocs.io/search?q=

Using this URL it's possible to add a bookmark to http://devdocs.io/search?q=%s with a shortcut such as "d". Once done, DevDocs searches are possible in the browser address bar, for example:

• d puts: doc for the puts command
• d r puts: doc for the Ruby puts command

Embeddable / iframe-optimized version

It'd be great if the app included an <iframe>-optimized version which made it easy to embed DevDocs in other websites.

Search bar Firefox 24.0 space issue

Hard to explain, but I tried searching "409 Conflict" which resolves to "409+Conflict" and doesn't return any results... If I search "409" the expected result appears.. also if I put "409%20conflict".. Seems to be an encoding issue.

Put quick access to MaxCDN for libraries on the documentation

Like the way the jQuery Mobile docs have quick access to CDN at the bottom of the docs, in any doc section for a library or framework, put quick access CDN links on the main page.

HTTP status code 418?

WRT to RFC#2324‎ http://devdocs.io/http-status-codes/ needs 418 ;) ?

Make Javadocs browsable

Lots of, if not all, Java projects provide Javadocs. It would be great to be able to integrate these.

For instance, the JavaEE 7 official Javadoc license does not permit redistribution to third-parties, so it would be great to be able to integrate them by hand and to browse them in offline mode on a personal basis: there would be no license violation.

Moreover, lots of Java projects which are true Free Software could then be integrated to the full devdocs distribution.

Add category/type pages to the search index

Pages like HTML/HTML5 should be included in the search index.

Tag releases

It would be nice if devdocs versions or releases were tagged.

[Enhancement] Completely offline version?

I've been playing around with DevDocs and noticed that there are iframes and images loaded from external resources.

Could you please think about making parsers to also download those?

While converting DevDocs books to DevHelp format I've made my own bycicle with square wheels, but its pretty hacky and doesn't rely on your code base (see master at https://github.com/naquad/devdocs - especially lib/downloader.rb and lib/devhelp.rb).

Smartphone webapps with Phonegap

This should be rather easy to port (I believe)

Breadcrumbs / related entries

When opening a search result there is currently no way to quickly browse through related entries (with the same type). We could improve this by adding a breadcrumb bar to the UI.

Php docs: links in class synopsis references to php.net site, instead of devdocs.io

All in subject. For example open http://devdocs.io/php/class.curlfile and try to follow any link in class synopsis. The php.net site opens, instead of devdocs.io.

Angular ng.filter:json not working

On angularjs page : http://devdocs.io/angular/
Clicking "ng.filter:json" opens a new page but is empty

Run searches in the background using Web Workers

Using Web Workers is likely to speed up the search (no more setTimeout) and make the UI more responsive (workers run in a separate OS thread), but they have the downside of not being able to share objects with the main page. This would require us to duplicate the index/data in memory and may make the app slower to boot.

Php docs: missing space in class definitions.

I think that problem in parsing php docs. If you open any documentation page with class definition (for example, http://devdocs.io/php/class.curlfile), you could find missing space in class synopsis:

public stringgetFilename ( void )

instead of

public string getFilename( void )