Overleaf, Online LaTeX-skriveprogram

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 parameter

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 &amp;= B + C - D \\ \\
%phantom
&amp;\phantom{= B + C \;}
%phantom
+ D - E \\ \\
&amp;= 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 id ol_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!
%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

Overleaf API

One-click to open in Overleaf…

Overview

Implementations

Post a Snippet by URI (URL)

Base64 Data URL

URL-encoded snippet

Raw snippet

Post from Formatted Code Box

Examples

Implementation

Features

Decoration

Encoding

TeX Engine

Main Document

Editing mode

Comment