Introducing 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

Background

During developing a typescript visualization library based on D3, I needed a playground that I can host on the documentation site of the library, where developers can test it, try different options and immediately see the result.

There were many good options, but none ticked all the boxes. I needed a code editor that can be embedded in my website, can be prefilled with my code samples, allows end-users to edit and immediately see the result, has auto-complete for my library-specific typescript types, and does not cost me a large some of money. In addition, my documentation website is produced by a static site generator, which I will be hosting on a static file server, so I need the playground to run totally on the client.

Am I asking for too much?

Here I am introducing LocalPen. A project that I started as a small module to be added to the website, but actually has grown much larger and deserved to be a separate project.

This coincided with the start of DigitalOcean App Platform Hackathon, which motivated me to work hard on it to have a product ready before the deadline. So, here is my submission, just a few hours before the deadline :)

Feature Summary:

• Monaco editor (the beautiful code editor that powers VS Code)
• Prettier code formatting
• Supports many languages (HTML, Markdown, Pug, AsciiDoc, CSS, SCSS, SASS, Less, Stylus, JavaScript, TypeScript, JSX, CoffeeScript and more to come)
• Emmet tab completion
• Autoprefixer
• All code compiling/transpiling occurs on the fly on the client, so works on any static server.
• Immediate results with no server rounds
• Conditional loading of modules (only the features used are downloaded)
• Allows adding external stylesheets and/or scripts
• Allows to import npm modules for usage directly without a build step (using the great skypack.dev)
• Imports strongly-typed local typescript modules with full code completion and intellisense.
• Can be embedded in regular web pages
• Code embeds allow editing with the immediate preview
• Resizable split panes (using split.js)
• Multiple modes: full mode (with split panes), editor only mode and read-only code block mode
• Imports code from github and gitlab (gists and repos) or from your web pages
• Immediatley recognizes and imports codepens exported to github gists
• Export/import projects as JSON
• Export source code as zip file or ready-to-run compiled HTML page
• Export to CodePen and JsFiddle (more to come)
• Save/open from local storage with optional autosave
• Keyboard shortcuts
• LocalPen is under active development with more features to come.

In the next post, I present the design decisions and what makes LocalPen different.