sarahs / graphql-docs

Easily generate beautiful documentation from your GraphQL schema.

Home Page:

Github PK Tool:Github PK Tool

Repository from Github from Github

graphql-docs's ContributorsNovDecJanFebMarAprMayJunJulAugSepOctNovSunMonTueWedThuFriSat


Easily generate beautiful documentation from your GraphQL schema.



Add this line to your application's Gemfile:

gem 'graphql-docs'

And then execute:

$ bundle

Or install it yourself as:

$ gem install graphql-docs


# pass in a filename filename)

# or pass in a string contents)


There are several phases going on the single call:

  • The GraphQL IDL file is read (if you passed filename) through GraphQL::Client (or simply read if you passed a string through schema).
  • GraphQL::Parser manipulates the IDL into a slightly saner format.
  • GraphQL::Generator takes that saner format and begins the process of applying items to the HTML templates.
  • GraphQL::Renderer technically runs as part of the generation phase. It passes the contents of each page and converts it into HTML.

If you wanted to, you could break these calls up individually. For example:

options = {}
options[:filename] = "#{File.dirname(__FILE__)}/../data/graphql/schema.idl"
options[:renderer] = MySuperCoolRenderer

options = GraphQLDocs::Configuration::GRAPHQLDOCS_DEFAULTS.merge(options)

response =[:filename])

parser =, options)
parsed_schema = parser.parse

generator =, options)


Generating output

By default, the HTML generation process uses ERB to layout the content. There are a bunch of default options provided for you, but feel free to override any of these. The Configuration section below has more information on what you can change.

It also uses html-pipeline to perform the rendering by default. You can override this by providing a custom rendering class.You must implement two methods:

  • initialize - Takes two arguments, the parsed schema and the configuration options.
  • render Takes the contents of a template page. It also takes two optional kwargs, the GraphQL type and its name. For example:
class CustomRenderer
  def initialize(schema, options)
    @parsed_schema = parsed_schema
    @options = options

  def render(contents, type: nil, name: nil)
    contents.sub(/Repository/i, '<strong>Meow Woof!</strong>')

    opts[:content] = contents
    @graphql_default_layout.result( { binding })

options[:filename] = 'location/to/sw-api.graphql'
options[:renderer] = CustomRenderer

If your render method returns nil, the Generator will not attempt to write any HTML file.

Helper methods

In your ERB layouts, there are several helper methods you can use. The helper methods are:

  • slugify(str) - This slugifies the given string.
  • include(filename, opts) - This embeds a template from your includes folder, passing along the local options provided.
  • markdownify(string) - This converts a string into HTML via CommonMarker.
  • graphql_operation_types, graphql_mutation_types, graphql_object_types, graphql_interface_types, graphql_enum_types, graphql_union_types, graphql_input_object_types, graphql_scalar_types - Collections of the various GraphQL types.

To call these methods within templates, you must use the dot notation, such as <%= slugify.(text) %>.

For markdownify, CommonMarker is not enabled by default (because it relies on native code). You will need to add require 'commonmarker' if you wish to use it.


The following options are available:

Option Description Default
filename The location of your schema's IDL file. nil
schema A string representing a schema IDL file. nil
output_dir The location of the output HTML. ./output/
use_default_styles Indicates if you want to use the default styles. true
base_url Indicates the base URL to prepend for assets and links. ""
delete_output Deletes output_dir before generating content. false
pipeline_config Defines two sub-keys, pipeline and context, which are used by html-pipeline when rendering your output. pipeline has ExtendedMarkdownFilter, EmojiFilter, and TableOfContentsFilter. context has gfm: false and asset_root set to GitHub's CDN.
renderer The rendering class to use. GraphQLDocs::Renderer
templates The templates to use when generating HTML. You may override any of the following keys: default, includes, operations, objects, mutations, interfaces, enums, unions, input_objects, scalars. The defaults are found in lib/graphql-docs/layouts/.
landing_pages The landing page to use when generating HTML for each type. You may override any of the following keys: index, query, object, mutation, interface, enum, union, input_object, scalar. The defaults are found in lib/graphql-docs/layouts/.
classes Additional class names you can provide to certain elements. The full list is available in lib/graphql-docs/configuration.rb/.


After checking out the repo, run script/bootstrap to install dependencies. Then, run rake test to run the tests. You can also run bundle exec rake console for an interactive prompt that will allow you to experiment.

Sample site

Clone this repository and run:

bundle exec rake sample

to see some sample output.


Easily generate beautiful documentation from your GraphQL schema.

License:MIT License


Language:Ruby 48.8%Language:CSS 36.2%Language:HTML 14.7%Language:Shell 0.3%