This is a part of the series: LocalPen - code pens that run locally!
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
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.
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 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:
for the full feature list of LocalPen, check the announcement post:
and the GitHub repo:
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.
TL;DR: Getting started
- Monaco editor (the beautiful code editor that powers VS Code)
- Prettier code formatting
- Emmet tab completion
- 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.