Back to Jot
|
Documentation
Get Started

Jot Documentation

Complete guide to mastering visual note-taking with Jot. Learn every feature and become a productivity powerhouse.

Quick Start Guide

Your First Steps

  1. Sign In: Enter any name to get started - no account creation needed
  2. Default Workspace: A "My First Workspace" is automatically created for new users
  3. Create Your First Card: Click the "Add Card" button in the toolbar or double-click anywhere on the canvas
  4. Start Typing: Click on any card to begin editing with rich text formatting

Core Features

  • Infinite Canvas: Unlimited workspace with zoom and pan controls
  • Rich Text Cards: Full formatting, code highlighting, images, and task lists
  • Visual Connections: Connect cards with arrows to show relationships
  • Global Search: Find content across all workspaces instantly

Privacy & Storage

  • Local Storage: All data stored in your browser using IndexedDB
  • No Servers: Complete privacy with no data sent to external servers
  • Offline Ready: Works without internet after initial load

Key Features

Workspace Management

Workspaces are your organizational containers - each one is a separate canvas for different projects or topics.

Creating & Managing Workspaces:

  1. Click the "New Workspace" button in the sidebar
  2. Enter a descriptive name
  3. Press Enter or click the checkmark to save
  4. Your new workspace appears in the sidebar list

Workspace Operations:

  • Rename: Click the edit icon next to any workspace name
  • Delete: Click the trash icon (with confirmation dialog)
  • Reorder: Use the grip handle to drag workspaces up/down in the list
  • Select: Click any workspace to switch to it (auto-saves your position)

Cards - Your Content Containers

Cards are the fundamental building blocks of your visual workspace. Each card can contain rich text, code, images, and more.

Creating Cards:

  1. Click "Add Card" in the toolbar
  2. Double-click anywhere on empty canvas to create a card at that location
  3. New card appears at the center of your current view (toolbar) or at click location (double-click)
  4. Automatically enters edit mode for immediate typing
  5. Default size: 300x200 pixels

Card Components:

  • Title Bar: Contains title, edit button, save/cancel buttons
  • Content Area: Rich text editor with full formatting
  • Resize Handle: Bottom-right corner for manual resizing
  • Drag Handle: Grip icon in title bar for moving

Rich Text Editing

Jot includes a powerful rich text editor with comprehensive formatting options, code highlighting, and media support.

Basic Formatting:

  • Bold: Ctrl/Cmd+B or toolbar button
  • Italic: Ctrl/Cmd+I or toolbar button
  • Strikethrough: Toolbar button
  • Inline Code: Toolbar </> button for code snippets

Paragraph Formatting:

  • Headings: H1, H2, H3 options
  • Blockquotes: For emphasized text or citations
  • Normal Paragraph: Default text formatting

Lists:

  • Bullet Lists: Unordered lists with disc bullets
  • Numbered Lists: Ordered lists with automatic numbering
  • Task Lists: Interactive checkboxes for to-do items
  • Nested Lists: Multi-level organization supported

Code Support:

  • Inline Code: Monospace with gray background
  • Code Blocks: Full syntax highlighting
  • 10+ Languages: JavaScript, Python, Java, C++, HTML, CSS, JSON, SQL, and more

Card Connections

Create visual relationships between cards using arrows and lines to show how ideas connect.

Connection Process:

  1. Click "Connect" button in toolbar (turns orange)
  2. Click on the first card you want to connect
  3. Click on the second card to complete the connection
  4. Arrow appears connecting the two cards
  5. Click "Cancel Connect" or Connect button again to exit mode

Use Cases:

  • Process Flows: Show step-by-step workflows
  • Mind Maps: Connect related concepts
  • Project Dependencies: Show task relationships
  • Knowledge Graphs: Link related information

Canvas Navigation & View Controls

Panning (Moving Around):

  • Mouse: Click and drag empty canvas area
  • Touch: Touch and drag on mobile devices
  • Keyboard: Arrow keys for fine movement
  • Auto-Save: Pan position saved per workspace

Zoom Controls:

  • Zoom In/Out: Buttons in toolbar (+ and - icons)
  • Mouse Wheel: Scroll to zoom in/out
  • Zoom Range: 10% to 300% magnification
  • Reset Zoom: 100% button in toolbar

Global Search

Find content across all your workspaces instantly with powerful search capabilities.

Search Features:

  • Global: Searches across ALL your workspaces
  • Real-time: Results update as you type
  • Content Types: Card titles and content text
  • Instant Access: Located in header for quick access
  • Smart Navigation: Click any result to jump directly to that card

Keyboard Shortcuts

Text Formatting

Ctrl/Cmd+BBold text
Ctrl/Cmd+IItalic text
Ctrl/Cmd+ZUndo
Ctrl/Cmd+YRedo

List Management

TabIndent list item
Shift+TabUnindent list item
EnterNew list item
EscapeExit edit mode

Ready to start creating?

Put this knowledge into practice with your own visual workspace.

Get Started for Free