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: you can explore this feature on LearnLaTeX.org and throughout the examples available in our documentation.
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
You can load a code snippet into Overleaf by passing it (or its URI) to https://www.overleaf.com/docs using a form or a link.
The most basic approach is to use a link:
https://www.overleaf.com/docs?snip_uri=http://pathtoyourfile.tex
You may also link to a project instead of a single LaTeX snippet by passing the location of a zip file for the
Here are some links in action:
A LaTeX code snippet -
A zipped project
Some more advanced methods of embedding and opening LaTeX content are listed below in the implementations section below. There are also a number of customisable features that can tailor the "Open in Overleaf" functionality to your needs. These can be found in the features section below.
Please contact support with any questions.
Implementations
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.
Files should be LaTeX files or zip format.
Here we pass the full path to this file
for the snip_uri
parameter:
This form can be implemented with the following code:
<form action="https://www.overleaf.com/docs" method="post" target="_blank">
<input type="text" name="snip_uri"
value="https://production-overleaf-static.s3.amazonaws.com/examples/helloworld.tex"><br>
<input type="submit" value="Open in Overleaf">
</form>
Alternatively you can just use a link
as described in the Overview section above. 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 snip_uri[]
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.tex&
snip_uri[]=http://.../b.tex&
snip_name[]=file1.tex&
snip_name[]=file2.tex
Base64 Data URL
It is possible to use data URL with base64 string as the snip_uri
value:
data:[mime_type];base64,[your_base64_encoded_file]
For example, this is the same helloworld.tex file but encoded as base64:
This form can be implemented with the following code:
<form action="https://www.overleaf.com/docs" method="post" target="_blank">
<input type="text" name="snip_uri"
value="data:application/x-tex;base64,XGRvY3VtZW50Y2xhc3NbMTJwdF17YXJ0aWNsZX0KXHVzZXBhY2thZ2V7YW1zbWF0aH0KXHVzZXBhY2thZ2V7YW1zZm9udHN9ClxiZWdpbntkb2N1bWVudH0KCiRcbWF0aGZyYWt7SH0kZWxsbyB3b3JsZCEKXGVuZHtkb2N1bWVudH0KCg=="><br>
<input type="submit" value="Open in Overleaf">
</form>
Base64 strings can also represent compressed zip files containing multiple files. For instance, here's a simple case with two .tex files and a single .bib file:
This form can be implemented with the following code:
<form action="https://www.overleaf.com/docs" method="post" target="_blank">
<input type="text" name="snip_uri"
value="data:application/zip;base64,UEsDBBQACAAIAJu0zVYAAAAAAAAAAAAAAAAIAAAAbWFpbi50ZXhNT7tOxDAQ7P0V+wkoVNDScAgJiRK52diT3OocO7LXHCfL/44SiKAczdv65OqCqC5wKY2zigvoxtaCld2FZ7RSx0kCSjdWRQPaiXghpg9ZaSO6sVz1nHJ7+0QO4Kkb61nRXmoEDXfDfTd2xCyxHXXd2IUv2POMLXAqKbZT1Jx83UE39re4LSxx+MGH8jldSROx9/Qkypu7EEdPTO+YkBEdCr1K0W4OAeGLlzXgkawTRZszEK/s8bDvkzFImjOv51vRW0DjsJ55W/6PaWWP6MYi+r8331BLBwiPB1pP1AAAAEcBAABQSwMEFAAIAAgAm7TNVgAAAAAAAAAAAAAAAAoAAABzYW1wbGUuYmliNY67DoJAEEV7vmJCpYmYIFhQmIiY0FHhB6x4AyiwZFhAs9l/N7zKOXPmzr0KVmVWQecMNKN4IfAOFhGR6FUhmehCdgzJOeh+pHiz7EVSpapAs5QWIB0ZWbeMAk1XDiCdGnxJh4azYp4TAzVK/tBOR2mYmP2a84Pg6emFbDcIvJW+Zc+NqCaaPuKbFGpdDLLqayy6v7Kmr59Y+m73rcjRLamef3Ic7+zalrH+UEsHCET/LfKrAAAA9AAAAFBLAwQUAAgACACbtM1WAAAAAAAAAAAAAAAACQAAAG1haW4yLnRleEXLQQqAIBAAwLuvsA/YN/pDdlBbS9BdcFcQxL9Hh+g+Y08KrQBKyI55N2txCY1APwY3H1MGnsp6uBKOj05lBbr4ODbImXSsVLRDkhuqfssylQU8//AAUEsHCKxO93RWAAAAZgAAAFBLAQItAxQACAAIAJu0zVaPB1pP1AAAAEcBAAAIAAAAAAAAAAAAIACkgQAAAABtYWluLnRleFBLAQItAxQACAAIAJu0zVZE/y3yqwAAAPQAAAAKAAAAAAAAAAAAIACkgQoBAABzYW1wbGUuYmliUEsBAi0DFAAIAAgAm7TNVqxO93RWAAAAZgAAAAkAAAAAAAAAAAAgAKSB7QEAAG1haW4yLnRleFBLBQYAAAAAAwADAKUAAAB6AgAAAAA="><br>
<input type="submit" value="Open in Overleaf">
</form>
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 the PHP5 code:
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 the 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 form can be implemented with the following code:
<form action="https://www.overleaf.com/docs" method="post" target="_blank">
<textarea rows="8" cols="60" name="snip">
\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="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:
- The Javascript that defines the
openInOverleaf()
function. - The
form
with idol_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. - The link in the code box that actually calls
openInOverleaf()
.
Examples
- 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}
Implementation
The HTML required to add the examples above is:
<form id="ol_form" action="https://www.overleaf.com/docs" method="post" target="_blank">
<input id="ol_encoded_snip" type="hidden" name="encoded_snip">
</form>
<dl class="codebox">
<dt>Code: <a href="#" onclick="openInOverleaf(this); return false;">Open in Overleaf</a></dt>
<dd>
<pre>
<code class="tex">
\documentclass{article}
...
</code>
</pre>
</dd>
</dl>
The JavaScript code for the openInOverleaf method, which should be included in a script
tag is:
function openInOverleaf(a) {
/*
* Get the unformatted code from the formatted code box.
*
* Using the browser's selection isn't ideal, because it clobbers whatever
* the user may have had in their clipboard.
* It's almost possible to use innerText, but that does not work on FF.
* FF supports textContent, but that discards the newlines, which are
* represented by BR tags in the formatted code. So, we have to walk the DOM.
*/
function unformat(e) {
var ret = "";
if (e.nodeType === 1) { // element node
if (e.tagName === "BR") {
return "\n";
} else {
for (e = e.firstChild; e; e = e.nextSibling) {
ret += unformat(e);
}
return ret;
}
} else if (e.nodeType === 3 || e.nodeType === 4) { // text node
return e.nodeValue;
}
}
var code = a.parentNode.parentNode.getElementsByTagName('CODE')[0];
document.getElementById('ol_encoded_snip').value =
encodeURIComponent(unformat(code));
document.getElementById('ol_form').submit();
}
The syntax highlighting in the code boxes is generated by highlight.js,
but you can add your own manually with span
elements if you prefer.
Features
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{amsmath}
\usepackage{tikz}
\begin{document}
SNIPPET GOES HERE
\end{document}
Encoding
The submitted snippet should be encoded using UTF-8. Windows newlines are converted to unix newlines.
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
.
Main Document
By default, Overleaf tries to detect which document to use as the main .tex file, based on whether it contains
a \documentclass
.
If you would like to override this behaviour, you can pass a main_document
parameter with the
name of the file. When supplying an array of snippets, you must also pass an array of filenames for this
to work reliably.
Editing mode
There are two editing modes in Overleaf: Code Editor and Visual Editor. By default, new projects are displayed in Code Editor.
You can mark a project to default to Visual Editor by passing a visual_editor
parameter with value true
.
Visual Editor was previously known as Rich Text and therefore you may also see rich_text=true
in existing code, which is still supported.
Note that the user can always switch between editing modes with one click, and their preference will then be stored and has higher precedence than 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 open the
% 'Share' menu, you can invite other users to edit at the same
% time. See www.overleaf.com/learn for more info. Enjoy!
%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%