LocalPen: Embedded Editors

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

Embeds

The code editor can be embedded in web pages using iframes. They can still be fully functional and editable unless, for example mode is set to codeblock (more about that later). Notice they can also prefilled with code, the same way described in a previous post.

Examples: Demo - Full Source

<iframe src="https://localpen.io/"></iframe>

<iframe
  src="https://localpen.io/#https://gist.github.com/hatemhosny/a0a32216df59e53879b7cd83856cdde4"
></iframe>

<iframe
  src="https://localpen.io/?mode=codeblock&js=script.jsx#https://gist.github.com/hatemhosny/a0a32216df59e53879b7cd83856cdde4"
></iframe>

A page with embedded editor may look like this:

This is a demo for embedded editors that are prefilled by code blocks in the HTML of the web page that contains them. (View source)

Display Modes

The querystring parameter mode can be used to select different display modes.
The following display modes are supported:

• full: This is the default mode with a top toolbar, editor and results panes.

example: https://localpen.io/

• editor: Hides the results pane and works as editor only.

example: https://localpen.io/?mode=editor

• codeblock: A read-only mode just showing only the code block. On mouse-over a copy button appears that allows to copy the code. This is useful when embedded for code documentation.

example: Demo View source

In the next post, we show how to add intellisense for your custom ES modules