{"id":174587,"date":"2018-11-08T13:00:08","date_gmt":"2018-11-08T13:00:08","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=174587"},"modified":"2022-03-14T23:55:56","modified_gmt":"2022-03-14T23:55:56","slug":"how-to-stand-out-from-the-crowd-using-paper-js-with-wordpress","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/how-to-stand-out-from-the-crowd-using-paper-js-with-wordpress\/","title":{"rendered":"How To Stand Out From The Crowd Using Paper.js With WordPress"},"content":{"rendered":"<p>Do you want to draw, paint and animate your WordPress page to create something unique and legitimately cool? Haven\u2019t you always secretly wanted<a href=\"https:\/\/zgrossbart.github.io\/jelly\/\" rel=\"noopener\" target=\"_blank\"> jellyfish swimming on your site, for example<\/a>?<\/p>\n<p>Who hasn\u2019t!<\/p>\n<p>Well \u2013 today is your lucky day because we\u2019re going to be covering <a href=\"http:\/\/paperjs.org\/\" rel=\"noopener\" target=\"_blank\">Paper.js<\/a>, the brilliant javascript library which makes sites like <a href=\"https:\/\/patatap.com\/\" rel=\"noopener\" target=\"_blank\">patatap<\/a>\u00a0and <a href=\"http:\/\/hirmes.com\/paperoids\/\" rel=\"noopener\" target=\"_blank\">paperoids<\/a> possible.<\/p>\n<p>If you have used Paper.js before and only want to find out<strong> how to integrate Paper.js with WordPress<\/strong>, feel free to skip the intro!<\/p>\n<p><strong>Table of Contents:<\/strong><\/p>\n<ul>\n<li><a href=\"#whatis\"><strong>What is Paper.js?<\/strong><\/a><\/li>\n<li><a href=\"#whatcan\"><strong>What can I do with Paper.js and who is it for?<\/strong><\/a><\/li>\n<li><a href=\"#install\"><strong>How to install Paper.js on my website?<\/strong><\/a><\/li>\n<li><a href=\"#WPsetup\"><strong>How to set up Paper.js for WordPress?<\/strong><\/a><\/li>\n<\/ul>\n<h2>What is Paper.js?<\/h2>\n<p><span id=\"whatis\">Paper.js<\/span> is a javascript framework that lets you do prodigious things with graphics scripting. It is a self-proclaimed Swiss Army Knife of Vector Graphics Scripting, loved by both designers and developers alike.<\/p>\n<ul>\n<li>Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph \/ Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.<\/li>\n<li>Paper.js is based on and largely compatible with <a href=\"http:\/\/scriptographer.org\/\" rel=\"noopener\" target=\"_blank\">Scriptographer<\/a>, a scripting environment for Adobe Illustrator with an active community of scripters and more than 10 years of development.<\/li>\n<li>Paper.js is easy to learn for beginners and has lots to master for intermediate and advanced users.<\/li>\n<li>It\u2019s an easy way to make your website more fun and a fun way to make your website easier on the eyes.<\/li>\n<\/ul>\n<p>Let&#8217;s put it this way: if jQuery is javascript on steroids, Paper.js is javascript on mushrooms &#8211; that&#8217;s where all the creativity comes from.<\/p>\n<h3>Basic Concepts: Canvas and Paperscript<\/h3>\n<p>A <a href=\"https:\/\/www.w3schools.com\/graphics\/canvas_intro.asp\" rel=\"noopener\" target=\"_blank\">Canvas<\/a> is an HTML5 element that literally acts as a canvas. I know, right! It is a container for graphics. You must use the script to actually draw the graphics on it. By default, the &lt;canvas&gt; element has neither content nor borders.<\/p>\n<p>If you look closer at the Paper.js files or at the example below, you will see that instead of &#8220;text\/javascript&#8221; we have &#8220;text\/paperscript&#8221;.<\/p>\n<div class=\"gist\" data-gist=\"7c276b3e91db2b7bc6c4a911e7166e0d\" data-gist-file=\"paperscript.html\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/7c276b3e91db2b7bc6c4a911e7166e0d.js?file=paperscript.html\">Loading gist 7c276b3e91db2b7bc6c4a911e7166e0d<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Paperscript is a domain specific language made specifically for Paper.js, so it won&#8217;t work unless Paper.js is included.<\/p>\n<h2 id=\"whatcan\">What can I do with Paper.js and who is it for?<\/h2>\n<p>In Paper.js you can easily draw paths and shapes in any color and size. You can create items, objects, rasters, interactive tools, and layers. You can animate items, add mathematical operations and even create your own games. In short, what you can do in Paper.js is really only limited by your creativity and imagination.<\/p>\n<p>Basic features of Paper.js:<\/p>\n<ul>\n<li>Document Object Module<\/li>\n<li>Creating paths and segments<\/li>\n<li>Animation<\/li>\n<li>Mouse and keyboard interaction<\/li>\n<li>SVG import and export<\/li>\n<li>Raster images and color averaging<\/li>\n<li>Vector geometry<\/li>\n<li>Mathematical operations<\/li>\n<li>Object conversion<\/li>\n<\/ul>\n<p>Note that in this tutorial I <strong>do no<\/strong>t aim to explain every property and feature of Paper.js. I will focus on setting up Paper.js in WordPress. If you want to learn more about the functionality and the specific features of Paper.js, you can find\u00a0<a href=\"http:\/\/paperjs.org\/tutorials\/\" target=\"_blank\">great tutorials<\/a>\u00a0on their official site.<\/p>\n<p>Also, have in mind that Paper.js is a javascript framework. You could technically do all the same things in vanilla javascript, but it would take you lines and lines of code.<\/p>\n<p>Those familiar with both javascript and vector drawing apps like Adobe Illustrator will find Paper.js very intuitive and are most likely to profit from it the most. You can create paths in Paper.js similarily to how you would draw them in Illustrator. Of course, basic javascript knowledge is required.<\/p>\n<h2 id=\"install\">How to install Paper.js on my website?<\/h2>\n<p>If you have Node or Bower, you can use <em>npm install paper<\/em> or <em>bower install paper<\/em> commands. Otherwise, to include Paper.js on your website you first have to download it from their official site at <a href=\"http:\/\/paperjs.org\/download\/\" rel=\"noopener\" target=\"_blank\">http:\/\/paperjs.org\/download\/<\/a>.<\/p>\n<p>Unzip the downloaded file inside your project&#8217;s folder (ie. in assets).<\/p>\n<p>Add the following scripts inside the head of your HTML\u00a0file:<\/p>\n<div class=\"gist\" data-gist=\"58c34dbb899f664696f435bcee9c5606\" data-gist-file=\"connecting-paper.html\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/58c34dbb899f664696f435bcee9c5606.js?file=connecting-paper.html\">Loading gist 58c34dbb899f664696f435bcee9c5606<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Don&#8217;t forget to add the canvas element in your body &#8211; everything you have done in paperscript will only be visible on a canvas.<\/p>\n<p>You don&#8217;t have to write your script in the head of your HTML &#8211; you can also create a separate paperscript file and add it to your HTML like this:<\/p>\n<div class=\"gist\" data-gist=\"dfe3347f7ef6839f0c30df56e5dc18e6\" data-gist-file=\"connecting-paperscript.html\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/dfe3347f7ef6839f0c30df56e5dc18e6.js?file=connecting-paperscript.html\">Loading gist dfe3347f7ef6839f0c30df56e5dc18e6<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<h2 id=\"WPsetup\">How to add Paper.js to WordPress?<\/h2>\n<p>In order to complete this tutorial and add the awesome functionality of Paper.js\u00a0to your WordPress site, you must have access to your cpanel and file manager. OK? Cool, let&#8217;s go!<\/p>\n<h3>STEP 1: Create a child theme<\/h3>\n<p>You can create your <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/\" rel=\"noopener\" target=\"_blank\">child theme<\/a> manually. I am lazy so I\u2019m using a <a href=\"https:\/\/wordpress.org\/plugins\/child-theme-configurator\/\" rel=\"noopener\" target=\"_blank\">Child theme generator plugin<\/a>\u00a0(you can delete the plugin right after you create your child theme). In this tutorial, I\u2019ll be using Astra theme as a parent for my child theme.<\/p>\n<h3>STEP 2: Download the latest version of Paper.js<\/h3>\n<p>Download the latest version here <a href=\"http:\/\/paperjs.org\/download\/\" rel=\"noopener\" target=\"_blank\">http:\/\/paperjs.org\/download\/<\/a><br \/>\nUnzip the downloaded file and open &#8220;dist&#8221; folder. There you will find paper-core and paper-full javascript files. I will be using <em>paper-full-min.js<\/em>\u00a0because it\u2019s a bit lighter than <em>paper-full.js<\/em>.<\/p>\n<h3>STEP 3: Upload the paper-full.min.js file into your Child Theme folder via File Manager<\/h3>\n<p>This is pretty straightforward, I hope. The location of my child theme is \/wp-content\/themes\/astra-child\/<\/p>\n<h3>STEP 4: Enqueue the paper-full.min.js script to your page<\/h3>\n<p>Let&#8217;s\u00a0<a href=\"https:\/\/wpmudev.com\/blog\/adding-scripts-and-styles-wordpress-enqueueing\/\" target=\"_blank\" rel=\"noopener\">add javascript to our WordPress site the right way<\/a>, with enqueueing.<\/p>\n<p>We\u2019re still in the File Manager. Go to your child theme and open a <em>functions.php<\/em> file. You&#8217;re encouraged to backup your <em>functions.php<\/em> before altering it. Copy the following code into the functions.php.file.<\/p>\n<div class=\"gist\" data-gist=\"d9bdd4f28d899dd898b2ca46ffa10650\" data-gist-file=\"enqueuing-fuctions.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/d9bdd4f28d899dd898b2ca46ffa10650.js?file=enqueuing-fuctions.php\">Loading gist d9bdd4f28d899dd898b2ca46ffa10650<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>This script enqueues a paper.js library. &#8220;enqueue_paper&#8221; is just a name that I gave to this function. It can be anything, but you have to call for it later by the same exact name (handle).<\/p>\n<p>Note that this code will enqueue the <em>paper-full.min.js<\/em> script to your whole WordPress site. Check the console &#8211; if it doesn\u2019t show an error, it is enqueued properly. You can even add a console.log(\u201cconnected\u201d) or alert(\u201cconnected\u201d) in the <em>paper-full.min.js<\/em> file to make sure everything runs smoothly.<\/p>\n<p>I wanted to add Paper.js script to a specific page so I had to add the <a href=\"https:\/\/codex.wordpress.org\/Conditional_Tags\" target=\"_blank\">conditional tags<\/a>\u00a0to my function.<\/p>\n<p>Like this:<\/p>\n<div class=\"gist\" data-gist=\"fd94036fc2d88da59a47af3b354110a7\" data-gist-file=\"almost-functions.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/fd94036fc2d88da59a47af3b354110a7.js?file=almost-functions.php\">Loading gist fd94036fc2d88da59a47af3b354110a7<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>In this case, <strong>148<\/strong> is the ID of my page. Yours will probably be different. The quickest way to see your post&#8217;s or page&#8217;s ID is to check its URL while you\u2019re editing it in the backend. For example, my page had this URL:<\/p>\n<p>mydomain.com\/wp-admin\/post.php?post=<strong>148<\/strong>&amp;action=edit<\/p>\n<p>The numbers after post= are the ID of your page.<\/p>\n<h3>The Theory Behind Enqueuing<\/h3>\n<p>In case you didn&#8217;t check out <a href=\"https:\/\/wpmudev.com\/blog\/adding-scripts-and-styles-wordpress-enqueueing\/\" target=\"_blank\">this post<\/a>, here\u2019s how enqueuing works. Instead of adding your script in the header or footer of your HTML file, in WordPress, you have to use <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/\" target=\"_blank\">wp_enqueue_script<\/a>. This is to ensure that various scripts don&#8217;t mix up and break the site.<\/p>\n<p>So, the wp_enqueue_script function registers and enqueues scripts. Let&#8217;s dissect it:<\/p>\n<p><code>wp_enqueue_script( $handle, $source, $dependencies, $version, $in_footer );<\/code><\/p>\n<ul>\n<li>$handle is just a name &#8211; a unique identifier with which you can call the function again.<\/li>\n<li>$source &#8211; insert the URL source of the file or path to the script relative to your WordPress root directory. Src needs to be inside single quotes, like in the examples above. ($src=&#8217; &#8216;)<\/li>\n<li>$dependencies &#8211; insert the handle of a previously registered script on which the running of your new script depends. This is usually a library.<\/li>\n<li>$version &#8211; pretty self-explanatory, right? The default value is false.<\/li>\n<li>$in_footer &#8211; default value is false &#8211; which means you&#8217;re putting the script in the head of your HTML. True would put it before the &lt;\/body&gt;.<\/li>\n<\/ul>\n<p>We won&#8217;t be adding $version and $in_footer as their default setting,\u00a0<em>false,\u00a0<\/em>suits our needs. In our case, we will create a <em>paper-example.js<\/em> file that depends on the Paper.js library.<\/p>\n<p>Remember, there are many popular libraries, like jQuery, that are already <a href=\"https:\/\/codex.wordpress.org\/Javascript_Reference\" rel=\"noopener\" target=\"_blank\">included with WordPress<\/a>. You don&#8217;t have to enqueue them, only add them as dependencies.<\/p>\n<h3>STEP 5: Enqueue your paper-example.js script and add paper-full.min.js as a dependency<\/h3>\n<p>First, let&#8217;s create a new file in your File Manager. Call it <em>paper-example.js<\/em> and save it in the same place you saved paper-full.min.js. Add console.log(&#8220;connected&#8221;) if you want to make sure that the file is enqueued properly.<\/p>\n<p>To add a dependency to your enqueued script, we will simply add the handle &#8216;paperlibrary&#8217; to the array. If we had more scripts to add as dependencies, we could do it in a single line, just by adding them to the array.<\/p>\n<div class=\"gist\" data-gist=\"d40f881854e819cdfb1f80c225ca6692\" data-gist-file=\"functions.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/d40f881854e819cdfb1f80c225ca6692.js?file=functions.php\">Loading gist d40f881854e819cdfb1f80c225ca6692<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>This should now be all connected properly, but we still have two major things to do.<\/p>\n<h3>STEP 6: Create a Canvas<\/h3>\n<p>We need to create a canvas on which the paper.js scripts will be displayed. This is how it should look by default:<\/p>\n<div class=\"gist\" data-gist=\"1373f29bed92dc66c3fd3e2885cd783f\" data-gist-file=\"canvas.html\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/1373f29bed92dc66c3fd3e2885cd783f.js?file=canvas.html\">Loading gist 1373f29bed92dc66c3fd3e2885cd783f<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Canvas is a HTML5 element and it can&#8217;t be added with WP text editor. The easiest way to do it is if you&#8217;re using a page builder or a plugin that supports writing custom code. You will be able to place the canvas element on your page, inside a row or a div (I tested it with Divi and SiteOrigin page builders).<\/p>\n<p>You can style the canvas in CSS like you would style any other HTML element. I added the following code to my child theme&#8217;s style.css file to make it stand out a bit:<\/p>\n<div class=\"gist\" data-gist=\"6281053ba32d347def88eb94c9c84d4c\" data-gist-file=\"canvas-style.css\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/6281053ba32d347def88eb94c9c84d4c.js?file=canvas-style.css\">Loading gist 6281053ba32d347def88eb94c9c84d4c<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Note: You can have more than one canvas on your page. Just don&#8217;t forget to give them different IDs.<\/p>\n<h3>STEP 7: Using Paper.js Directly With Javascript<\/h3>\n<p>If you copy any paperscript\u00a0demo code into the paper-example.js you will probably get frustrated by the &#8220;undefined&#8221; errors. I&#8217;m here to tell you, they are, unfortunately, expected.<\/p>\n<p>The problem is WordPress doesn\u2019t support paperscript, which means we will have to work around that. We need to use paper.js directly with javascript, as shown in the Paper.js documentation:\u00a0<a href=\"http:\/\/paperjs.org\/tutorials\/getting-started\/using-javascript-directly\/\" target=\"_blank\">http:\/\/paperjs.org\/tutorials\/getting-started\/using-javascript-directly\/<\/a>.<\/p>\n<p>To do so you need to create a global scope and define your variables in it.<\/p>\n<h3>Creating a Global Scope<\/h3>\n<p>We can make paper scope global by injecting it into window like shown in the code below. This accesses all Paper.js classes and objects through the paper object. We also have to define a paper scope using the <em>paper.setup(canvas)<\/em> function which will automatically create classes for us.<\/p>\n<div class=\"gist\" data-gist=\"dca4dca359e76a62dfbe3751f5204c8e\" data-gist-file=\"setting-scope-example.js\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/dca4dca359e76a62dfbe3751f5204c8e.js?file=setting-scope-example.js\">Loading gist dca4dca359e76a62dfbe3751f5204c8e<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Note that handlers such as <em>onFrame<\/em> and <em>onResize<\/em> need to be manually installed on the appropriate object while working in JavaScript. With a properly set up paper scope, all we have to do is install these handlers on the existing view object (example = <em>view.onFrame<\/em>).<\/p>\n<p>For the sake of this tutorial, I&#8217;ve created a simple script with 2 paths and one tool, so that you guys can see how to put a global paper scope and define variables inside it. A yellow rectangle that is spinning its head right-round all day is my path1 variable and an orange line drawing tool draws the second path.\u00a0You can copy my code into your <em>paper-example.js<\/em> file (or whatever you called your file) and start working from there.<\/p>\n<p><a rel=\"lightbox[174587]\" class=\"blog-thumbnail\" href=\"https:\/\/gyazo.com\/e805eeac0013ca412a329e9598714751\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2026\/02\/papertree.gif\" alt=\"Image from Gyazo\" width=\"800\" \/><\/a><\/p>\n<div class=\"gist\" data-gist=\"05cef69f2a5bf8a92630a78ebb338501\" data-gist-file=\"paper-example.js\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/05cef69f2a5bf8a92630a78ebb338501.js?file=paper-example.js\">Loading gist 05cef69f2a5bf8a92630a78ebb338501<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Make sure you\u2019re defining your Paths, Tools, Projects, and Views separately inside your paper scope. When working in paperscript you don&#8217;t have to do this, but it is required when working directly in javascript.<\/p>\n<p>Have fun with Paper.js!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you want to draw, paint and animate your WordPress page to create something unique and legitimately cool? Haven\u2019t you always secretly wanted jellyfish swimming on your site, for example? Who hasn\u2019t! Well \u2013 today is your lucky day because we\u2019re going to be covering Paper.js, the brilliant javascript library which makes sites like patatap\u00a0and [&hellip;]<\/p>\n","protected":false},"author":491575,"featured_media":174826,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[10519,505,10966],"tutorials_categories":[],"class_list":["post-174587","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-enqueue-scripts","tag-javascript","tag-paper-js"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/174587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/491575"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=174587"}],"version-history":[{"count":35,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/174587\/revisions"}],"predecessor-version":[{"id":224444,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/174587\/revisions\/224444"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/174826"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=174587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=174587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=174587"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=174587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}