openFrameworks web site
Python Mako JavaScript CSS GCC Machine Description Shell Other
Latest commit 6fe9b1d Aug 21, 2016 @icq4ever icq4ever fix md->markdown extension
Failed to load latest commit information.
_dbtools changed a ton of files to make docs/ into ducmentation/. changed the … Dec 22, 2011
content Merge pull request #554 from openFrameworksKorea/master Jul 12, 2016
documentation Merge pull request #543 from mruegenberg/patch-3 Jul 16, 2016
files of_inverted for threadedImageLoader example Mar 22, 2016
learning fix md->markdown extension Aug 21, 2016
messages tutorial korean page does not exist yet Jul 26, 2016
plugins tutorials plugin: dependency on contributing to docs snipet Mar 17, 2016
themes/openframeworks documentation class template: indentation fixes Mar 17, 2016
tutorials fix mistype May 8, 2016
utils stats: fix start and end dates Mar 8, 2016
.gitattributes trying to keep line endings as lf Sep 14, 2013
.gitignore gitignore Jan 21, 2016 scripts Jan 21, 2016
book_hook.php missing hooks Jan 21, 2016 fix build script for non bash Mar 17, 2016 port to nikola Jan 21, 2016 fix build server script Jan 23, 2016
commit_hook.php build scripts Jan 14, 2015 Changing forums to singular May 3, 2016 fix scripts Jan 21, 2016 add search form to documentation Jan 29, 2016 port to nikola Jan 21, 2016 add link Feb 24, 2016 오타 수정 (zhsrc -> .zshrc) Apr 15, 2016 Changed link to how to contribute to documentation Apr 27, 2016 fix korean link. Mar 2, 2016
release_hook.php fix scripts Jan 21, 2016 scripts Jan 21, 2016 add module docs intro template + clang scripts Nov 4, 2015

openFrameworks site

This repository stores the content and code that generates the openFrameworks website.

for other language, please read below.


To contribute fixes to the webpage or documentation you can usually just fork this repository and send contributions directly from github.

Most of the content is in the content folder in markdown folder.

The tutorials folder is structured with a first level of folders that represent the category and then a inside them markdown files with the extension .markdown and a folder for each of them with the same name as the text file that contains images or any other resource. The final html for each tutorial gets generated at the same level as it's resources so the links have to be relative and without any folder like:


The documentation folder contains the OF API reference and are also in markdown format. This docs are generated from the code but the description field in every class, function or var can be edited directly in the markdown files.

Setting up the site to build locally

This site is built using nikola. There's some scripts in the root folder to make it easier to install and use.

  1. First, if installing on Mac OS-X, make sure the Xcode command lines tools have been installed:

    xcode-select --install

    and then install the following packages (If you do not have brew installed you can grab it from

    brew install python3
    sudo easy_install pip
    brew linkapps python3
  2. From the ofSite source directory, run ./ which installs nikola and all the needed dependencies. (This has only been tested on linux and OS-X).

  3. Finally add the following to your .basrc, .bash_profile or .zshrc file: export XML_CATALOG_FILES="/usr/local/etc/xml/catalog"

There are two scripts included in the ofSite root to help work with the docs:

./ : Runs nikola and builds the site every time any file is modified.

If, on osx, you receive this error: FileNotFoundError: [Errno 2] No such file or directory: 'asciidoctor', you need to install asciidoctor as explained here, and then run the script again.

./ : Starts a local web server that serves the site and opens it in the browser.

If you plan to do a big modifications like contribute a translation the easiest is to leave the 2 last scripts running and just edit the content files and the site will automatically get refreshed.

Documentation-style markdown

The documentation portion of the site is written in Markdown, a wiki-style syntax. See details on Daringfireball.

The easiest way to check the syntax is having a look at the many pages already on the site, but here are some useful tips:

To insert code snippets use four tildes followed by curly braces with ".cpp" inside, and ending with four tildes:

for(int i = 0; i < 16; i++) {
    ofLog() << i;

Images are added using normal markdown format:

![Image Title](filename.png "alt text")

For a more complete description of how to contribute documentation, please see the Contributing to the Documentation tutorial.