Editor & Markdown

Claspt’s editor is built on CodeMirror 6, a modern, extensible code editor. It provides rich markdown editing with live syntax highlighting, inline secret block cards, and a rendered preview mode.

Editor Modes

Claspt offers three ways to view your pages:

Mode	Shortcut	Description
Edit	(default)	Full markdown editor with syntax highlighting
Split	Cmd+\ / Ctrl+\	Side-by-side editor and rendered preview
Preview	Cmd+/ / Ctrl+/	Read-only rendered markdown (no editor)

Toggle between modes using the keyboard shortcuts or the view buttons in the toolbar.

Tip

Split view is excellent for writing longer documents — you see the rendered output in real time as you type, without switching modes.

Markdown Support

Claspt supports standard markdown formatting with live syntax highlighting in the editor.

Headings

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

The editor displays headings with styled font sizes that reflect the heading level — h1 is the largest, h6 the smallest. A heading gutter along the left edge provides additional visual indicators for each level, making it easy to scan document structure at a glance.

Inline Formatting

**bold text**
*italic text*
~~strikethrough~~
`inline code`
[link text](https://example.com)

Keyboard shortcuts for inline formatting:

Format	macOS	Windows/Linux
Bold	Cmd+B	Ctrl+B
Italic	Cmd+I	Ctrl+I
Code	Cmd+E	Ctrl+E
Link	Cmd+K	Ctrl+K

Lists

- Unordered item
- Another item
  - Nested item

1. Ordered item
2. Another item
   1. Nested ordered

Task Lists

- [ ] Task (unchecked)
- [x] Task (completed)
- [ ] Another pending item

Task lists render with interactive checkboxes in preview mode. Click a checkbox to toggle its state — the markdown updates automatically.

Code Blocks

```javascript
const greeting = "Hello, Claspt!";
console.log(greeting);
```

Syntax highlighting is supported for common languages.

Tables

| Name    | Role      | Access  |
|---------|-----------|---------|
| Alice   | Admin     | Full    |
| Bob     | Developer | Read    |
| Charlie | Viewer    | Limited |

Blockquotes

> This is a blockquote.
> It can span multiple lines.
>
> > Nested blockquotes work too.

Callouts

Claspt supports 8 callout types using the blockquote syntax:

> [!note] Optional title
> This is a note callout.

> [!warning]
> Something to watch out for.

Available types: note, tip, warning, danger, info, success, question, quote. Each renders with a distinct icon and color.

Wikilinks

Link between pages using double-bracket syntax:

[[Page Title]]

Click a wikilink to jump to the linked page. If the page doesn’t exist, Claspt offers to create it.

Embeds

Embed another page’s content inline:

![[Page Title]]

The embedded page renders directly inside the current page — useful for reusable content blocks like headers, templates, or shared reference material.

Footnotes

Here's a statement with a footnote[^1].

[^1]: This is the footnote content.

Footnotes render as numbered references with the content collected at the bottom of the page.

Horizontal Rules

---

Images and Links

![Alt text](image-url.png)
[Link text](https://example.com)

Markdown Extensions

Claspt’s preview supports 15 extensions for rich content rendering. Extensions are enabled by default and can be toggled individually from Settings > Extensions.

Math (KaTeX)

Render typeset equations using LaTeX syntax:

Inline: $E = mc^2$

Block:
$$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$

Chemical Formulas (mhchem)

Write chemical equations using the \ce{} command inside math blocks:

$\ce{H2O}$
$\ce{CO2 + H2O -> H2CO3}$
$\ce{2H2 + O2 ->[\Delta] 2H2O}$

Mermaid Diagrams

Create flowcharts, sequence diagrams, Gantt charts, and more:

```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[Other Action]
```

Supports all Mermaid diagram types: flowchart, sequence, class, state, ER, Gantt, pie, mindmap, timeline, and more.

Charts (Chart.js)

Create data visualizations using YAML configuration:

```chart
type: bar
data:
  labels: [Jan, Feb, Mar, Apr]
  datasets:
    - label: Revenue
      data: [12, 19, 8, 15]
```

Supports bar, line, pie, doughnut, radar, and polar area chart types.

Graphviz (DOT)

Render graph and network diagrams using DOT language:

```dot
digraph {
    A -> B -> C
    A -> C
    B -> D
}
```

Powered by Viz.js (WASM) for client-side rendering.

Timelines

Create visual timelines from YAML data:

```timeline
- date: "2024-01"
  title: Project kickoff
  description: Initial planning phase
- date: "2024-03"
  title: Beta launch
  description: First public beta
```

Kanban Boards

Display kanban-style columns:

```kanban
columns:
  - title: To Do
    items: [Design mockups, Write tests]
  - title: In Progress
    items: [Build API]
  - title: Done
    items: [Set up CI/CD]
```

Spreadsheets

Interactive tables with formula support:

```spreadsheet
| Item    | Q1  | Q2  | Total    |
|---------|-----|-----|----------|
| Sales   | 100 | 150 | =B2+C2  |
| Costs   | 60  | 80  | =B3+C3  |
| Profit  |     |     | =D2-D3  |
```

Supports SUM, AVG, MIN, MAX, COUNT, and arithmetic formulas with cell references.

Music (ABC Notation)

Render sheet music from ABC notation:

```abc
X:1
T:Example
M:4/4
K:C
CDEF | GABc |
```

Powered by abcjs for client-side rendering.

Syntax Highlighting

Code blocks render with syntax highlighting for 22+ languages. Use the toolbar code button’s dropdown to pick a language, or specify it manually:

```python
def hello():
    print("Hello, Claspt!")
```

Tip

All extensions render in Split and Preview modes. In Edit mode, you see the raw markdown source.

Media Attachments

Drag and drop images or paste them directly into the editor to attach them to your page.

How It Works

1. Drag an image file onto the editor area, or paste an image from your clipboard.
2. Claspt copies the image into a _media/ folder within your vault.
3. A markdown image reference is inserted at the cursor position.

Supported Formats

Format	Extension
PNG	.png
JPEG	.jpg, .jpeg
GIF	.gif
WebP	.webp

Storage

Media files are stored in the _media/ folder at the root of your vault:

~/Claspt/
  _media/
    2025-01-15-screenshot.png
    2025-01-16-diagram.webp
  general/
    my-page.md

Images are referenced with relative paths in your markdown, so they work both in Claspt and in any standard markdown renderer.

Note

Media files are tracked by Git like everything else in your vault, so they’re included in version history and sync.

Secret Block Insertion

Press Cmd+Shift+S / Ctrl+Shift+S to open the secret template picker. Choose from pre-built templates:

Template	Use Case
Password	Website logins, app passwords
API Key	Service tokens, developer keys
Credit Card	Card numbers, expiry, CVV
SSH Key	Private keys
Env Variable	Environment config values
License Key	Software licenses
Recovery Code	2FA backup codes
Custom	Anything else

The secret is immediately encrypted with AES-256-GCM and rendered as an interactive card in the editor. See the Secret Blocks guide for full details.

Full-Body Page Encryption

Beyond individual secret blocks, Claspt supports full-body encryption — encrypting the entire page content, not just :::secret blocks.

Enabling Full-Body Encryption

1. Open a page in the editor.
2. Click the lock icon in the toolbar (or use the page context menu).
3. The entire page content is encrypted with AES-256-GCM.

When full-body encryption is enabled:

• The page content on disk is fully encrypted (not readable as plain markdown).
• The page title in frontmatter remains in plaintext for navigation.
• You must unlock your vault to read the page at all.

When to Use It

Use Case	Recommendation
A few passwords in an otherwise normal note	Use :::secret blocks
An entire page of sensitive information	Use full-body encryption
A page with many secret fields	Either approach works

Caution

Full-body encrypted pages are not readable outside of Claspt (or without your master password). If markdown portability matters for a given page, use individual secret blocks instead.

Version History

Every change you make is auto-committed to Git (batched in 5-second windows), giving you a complete version history for every page.

Viewing History

1. Open the Inspector panel with Cmd+I / Ctrl+I.
2. Scroll to the Version History section.
3. Browse the list of commits for the current page, each showing a timestamp and summary.

Restoring a Previous Version

Click a commit in the version history to view its content. If you want to restore that version, click Restore to replace the current page content with the selected version.

Note

Restoring a version creates a new commit — the restore itself becomes part of the history, so nothing is lost.

Editor Settings

Customize the editor experience from Settings > General:

Setting	Description
Line numbers	Show or hide line numbers in the gutter
Word wrap	Wrap long lines to fit the editor width
Editor font	Monospace font used in the editor

Working with the Editor

Auto-Save

Pages are saved automatically as you type. There’s no save button — changes are persisted immediately. Every save triggers a Git auto-commit (batched in 5-second windows), so you can always revert to a previous version.

Undo and Redo

Standard undo/redo works within the editor session:

Action	macOS	Windows/Linux
Undo	Cmd+Z	Ctrl+Z
Redo	Cmd+Shift+Z	Ctrl+Shift+Z

For history beyond the current session, use the version history in the Inspector panel to browse and restore previous Git commits.

Secret Block Cards

When you add a :::secret block, the editor renders it as an interactive card rather than showing raw markdown. You can:

• Click to reveal/hide the secret value
• Copy the value with one click
• Edit the label or value inline

See the Secret Blocks guide for full details.