DEV Community

loading...
Cover image for LocalPen v0.3 πŸš€

LocalPen v0.3 πŸš€

Hatem Hosny
・3 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

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

Tools Pane

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:

  • closed (default)
  • open
  • full
  • none

e.g. https://localpen.io/?js&console=open (sets JavaScript as the active editor and opens the console)

JS/TS Console

Alt Text

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.log, console.warn, console.error, console.table, ...etc). The console can also be used as REPL (read–eval–print loop) using the included console input.

Alt Text

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!).
The console input accepts JavaScript and TypeScript code for evaluation.

e.g. https://localpen.io/?ts&console=full (sets TypeScript as the active editor and shows the console maximized)

View Compiled Code

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

Alt Text

e.g. https://localpen.io/?ts&compiled=full (sets TypeScript as the active editor and shows compiled code viewer maximized)

This example shows TypeScript code along with the compiled Javascript code, similar to the official TypeScript Playground.

Alt Text

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.

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…




Discussion (0)