Penlab is open

Penlab is a front-end playground in the browser. Three code panels on the left, the result on the right, a console under it. There is nothing to install or build: open a new pen, write a couple of lines, and they already run.

We made it for three cases: to check an idea quickly, to show an example to a student or a colleague, and to attach a live demo to an article. Below is what Penlab has today.

The editor

Three panels — HTML, CSS and JavaScript — built on CodeMirror 6: syntax highlighting, autocompletion, code folding and formatting.

• Emmet in HTML and CSS. Type ul>li*3 and press Tab to get a list of three items. In CSS, m10 becomes margin: 10px;.
• Live preview. The result updates half a second after you stop typing. Auto-run can be turned off, and then the code runs by hand — Ctrl+Enter or ⌘Enter.
• A console under the preview: console.log, warnings and errors from your code. You can also type an expression there and see the answer at once.
• Layouts. Editors on the left, on top or on the right; panels can be resized and collapsed.
• Settings: editor theme, font size, word wrap. Keyboard shortcuts work on a Russian keyboard layout too.

Here is a pen that is enough for a first try:

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: #0e0e0e;
  color: #fff;
  font: 600 48px/1 system-ui;
}

The code of a pen runs in an isolated frame: it cannot reach your account or other people's pens.

An account without a password

You can write code without signing up. An account is needed once you want to save a pen.

1. Press Save and enter your email.
2. Get an email with a six-digit code and enter it.
3. Pick a username — and the pen you were working on saves itself.

There are no passwords: every time you sign in with a new code from an email.

Links, forks and likes

A saved pen gets its own address. Anyone can open it by the link, without an account: with the code, the preview and the console.

• Fork — your own copy of any pen, yours or someone else's. The copy keeps a note of what it was made from.
• Like — one per pen. The author sees how many there are.
• Full-screen result — a separate page without the editor, handy for a projector.

If you open one pen in two tabs and save in both, Penlab does not silently overwrite the changes: it asks whether to overwrite, save as a copy or cancel.

Profile and library

Your profile holds all your pens: saved ones, forks and the ones you liked. You can search them by title, view them as a grid with small previews or as a list, rename and delete them. Next to them are the numbers: how many pens, forks, likes and views you have.

Every author has a public page with a bio and their pens. To open it, click the author's name on any card.

Showcase

The showcase collects the pens of all members. You can sort them by likes, date or views, separate originals from forks and search by title. The six most popular ones are shown on the home page.

Phones and language

On a phone the editor switches between tabs: HTML, CSS, JS and the result. The interface and the emails come in English and Russian; the language follows the browser and can be changed in Settings.

This is the first entry in the blog. Here we will briefly tell what is new in Penlab. For now — open the editor and give it a try.