DEV Community

Cover image for What makes LocalPen different?
Hatem Hosny
Hatem Hosny

Posted on

What makes LocalPen different?

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

There are many great products like CodePen, JSFiddle, JS Bin, JSitor and many others, which LocalPen does not aim to replace or compete with. On the contrary, it aims to integrate with many of these services as their APIs allow (e.g. import and export).

However, LocalPen aims to stay as a client-side only app that can be hosted on any static file server. After the initial loading, using the app can be significantly faster than having to wait for server rounds. Any syncing or sharing capabilities would use external services. Having said that, it is an open-source software, and it should not be difficult to implement a backend for such features if you want to extend it as a different project (may be have a look at parse starter).

The other main goal for LocalPen (in fact, that was the motive for its development), is to provide a feature-rich, easy to use playground that library developers can use for the documentation of their libraries and as a showcase for their products. This includes using the hosted app (, or as a self-hosted option (by including it in their website, or on a separate subdomain for example). Again, being a client-side only app, LocalPen becomes more convenient for not needing special server requirements.

To have embedded editors using a freely-available open-source software is very handy. That goal also drives the requirement for being able to import local (unpublished) modules with editor auto-completion and intellisense.

LocalPen uses Monaco editor (VS Code editor), Prettier, Emmet and Autoprefixer among others. Your can import NPM modules without a build step. It feels like a very light weight version of your own local development environment with the intellisense and the auto-completion features. All that is on a browser without having to npm install anything.

Important note: Please note that LocalPen is in early development and may not yet be ready for production use. API may change, and security and performance improvements may still be required. However please take the time to test it. Your feedback and contribution are highly appreciated.

Proceed to the next post for getting started and usage examples.

Discussion (0)