Top Related Projects
Beautiful static documentation for your API
The source code that powers readthedocs.org
Swagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.
Project documentation with Markdown.
🃏 A magical documentation site generator.
Quick Overview
DevDocs is a comprehensive, open-source documentation browser that combines multiple API documentations in a fast, organized, and searchable interface. It offers offline support and integrates various developer resources into a single, user-friendly platform.
Pros
- Aggregates documentation from numerous programming languages, frameworks, and libraries in one place
- Provides a fast, responsive interface with instant search capabilities
- Supports offline access to documentation, making it useful for developers without constant internet access
- Customizable interface allowing users to choose which documentations to enable or disable
Cons
- May not always have the most up-to-date documentation for rapidly evolving technologies
- Requires regular updates to maintain accuracy and relevance of the documentation
- Limited to pre-selected documentation sources, may not cover all niche or specialized technologies
- Initial download and setup can be time-consuming due to the large amount of documentation data
Getting Started
To use DevDocs, follow these steps:
- Visit the DevDocs website at https://devdocs.io/
- Select the documentations you want to enable by clicking on the menu icon in the top-left corner
- Use the search bar to find specific topics or browse through the documentation
- To enable offline mode, click on the menu icon and select "Offline" under "Settings"
- For a local installation, you can clone the GitHub repository and follow the setup instructions in the README file
Note: DevDocs is primarily a documentation browser and not a code library, so there are no code examples to provide.
Competitor Comparisons
Beautiful static documentation for your API
Pros of Slate
- Focused on API documentation, providing a clean and professional look
- Easier to customize and brand to match company style
- Supports multiple languages for code examples
Cons of Slate
- Limited to static documentation, lacking real-time updates
- Requires more setup and configuration compared to DevDocs
- Less comprehensive in terms of supported technologies and languages
Code Comparison
Slate (Ruby):
require 'middleman'
require 'middleman-syntax'
require 'middleman-autoprefixer'
require 'middleman-sprockets'
require 'rouge'
DevDocs (JavaScript):
import app from './app'
import db from './db'
import docs from './docs'
import models from './models'
import settings from './settings'
Key Differences
- DevDocs is a comprehensive documentation browser for multiple technologies, while Slate focuses on creating beautiful API documentation
- Slate uses Ruby and Middleman for static site generation, whereas DevDocs is built with JavaScript and uses a more dynamic approach
- DevDocs offers offline functionality and a wider range of documentation sources, while Slate provides a more customizable and branded experience for API documentation
Use Cases
- Choose Slate for creating polished, customized API documentation for a specific product or service
- Opt for DevDocs when needing a comprehensive, searchable documentation browser for multiple technologies and languages
The source code that powers readthedocs.org
Pros of Read the Docs
- Supports multiple programming languages and frameworks
- Offers both hosted and self-hosted options
- Integrates well with version control systems like GitHub
Cons of Read the Docs
- Requires more setup and configuration
- Documentation is tied to specific projects, less centralized
- May have a steeper learning curve for beginners
Code Comparison
Read the Docs (Python):
from recommonmark.parser import CommonMarkParser
source_parsers = {
'.md': CommonMarkParser,
}
source_suffix = ['.rst', '.md']
DevDocs (Ruby):
module Docs
class Processor < UrlScraper
self.type = 'processor'
self.base_url = 'https://example.com/docs'
self.links = {
home: 'https://example.com/'
}
end
end
Read the Docs focuses on project-specific documentation with Python-based configuration, while DevDocs centralizes documentation from various sources using Ruby scraping techniques. Read the Docs offers more flexibility in terms of hosting and integration, but DevDocs provides a more streamlined, centralized approach to accessing documentation across multiple technologies.
Swagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.
Pros of Swagger UI
- Interactive API documentation with built-in request/response testing
- Widely adopted standard for API documentation in the industry
- Supports OpenAPI (formerly Swagger) specification out of the box
Cons of Swagger UI
- Limited to API documentation, while DevDocs covers a broader range of technologies
- Less customizable in terms of appearance and layout
- Requires more setup and configuration for complex API structures
Code Comparison
Swagger UI (React component):
import SwaggerUI from "swagger-ui-react"
import "swagger-ui-react/swagger-ui.css"
<SwaggerUI url="https://petstore.swagger.io/v2/swagger.json" />
DevDocs (Ruby on Rails initializer):
DevDocs.configure do |config|
config.root_path = '/docs'
config.index_path = 'public/docs'
config.app_host = 'http://localhost:3000'
end
Summary
Swagger UI is specifically designed for API documentation and testing, following the OpenAPI specification. It offers interactive features and is widely adopted in the industry. DevDocs, on the other hand, provides a broader range of documentation for various technologies and programming languages. While Swagger UI excels in API-specific documentation, DevDocs offers a more comprehensive solution for general developer documentation needs.
Project documentation with Markdown.
Pros of MkDocs
- Simpler setup and configuration process
- Faster build times for smaller documentation projects
- Better support for custom themes and extensions
Cons of MkDocs
- Limited built-in search functionality compared to DevDocs
- Less comprehensive language and framework coverage out-of-the-box
- Requires more manual setup for multi-language documentation
Code Comparison
MkDocs configuration (mkdocs.yml):
site_name: My Docs
theme: material
nav:
- Home: index.md
- About: about.md
DevDocs configuration (assets/javascripts/views/pages/other.js):
app.views.OtherPage = class OtherPage extends app.views.StaticPage {
static className = '_static';
static routes = { 'other': 'other' };
}
While both projects aim to provide documentation solutions, MkDocs focuses on simplicity and customization for smaller projects, whereas DevDocs offers a more comprehensive, pre-configured documentation aggregator for multiple languages and frameworks. MkDocs requires more manual setup but provides greater flexibility, while DevDocs offers a more extensive out-of-the-box experience with advanced search capabilities.
🃏 A magical documentation site generator.
Pros of docsify
- Lightweight and easy to set up with no build process required
- Supports plugins and themes for customization
- Generates documentation on-the-fly from Markdown files
Cons of docsify
- Limited built-in search functionality compared to DevDocs
- Lacks offline support without additional configuration
- May require more manual organization of documentation structure
Code Comparison
DevDocs (Ruby):
def fetch_docs(names)
names.map do |name|
yield name if block_given?
[name, Docs.find(name)]
end.compact.to_h
end
docsify (JavaScript):
window.$docsify = {
name: 'docsify',
repo: 'docsifyjs/docsify',
loadSidebar: true,
subMaxLevel: 2
};
Summary
DevDocs is a comprehensive documentation browser with offline support and powerful search capabilities. It's ideal for developers who need quick access to multiple API references.
docsify is a lightweight documentation site generator that creates dynamic websites from Markdown files. It's best suited for projects that need simple, customizable documentation with minimal setup.
Both tools serve different purposes and cater to different documentation needs, making the choice dependent on the specific requirements of the project or user.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
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:
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.
Using Docker (Recommended)
The easiest way to run DevDocs locally is using Docker:
docker run --name devdocs -d -p 9292:9292 ghcr.io/freecodcamp/devdocs:latest
This will start DevDocs at localhost:9292. We provide both regular and Alpine-based images:
ghcr.io/freecodcamp/devdocs:latest- Standard imageghcr.io/freecodcamp/devdocs:latest-alpine- Alpine-based (smaller size)
Images are automatically built and updated monthly with the latest documentation.
Alternatively, you can build the image yourself:
git clone https://github.com/freeCodeCamp/devdocs.git && cd devdocs
docker build -t devdocs .
docker run --name devdocs -d -p 9292:9292 devdocs
Manual Installation
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.
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, 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
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 |  |  |
| girishji/devdocs.vim | Vim plugin & TUI (browse inside Vim) |  |  |
| 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 |
| chrisgrieser/alfred-docs-searches | Alfred workflow |  |  |
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.
Top Related Projects
Beautiful static documentation for your API
The source code that powers readthedocs.org
Swagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.
Project documentation with Markdown.
🃏 A magical documentation site generator.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot