<p>API may stand for Application <em>Programming</em> Interface, but humans have to be able to read the APIs, too; someone has to do the programming. Django REST Framework supports generating human-friendly HTML output for each resource when the <code>HTML</code> format is requested. These pages allow for easy browsing of resources, as well as forms for submitting data to the resources using <code>POST</code>, <code>PUT</code>, and <code>DELETE</code>.</p>
<p>If you include fully-qualified URLs in your resource output, they will be 'urlized' and made clickable for easy browsing by humans. The <code>rest_framework</code> package includes a <ahref="../api-guide/reverse"><code>reverse</code></a> helper for this purpose.</p>
<p>By default, the API will return the format specified by the headers, which in the case of the browser is HTML. The format can be specified using <code>?format=</code> in the request, so you can look at the raw JSON response in a browser by adding <code>?format=json</code> to the URL. There are helpful extensions for viewing JSON in <ahref="https://addons.mozilla.org/en-US/firefox/addon/jsonview/">Firefox</a> and <ahref="https://chrome.google.com/webstore/detail/chklaanhfefbnpoihckbnefhakgolnmc">Chrome</a>.</p>
<p>To customize the look-and-feel, create a template called <code>api.html</code> and add it to your project, eg: <code>templates/rest_framework/api.html</code>, that extends the <code>rest_framework/base.html</code> template.</p>
<p>The included browsable API template is built with <ahref="http://getbootstrap.com">Bootstrap (2.1.1)</a>, making it easy to customize the look-and-feel.</p>
<h3id="theme">Theme</h3>
<p>To replace the theme wholesale, add a <code>bootstrap_theme</code> block to your <code>api.html</code> and insert a <code>link</code> to the desired Bootstrap theme css file. This will completely replace the included theme.</p>
<p>A suitable replacement theme can be generated using Bootstrap's <ahref="http://twitter.github.com/bootstrap/customize.html#variables">Customize Tool</a>. Also, there are pre-made themes available at <ahref="http://bootswatch.com/">Bootswatch</a>. To use any of the Bootswatch themes, simply download the theme's <code>bootstrap.min.css</code> file, add it to your project, and replace the default one as described above.</p>
<p>You can also change the navbar variant, which by default is <code>navbar-inverse</code>, using the <code>bootstrap_navbar_variant</code> block. The empty <code>{% block bootstrap_navbar_variant %}{% endblock %}</code> will use the original Bootstrap navbar style.</p>
<p>For more specific CSS tweaks, use the <code>extra_style</code> block instead.</p>
<h3id="blocks">Blocks</h3>
<p>All of the blocks available in the browsable API base template that can be used in your <code>api.html</code>.</p>
<ul>
<li><code>blockbots</code> - <code><meta></code> tag that blocks crawlers</li>
<li><code>bodyclass</code> - (empty) class attribute for the <code><body></code></li>
<li><code>bootstrap_theme</code> - CSS for the Bootstrap theme</li>
<li><code>bootstrap_navbar_variant</code> - CSS class for the navbar</li>
<li><code>branding</code> - section of the navbar, see <ahref="http://twitter.github.com/bootstrap/components.html#navbar">Bootstrap components</a></li>
<li><code>breadcrumbs</code> - Links showing resource nesting, allowing the user to go back up the resources. It's recommended to preserve these, but they can be overridden using the breadcrumbs block.</li>
<li><code>extrastyle</code> - (empty) extra CSS for the page</li>
<li><code>extrahead</code> - (empty) extra markup for the page <code><head></code></li>
<li><code>footer</code> - Any copyright notices or similar footer materials can go here (by default right-aligned)</li>
<li><code>global_heading</code> - (empty) Use to insert content below the header but before the breadcrumbs.</li>
<li><code>title</code> - title of the page</li>
<li><code>userlinks</code> - This is a list of links on the right of the header, by default containing login/logout links. To add links instead of replace, use {{ block.super }} to preserve the authentication links.</li>
</ul>
<h4id="components">Components</h4>
<p>All of the <ahref="http://twitter.github.com/bootstrap/components.html">Bootstrap components</a> are available.</p>
<h5id="tooltips">Tooltips</h5>
<p>The browsable API makes use of the Bootstrap tooltips component. Any element with the <code>js-tooltip</code> class and a <code>title</code> attribute has that title content displayed in a tooltip on hover after a 1000ms delay.</p>
<p>The context that's available to the template:</p>
<ul>
<li><code>allowed_methods</code> : A list of methods allowed by the resource</li>
<li><code>api_settings</code> : The API settings</li>
<li><code>available_formats</code> : A list of formats allowed by the resource</li>
<li><code>breadcrumblist</code> : The list of links following the chain of nested resources</li>
<li><code>content</code> : The content of the API response</li>
<li><code>description</code> : The description of the resource, generated from its docstring</li>
<li><code>name</code> : The name of the resource</li>
<li><code>post_form</code> : A form instance for use by the POST form (if allowed)</li>
<li><code>put_form</code> : A form instance for use by the PUT form (if allowed)</li>
<li><code>request</code> : The request object</li>
<li><code>response</code> : The response object</li>
<li><code>version</code> : The version of Django REST Framework</li>
<li><code>view</code> : The view handling the request</li>
<li><code>FORMAT_PARAM</code> : The view can accept a format override</li>
<li><code>METHOD_PARAM</code> : The view can accept a method override</li>
</ul>
<h4id="not-using-basehtml">Not using base.html</h4>
<p>For more advanced customization, such as not having a Bootstrap basis or tighter integration with the rest of your site, you can simply choose not to have <code>api.html</code> extend <code>base.html</code>. Then the page content and capabilities are entirely up to you.</p>
