DEV Community

loading...
Cover image for Prefill LocalPen with Code

Prefill LocalPen with Code

Hatem Hosny
・4 min read

This is a part of the series: LocalPen - code pens that run locally!

LocalPen is a powerful frontend coding playground that runs totally on the client and can be hosted on any static file server. Try it now on localpen.io

In this post we describe the different methods to prefill LocalPen with code (import code to the editors). This can be great for documentation and sharing links with code.

Importing from URL

Most commonly, code is imported from a URL. You can provide the source URL in the UI (settings button > Import), or by adding the URL as a hash to the LocalPen url:

(e.g. https://localpen.io/#https://gist.github.com/hatemhosny/a0a32216df59e53879b7cd83856cdde4)

LocalPen can detect and automatically load code from multiple sources. Currently the supported sources are:

  • Github gists (imports multiple files in the gist)
  • A directory in a github repo (multiple files)
  • A file in a github repo (imports that single file)
  • Gitlab snippets (imports multiple files in the snippet)
  • A directory in a gitlab repo (multiple files)
  • A file in a gitlab repo (imports that single file)
  • Extract code blocks from a webpage (see code blocks)
  • Otherwise the URL will be considered a raw file (like raw files on github)

If the source URL points to multiple files (e.g github gists and directories), LocalPen tries to guess which file to load in which code editor, for example:

  • index.html -> markup
  • my-style.css -> style
  • app.js -> script

All supported languages can be used. If the source URL points to multiple files of the same category, guessing may not work well. In this case, you may need to provide the files to load and the language for each as querystring parameters. For example:

https://localpen.io/?pug=page.pug&scss=styles.scss&ts=app.ts#https://github.com/myuser/myrepo/tree/master/mydir
Enter fullscreen mode Exit fullscreen mode

LocalPen will look for the directory mydir in the github repo myuser/myrepo, and load page.pug in the markup editor, styles.scss in the styles editor, and app.ts in the script editor. The first file in the query string will be shown by default (page.pug in this case).

"Edit in LocalPen" Bookmarklet

Instead of manually copy/pasting URLs to import, the bookmarklet can be very convenient. It opens LocalPen in a new window and adds the current webpage URL as a hash. Create a new bookmark in your browser and add this code as its URL:

javascript: (function () {
  window.open('https://localpen.io/#' + location.href, '_blank');
})();
Enter fullscreen mode Exit fullscreen mode

Importing from CodePen

Currently, CodePen API does not allow directly importing code from pens. However, you can export any saved pen as a Github gist and then import it to LocalPen. This is even easier if you use the bookmarklet. The format that Codepen exports to gists is well understood by LocalPen. Most pens can be imported with no or minimal changes.

This is a summary overview of moving code between LocalPen, CodePen and GitHub gists:

Alt Text

Remember, you can always export your code from LocalPen as raw source code files, compiled/transpiled code as an HTML file or as project configuration JSON.

Prefill From Code Blocks

Editors can be prefilled by code blocks in web pages. The page is fetched, its HTML is parsed and code is extracted from elements with specific CSS selectors.

Important Note: For this to work, CORS has to be enabled on the target host to allow fetch requests from LocalPen. This is not required if LocalPen is hosted on the same host of the target web page.

Add the querystring parameter url with no value, and put the URL of the page with the code blocks as a hash. For example:

https://localpen.io/?url#https://hatemhosny.github.io/localpen-examples/prefill-from-code-blocks.html

By default, LocalPen looks for elements that match the CSS selector .localpen [data-lang="${language}"].

for example, in this code block:

<code class="localpen">
  <pre data-lang="html">
This is identified as &lt;strong&gt;HTML&lt;/strong&gt; code
</pre
  >
</code>
Enter fullscreen mode Exit fullscreen mode

The HTML editor is prefilled with: This is identified as <strong>HTML</strong> code

Notice that the code should be encoded (e.g. angled brackets) to avoid interference with the HTML of the page.

You may wish to specify CSS selectors for elements that contain the code for specific languages. The following example loads the content of the first element that matches the CSS selector h3 as the HTML code:

https://localpen.io/?url&html=h3#https://hatemhosny.github.io/localpen-examples/prefill-from-code-blocks.html

Please note that you may prefill LocalPen editors embedded in the same page. This works great for documentation websites.

This is a demo for automatic extraction of code blocks to prefill editors by creating "Edit in LocalPen" links. Also embedded editors are prefilled from the code blocks. (View source)

Prefill Editors by Querystring Parameters

You can prefill the editors by writing content as querystring parameter values, e.g.:

https://localpen.io/?css=h1{color:blue;}&html=%3Ch1%3EHello%20World%3C/h1%3E

This link preloads the CSS and HTML editors with content and makes the CSS the default editor. This can be convenient to share links with preloaded content without using an external service. However, please be cautious with this method because you quickly reach the ~2000 character limit of URL length. You also need to URI-encode the content (which you can do in JavaScript using the encodeURI and encodeURIComponent methods).

That was a long post, but it describes such a powerful feature in LocalPen.

In the next post we discuss embedded editors and display modes.

Discussion (0)