This is a part of the series: LocalPen - code pens that run locally!
I'm glad to announce the release of v0.3 of LocalPen, featuring:
- Tools pane
- JS/TS console (using the beautiful Luna Console)
- Compiled code viewer
- View result page width & height on resize
- Various bug fixes and UI improvements
The resizeable tools pane provides an area for developer tools. This currently includes the JS/TS console and compiled code viewer. In addition, it shows a loading spinner when the result page is loading. The pane can be resized by dragging the bar. Clicking a tool button toggles opening/closing the pane. Double-click toggles maximize/close.
It can be configured to have any of the following states:
Console messages are shown in the included console (in the tools pane, below the result page), without having to open the browser console. Message can be sent to the console using the standard
console methods in the code editor (e.g.
console.table, ...etc). The console can also be used as REPL (read–eval–print loop) using the included console input.
The code is evaluated in the context of the result page (i.e. variables defined in the script editor are accessible for evaluation in the console input). Also code completion works in the console input (The console input is a full blown monaco editor!).
e.g. https://localpen.io/?ts&console=full (sets TypeScript as the active editor and shows the console maximized)
The resulting compiled/transpiled code can be seen in the compiled code viewer (in the tools pane) in real-time, as you type. This works for all compiled code (e.g. Markdown, Pug, SCSS, Less, Stylus, Typescript, CoffeeScript, ...etc.). This can be a great tool for learning. As you write code, you see the compiled code and the resulting page in the same time. The compiled code viewer shows the code compiled from the currently active editor (markup/style/script). This includes the CSS produced by Autoprefixer (if enabled).
e.g. https://localpen.io/?ts&compiled=full (sets TypeScript as the active editor and shows compiled code viewer maximized)
In addition, now we have an animated logo loading screen :)
This was a significant milestone that added important features and fixes. LocalPen more and more approaches a stable release.
Please give it a try and let me know what you think. Suggestions, ideas and contributions are most welcome.
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…