DEV Community

loading...
Cover image for LocalPen v0.2 ✨🎉

LocalPen v0.2 ✨🎉

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

Today, a new release of LocalPen was published, featuring:

  • Enforced security
  • Templates: starter templates and user defined templates
  • CSS Presets
  • Various bug fixes and improvements

Enforced Security

The result page is now rendered in a sandboxed iframe with a unique origin. This prevents embedded editors from having access to the parent page, or to sensitive data like user cookies, localstorage, etc. This makes it a lot safer to embed LocalPen editor in your website and guards against most cross site scripting attacks.

Templates

Alt Text

New projects can start with a blank template or use any of the provided starter templates (which include starter templates for typescript, react, vue, angular preact, jQuery, bootstrap, tailwind and D3). Alternatively users can save any project as a template (settings menu > save as > Template). It can then be used when starting a new project (settings menu > New > My Templates).

CSS Presets

Alt Text

CSS base presets can be easily added from the settings menu. These currently include:

This is an example of a starter README template with markdown using github-markdown-css:

Alt Text

for the full feature list of LocalPen, check the announcement post:

and the GitHub repo:

GitHub logo hatemhosny / localpen

Code pens that run locally!

LocalPen

Code pens that run locally!

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

TL;DR: Getting started

Deploy to DO

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)
  • Templates: Starter templates and user-defined templates
  • Allows adding external stylesheets and/or scripts
  • Allows importing npm modules that can be referenced directly without a build step (using the great skypack.dev)
  • Allows importing strongly-typed local typescript modules with full code completion and intellisense




Please let me know if you have any comments, suggestions or feature requests.

Discussion (4)

Collapse
kris profile image
kris

I have some idea to create service for compete codepen. Can I use this? any license restrictions ?

Collapse
hatemhosny profile image
Hatem Hosny Author

thank you for showing interest in LocalPen :)

Currently, I have no intentions to create a backend for LocalPen, with the view to keep it as a client-side-only project that can be hosted on any static file server and integrate with other services through their APIs. The project goals are outlined in this post:

Having said that, LocalPen is released under MIT license. So feel free to use it for whatever project you have. If you do, I would appreciate if you let us know about it.

Thank you, and I hope you build a great product 👍

Collapse
krrishdhaneja profile image
Krrish Dhaneja

Man this is AWESOME!!!!

Collapse
hatemhosny profile image
Hatem Hosny Author

Thank you 😊