DEV Community

Cover image for LocalPen: Saving/Exporting Code
Hatem Hosny
Hatem Hosny

Posted on

LocalPen: Saving/Exporting Code

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

Now you have written your code, how it save/export it?

Saving to Device Local Storage

Projects can be locally saved to device using local storage. You can save a project by clicking Save on the settings menu, or simply with the keyboard shortcut Ctrl/Cmd + S.
After the initial save, autosave is enabled so that you do not lose code changes. You may disable autosave from the settings menu. It will remain disabled till the next save.

You may also fork the project (save as a new project). Also from the settings menu > Fork, or the keyboard shortcut Ctrl/Cmd + Shift + S.

Previously saved projects can be opened from the settings menu > Open. In that screen you can open/delete any project or delete all.

Please note that the projects are locally saved on the device and are not uploaded to the server.

Exporting Content

Projects in LocalPen can be exported as:

  • JSON: this is a JSON representation of the project configuration with the project source code included. This allows re-importing or sharing your projects.
  • Source: The source code is exported as separate files in a single zip file. This is your untouched source code which you may wish to open in another code editor.
  • Result: The combined compiled/transpiled code is exported as a ready-to-run HTML file. You may run it by simply opening the file in the browser, or using a simple local http server, for example:
  npx http-server
Enter fullscreen mode Exit fullscreen mode

Edit in other Services

Currently LocalPen can export content to CodePen and JSFiddle. This is accessible from the settings menu > Export.

It is planned to support more services. This allows you to move code between different services.

Proceed to the next post for how to prefill editors with code (import code to editors)

Discussion (4)

krrishdhaneja profile image
Krrish Dhaneja

Where our project is saved in local storage?

hatemhosny profile image
Hatem Hosny Author

saving to localStorage uses the Web Storage API to save to the browser's localStorage.

You can open a previously saved project from the settings menu > open.

This is a screenshot for the "Saved Projects" screen:
open LocalPen

On the other hand, if you prefer to download a project and save it to your device (for later import or to share), you can export it (settings menu > Export)

different export options are outlined in the post

You may then import exported JSON on the same or a different device from (settings menu > Import)

check this post for importing code (prefilling the editors)

I hope this was helpful.
Please do not hesitate to ask about anything else or suggest new features.

krrishdhaneja profile image
Krrish Dhaneja

Thanks alot, hey I am just getting started with js, and this project is just soooo AWESOME!!!(I am so excited to contribute as soon as I learn js!!)to start with, so where can I start off from, for eg. Are the important or main files stored in src folder?

Thread Thread
hatemhosny profile image
Hatem Hosny Author

wow! that's very nice. I can't wait till I see your first pull request in the repo. 😊

Currently, the project is under heavy development with relatively frequent code refactoring. Once it is more stable, I plan to provide a proper contribution guide and formal API documentation. So, stay tuned.

Meanwhile, the main logic starts from here.

If you have any questions regarding the code or design decisions feel free to open an issue and we can discuss there.