---
title: "Penlab открыт"
description: "Песочница для фронтенда в браузере: три панели с кодом, живое превью и консоль. Рассказываем, что Penlab умеет уже сейчас."
url: https://penlab.space/blog/ru/penlab-launch
language: ru
section: "Обновления"
published: 2026-10-01T00:07:44Z
updated: 2026-10-01T00:07:44Z
translation: https://penlab.space/blog/penlab-launch
---

# Penlab открыт

Песочница для фронтенда в браузере: три панели с кодом, живое превью и консоль. Рассказываем, что Penlab умеет уже сейчас.

Penlab — песочница для фронтенда в браузере. Слева три панели с кодом, справа результат, под ним консоль. Ничего не надо ставить и собирать: открыли [новый пен](https://penlab.space/new), написали пару строк — и они уже работают.

Мы делали его для трёх случаев: быстро проверить идею, показать пример ученику или коллеге, приложить живое демо к статье. Ниже — что в Penlab есть уже сейчас.

## Редактор

Три панели — HTML, CSS и JavaScript — на CodeMirror 6: подсветка, автодополнение, сворачивание блоков, форматирование кода.

- **Emmet** в HTML и CSS. Наберите `ul>li*3` и нажмите Tab — получите список из трёх пунктов. В CSS `m10` превращается в `margin: 10px;`.
- **Живое превью.** Результат обновляется через полсекунды после того, как вы перестали печатать. Автозапуск можно выключить и запускать код вручную — `Ctrl+Enter` или `⌘Enter`.
- **Консоль** под превью: `console.log`, предупреждения и ошибки из вашего кода. В неё же можно ввести выражение и сразу увидеть ответ.
- **Раскладки.** Редакторы слева, сверху или справа; панели меняют размер и сворачиваются.
- **Настройки:** тема кода, размер шрифта, перенос строк. Горячие клавиши работают и на русской раскладке.

Вот пен, которого хватит для первой пробы:

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

Код из пена выполняется в изолированной рамке: до вашего аккаунта и чужих пенов он не дотянется.

## Аккаунт без пароля

Писать код можно и без регистрации. Аккаунт понадобится, когда захочется сохранить пен.

1. Нажмите Save и введите email.
2. Получите письмо с шестизначным кодом и введите его.
3. Выберите имя — и пен, над которым вы работали, сохранится сам.

Паролей нет: каждый раз вы входите по новому коду из письма.

## Ссылки, форки и лайки

У сохранённого пена появляется свой адрес. По ссылке он открывается у любого человека, в том числе без аккаунта: с кодом, превью и консолью.

- **Форк** — своя копия любого пена, вашего или чужого. В копии остаётся пометка, с чего она сделана.
- **Лайк** — один на пен. Автор видит, сколько их набралось.
- **Результат во весь экран** — отдельная страница без редактора, удобно показывать на проекторе.

Если вы открыли один пен в двух вкладках и сохранили в обеих, Penlab не затрёт изменения молча: он спросит, перезаписать, сохранить копией или отменить.

## Профиль и библиотека

В [профиле](https://penlab.space/profile) лежат все ваши пены: сохранённые, форки и те, что вы лайкнули. Их можно искать по названию, смотреть сеткой с мини-превью или списком, переименовывать и удалять. Рядом — статистика: сколько у вас пенов, форков, лайков и просмотров.

У каждого автора есть публичная страница с описанием и его пенами. Чтобы попасть на неё, нажмите на имя автора в любой карточке.

## Витрина

На [витрине](https://penlab.space/showcase) собраны пены всех участников. Их можно отсортировать по лайкам, дате или просмотрам, отделить оригиналы от форков и найти по названию. Шесть самых популярных показаны на главной странице.

## Телефон и язык

На телефоне редактор переключается вкладками: HTML, CSS, JS и результат. Интерфейс и письма — на русском и английском; язык выбирается по браузеру и меняется в настройках.

---

Это первая запись в блоге. Здесь мы будем коротко рассказывать, что нового появилось в Penlab. А пока — [откройте редактор](https://penlab.space/new) и попробуйте.