DEV Community

loading...
Cover image for Introducing LocalPen 🎉✨

Introducing LocalPen 🎉✨

Hatem Hosny
・2 min read

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 :)

GitHub logo hatemhosny / localpen

Code pens that run locally!

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.

Discussion (5)

Collapse
artydev profile image
artydev

Thank you very much, great work

How do you create new file in a project ?

Regards

Collapse
hatemhosny profile image
Hatem Hosny Author • Edited

Thank you :)
I'm glad you like it.

In LocalPen, there are 3 main editors (for markup, styles and script). The code from the 3 editors are then combined (may be after a compile step) in a single html page.
So there is no concept of adding files to a project.

This is very similar to other services like codepen, jsfiddle, jsbin, jsitor and others.
The main difference is that, in LocalPen, all the logic (including preprocessing and transpiling/compiling) occur on the client-side with no need for any server-side processing.

Collapse
artydev profile image
artydev

Thank you for your response🙂

Collapse
fredericbonnet profile image
Frédéric Bonnet

Awesome work! I can't wait integrating your tool in my project. I especially like the "Code Block" feature for Living Documentation use cases.

Collapse
hatemhosny profile image
Hatem Hosny Author

Thanks a lot. That's very encouraging.
I hope a stable release with even more features will be published soon.