This is a part of the series: LocalPen - code pens that run locally!
So, let's talk about how to get started with LocalPen and present some examples.
There are multiple options for usage:
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)
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.
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
Please note that LocalPen is not yet ready for production use.
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
An npm package is planned.
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]
- 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 the next post, we describe importing NPM modules and adding external resources.