Playground

Quoin in eight languages, with comments, AI, collaboration, syntax highlighting and the markdown source pane switched on and off, and the code behind every setting beside it.

Every setting here is a prop, and the code beside the editor is the code that sets it, ready to copy. The settings are in two groups because Quoin treats them differently: a canvas reads its extensions once, so the language, comments, AI and the second collaborator are read as it mounts and changing any of them remounts it with a new key. Highlighting, the markdown pane and read only are props it answers to at once.

Every block

A paragraph with bold, italic, struck, code, a link, e^{i\pi} + 1 = 0 and @Ada Lovelace 🎉.

Text

• A bulleted item

1. A numbered item

• A task

A quote

A toggle

What it holds, one level in.

---

Code, media and data

const greeting: string = 'Blocks on screen';
console.log(greeting);

sequenceDiagram
  Writer->>Canvas: types
  Canvas->>Markdown: stores

sample-notes.txt

Block	Stored as
Paragraph	Markdown
Table	Rows of cells

\sum_{k=1}^{n} k = \frac{n(n+1)}{2}

Quoin on GitHub

https://amineseboui.github.io/quoin-editor/

Press / on an empty line to add any of them again.

How it works: Localization.