Overleaf API

Do you have your own LaTeX site? Would you like to add "Open in Overleaf" functionality to help it stand out? If so, you're at the right place!

Looking to quickly add a link from your blog? Easy options on our partners page!

One-click to open in Overleaf...

We've developed the tools you need to load LaTeX code and files from your website or blog directly into Overleaf.

See it in action: we recently worked with LaTeX-Community.org to allow all of their 66k examples to be loaded into Overleaf with one click (read more).

To add similar functionality to your site, take a look at the sections below. If you have questions, please contact support, and we'll be happy to help.

Overview

Last Modified: 21st January 2013

You can load a code snippet into Overleaf by POSTing it (or its URI) to https://www.overleaf.com/docs using a form.

The most basic approach is to use a link:

https://www.overleaf.com/docs?snip_uri=http://pathtoyourfile.tex&splash=none

The &splash=none parameter is optional, it turns off our tutorial splash screen so that users go straight to the loaded example. This is a link in action.

Four other implementation options are given as examples (click the Implementations tab above to view), and there are a number of customizable features to help tailor the "Open in Overleaf" function to your site; these can be found in the Features tab.

Please contact support with any questions.

Implementations

Last Modified: 21st January 2013

Post a Snippet by URI (URL)

You can post the URI of a file, and Overleaf will download the file and import it as the main file of the project. Here we pass the full path to this file for the snip_uri parameter. The file must be accessible from our servers. The file will be fetched using either HTTP or HTTPS, depending on the URI that you give it; other protocols are not yet supported.

This is implemented with the following code:

<form action="https://www.overleaf.com/docs" method="post" target="_blank">
<input type="text" name="snip_uri" value="https://dl.dropbox.com/u/31383671/site/helloworld.tex" />
<input type="submit" class="wl-submit" value="Open in Overleaf" /> <br />
<input type="checkbox" name="splash" value="none" />For testing: Never show help splash.
</form>

Or alternatively you can just use a link as described on the Overview tab. We recommend that you use encodeURIComponent, or an equivalent method on the server side, to escape each parameter, but this is not absolutely necessary.

You can also upload multiple files using array parameters like this:
https://www.overleaf.com/docs?snip_uri[]=http://.../a.tex&snip_uri[]=http://.../b.tex
and there's a snip_name parameter that you can use to override the name of each uploaded file, like this:
https://www.overleaf.com/docs?snip_uri[]=http://.../a.php&
snip_uri[]=http://.../b.php&snip_name[]=a.tex&snip_name[]=b.tex

URL-encoded snippet

URL encoding is useful if you submit using a hidden input field, as in this example. This avoids problems with newlines in the TeX source. This example posts the result of (PHP5) urlencode("\\documentclass{article}\n\\begin{document}\nHello \$i\$ \& \$j\$.\n\\end{document}\n"); in the encoded_snip parameter. If using javascript, the encodeURIComponent function should be used (not the escape function, which has problems with internationalisation).

Raw snippet

If you submit from a server side or with AJAX, you can use the snip parameter, which assumes no encoding. Another use case is submission from a textarea (which could be hidden using CSS); in this case you must escape HTML entities in the HTML source.

This is implemented with the following code:

<form action="https://www.overleaf.com/docs" method="post" target="_blank">
<textarea name="snip" rows="10" cols="60">\documentclass[12pt,letterpaper]{article}
\usepackage[T1]{fontenc}
\usepackage{amsmath}

\begin{document}
\noindent
Bla bla bla bla :
\begin{align*}
A &= B + C - D \\ \\
%phantom
&\phantom{= B + C \;}
%phantom
+ D - E \\ \\
&= F + G - H.
\end{align*}
\end{document}</textarea>
<input type="checkbox" name="splash" value="none" />For testing: Never show help splash.
<input type="submit" class="wl-submit" value="Open in Overleaf" />
</form>

Post from Formatted Code Box

This example shows how to extract the unformatted code from a CSS-styled code box and submit it to Overleaf. The key components are:

  1. The Javascript that defines the openInOverleaf() function.
  2. The form with id wl_form, which is used to POST the source as a URL-encoded snippet. Note that in this case you only need one form on the page, even if you have multiple codeboxes.
  3. The link in the code box (where the 'Select All' link would be, but I've removed it in this example, for simplicity) that actually calls openInOverleaf().
For testing: Never show help splash.
Code: Open in Overleaf
\renewcommand{\arraystretch}{2}
\[
g :=\left(
\begin{array}{c|c}
\mathbf{2^D} & \textbf{1} \\ \hline
\textbf{1} & \begin{array}{cc}
\boldsymbol{1^\alpha} & \textbf{0} \\
\textbf{0} & \boldsymbol{1^\beta}
\end{array} \\
\end{array
}
\right)
\
]
Code: Open in Overleaf
\documentclass{article}
\usepackage{tikz}
\usetikzlibrary{arrows}
\begin{document}
\begin{tikzpicture}[->,>=stealth',shorten >=1pt,auto,node distance=3cm,
  thick,main node/.style={circle,fill=blue!20,draw,font=\sffamily\Large\bfseries}
]

  \node[main node] (1) {1};
  \node[main node] (2) [below left of=1] {2};
  \node[main node] (3) [below right of=2] {3};
  \node[main node] (4) [below right of=1] {4};

  \path[every node/.style={font=\sffamily\small}]
    (1) edge node [left] {0.6} (4)
        edge [bend right] node[left] {0.3} (2)
        edge [loop above] node {0.1} (1)
    (2) edge node [right] {0.4} (1)
        edge node {0.3} (4)
        edge [loop left] node {0.4} (2)
        edge [bend right] node[left] {0.1} (3)
    (3) edge node [right] {0.8} (2)
        edge [bend right] node[right] {0.2} (4)
    (4) edge node [left] {0.2} (3)
        edge [loop right] node {0.6} (4)
        edge [bend right] node[right] {0.2} (1);
\end{tikzpicture}
\end{document
}

Features

Last Modified: 29 July 2014

The features below are included to aid usability of the "Open in Overleaf" implementations, and may be customized to suit your preferences.

Decoration

The code must be wrapped with a valid document in order to compile. If the code snippet does not have a \documentclass tag, it is wrapped in a standard document when it is imported:

\documentclass[12pt]{article}
\usepackage[english]{babel}
\usepackage[utf8x]{inputenc}
\usepackage{amsmath}
\usepackage{tikz}
\begin{document}
SNIPPET GOES HERE
\end{document}

Encoding

The submitted snippet should be encoded using UTF-8; the server converts it to UTF-8, otherwise. Windows newlines are converted to unix newlines.

Help 'Splash' Screen

By default, the first time a user creates or loads a project on Overleaf, we show a tutorial help screen. A cookie ensures that the user only sees this message once on that computer. If the user is signed in to Overleaf, they will not see it a second time on any machine. (But it is always available in the help menu.)

If you do not wish for the user to ever see the help screen when they create a project from a snippet on your site, pass a splash parameter with value none. In the examples on this page, we use a checkbox for the splash parameter, but you would ordinarily use a hidden field, as in:

<input type="hidden" name="splash" value="none" />

TeX Engine

By default, Overleaf tries to detect which TeX engine to use, and it usually chooses pdflatex. If you would like to set the engine explicitly for your new project, you can pass an engine parameter with one of the following values: latex_dvipdf, pdflatex, xelatex or lualatex.

Protected Projects

You can require that the new project be a protected project by passing a protected parameter with value required. If the user is not signed in, or their account cannot create protected projects, then they will be prompted to sign in or upgrade as appropriate.

Rich Text

There are two editing modes in Overleaf: Source mode and Rich Text mode. By default, new project are displayed in Source mode.
You can mark a project to default to Rich Text mode by passing a rich_text parameter with value true.
Note that the user can always switch between editing modes with one click, and their preference for each project is stored with a cookie and has higher precedence over the default setting.

Comment

We add a short 'welcome' comment at the top of the snippet:

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%
% Welcome to Overleaf --- just edit your LaTeX on the left,
% and we'll compile it for you on the right. If you give
% someone the link to this page, they can edit at the same
% time. See the help menu above for more info. Enjoy!
%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%