Getting Started with LocalPen

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

So, let's talk about how to get started with LocalPen and present some examples.

Getting Started

There are multiple options for usage:

The hosted app

You may just use the app hosted on (localpen.io) and use various methods to add your code like embedded editors, code blocks, "Edit in LocalPen" and code prefill. (more about these features later)

One-click deploy to Digital Ocean

This allows you to deploy your own instance of LocalPen to Digital Ocean App Platform. You may choose to deploy it as "Static Site". Currently Digital Ocean allows you to host 3 static sites for free.

Include LocalPen in your website

Download the app from the project releases page on Github, extract the folder and add it to your website. You may wish to rename index.html to something like playground.html.

Please note that LocalPen is not yet ready for production use.

From Source Code

Fork the repo and clone it. You may use the included setup to publish to github pages:

npm install
npm run build
npm run serve         # locally serve to http://127.0.0.2:8080
npm start             # start local development with code watch, rebuild and live-reload
npm run gh-pages      # publish to github pages

From NPM (soon)

An npm package is planned.

Examples

Please note that most of the examples presented in this section are code samples that were publicly available as code pens and were used for demonstration with no or little modifications.

• Simple jQuery Calculator (jQuery) [from CodePen]
• Bootstrap tab panel (Bootstrap) [from CodePen]
• Bootstrap Custom Button SCSS Mixin (Bootstrap, SCSS) [from CodePen]
• Yet another JavaScript Calculator (CSS, JS) [from CodePen]
• React Counter (React, JSX)
• Vue.js Counter (Vue.js) [modified from CodePen]
• Angular 11 Counter (Angular 11, Typescript) [modified from CodePen]
• Preact without JSX (Preact)
• Vue.js TodoMVC (Vue.js) [from vuejs.org]
• CSS-only Animated Lantern [from CodePen] - This is the code presented in the cover image.
• Bootstrap 3 & AngularJS Dialog/Modals (Bootstrap 3, AngularJS) [from CodePen]
• Shooting Star (Pug, SCSS, Three.js) [from CodePen]
• Charts info graphic (D3, SCSS) [from CodePen]
• AngularJs + d3Js + bar chart (AngularJS, D3) [from CodePen]
• Rings Navigation (SCSS, JS) [from CodePen]
• ThreeJS Hover Zoom Channel Displacement [from CodePen]
• D3 Gantt Chart (CSS, D3) [from CodePen]
• Racing Lines (Three.js, TweenMax) [from CodePen]

In fact, most pens on CodePen can be imported with no or minor modifications (See Importing from CodePen)

In the next post, we describe importing NPM modules and adding external resources.