DEV Community 👩‍💻👨‍💻

Cover image for Getting Started with LocalPen
Hatem Hosny
Hatem Hosny

Posted on

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

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 ( 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

Deploy to DO

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
npm start             # start local development with code watch, rebuild and live-reload
npm run gh-pages      # publish to github pages
Enter fullscreen mode Exit fullscreen mode

From NPM (soon)

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.

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.

Top comments (0)

🌖🌗🌘 Turn on dark mode in Settings