---
title: "Blok Playground — Try the Block Editor"
description: "Try Blok in the browser: slash commands, tables, columns, drag and drop, and the JSON it produces."
source: https://blokeditor.com/demo/
lastmod: 2026-08-31
---

Interactive Demo

# Try the Editor

A fully interactive editor running right here in your browser. Type`/`for commands, drag blocks to reorder, or select text to format.

Loading editor...

Open command menu

Indent list item

Undo

Bold text

## What you can try here

- **Slash commands** Type / in an empty block to open the command menu and insert a heading, list, quote, code block or image.
- **Drag and drop** Grab the handle to the left of any block to move it, or drop it beside another block to nest it inside.
- **Tables and columns** Insert a table and edit its cells in place, or split the page into columns and drag blocks between them.
- **Read-only mode** Open Settings and switch the editor to read-only to see the page exactly as a reader gets it.
- **JSON output** Nothing here is HTML. The content is saved as a plain array of blocks, ready to store or render anywhere.

Instant Feedback

Everything happens locally in your browser. No server roundtrips, just pure performance.

Clean JSON Output

Content is stored as structured JSON blocks. Parse, validate, and store anywhere.

Block-Based Architecture

Create custom block types with simple JavaScript classes. Fully extensible.

## Where to go next

- [**Quick Start** Install the package and mount your first editor in a few lines.](https://blokeditor.com/docs/quick-start/)
- [**Configuration** Every option the Blok constructor accepts, and what each one defaults to.](https://blokeditor.com/docs/config/)
- [**OutputData** The exact JSON shape save() returns, block by block.](https://blokeditor.com/docs/output-data/)
- [**Framework adapters** Drop-in components for React, Vue and Angular.](https://blokeditor.com/docs/blok-editor/)

Settings