File Management

Load, organize, and navigate markdown files and folders in MarkView

MarkView provides multiple intuitive ways to load and manage your markdown files. Whether you’re working with a single document or an entire folder of files, MarkView makes it easy to organize and navigate your content.

Loading Files

MarkView supports several methods for loading markdown files:

Drag & Drop

Drag markdown files or folders directly into the window

File Upload

Use the upload button in the sidebar to select individual files

Folder Upload

Load entire folders with the folder upload button

CLI Arguments

Pass file or folder paths when launching the app

File Search

Quickly find files with Ctrl+K command palette

Sidebar Navigation

Click any file in the sidebar to view it

Drag and Drop Support

MarkView implements comprehensive drag-and-drop functionality for seamless file loading.

1. Drag Files

   Drag one or more .md or .markdown files from your file explorer

2. Drop Anywhere

   Drop files anywhere in the MarkView window

3. Automatic Loading

   Files are loaded automatically and appear in the sidebar

Implementation: page.tsx:647-671

const handleDrop = (e: React.DragEvent) => {
  e.preventDefault();
  const items = e.dataTransfer.items;
  if (items) {
    const droppedFiles: File[] = [];
    for (let i = 0; i < items.length; i++) {
      const item = items[i];
      if (item.kind === 'file') {
        const file = item.getAsFile();
        if (file) droppedFiles.push(file);
      }
    }
    if (droppedFiles.length > 0) {
      const dt = new DataTransfer();
      for (let i = 0; i < droppedFiles.length; i++) {
        dt.items.add(droppedFiles[i]);
      }
      handleFileUpload(dt.files);
    }
  }
};

Drop events are handled on the root div element, so you can drop files anywhere in the application window.

Upload Buttons

The sidebar features two upload buttons for loading content:

File Upload Button

Located in the top-left of the sidebar, this button opens a file picker.

Features:

• Accepts multiple file selection
• Filters for .md and .markdown files
• Shows an upload arrow icon
• Displays tooltip: “Upload Files”

Implementation: page.tsx:700-726

Tauri vs Web:

• Tauri: Opens native file dialog via @tauri-apps/plugin-dialog
• Web: Falls back to standard HTML file input

The button attempts to use Tauri’s native dialog first (page.tsx:596-609), providing a better desktop experience with access to the full filesystem.

Folder Upload Button

Located next to the file upload button, this loads entire folders.

Features:

• Opens directory picker
• Recursively loads all markdown files
• Shows a folder icon with plus symbol
• Displays tooltip: “Upload Folder”

Implementation: page.tsx:728-755

Path Handling:

When loading folders in the web version, files preserve relative paths showing up to 2 parent folders (page.tsx:559-563):

const folders = parts.slice(0, -1);
const maxFolders = folders.slice(-2);
const displayName = [...maxFolders, fileName].join('/');

For example: docs/features/themes.md

File Search Modal

The searchable file picker provides quick navigation across all loaded files.

Opening the Search

Keyboard Shortcut

Press Ctrl+K (Windows/Linux) or Cmd+K (Mac) to open the search modal.

This is the fastest way to switch between files.

Search Bar Click

Click the “Search files…” bar in the sidebar to open the modal.

The search bar displays the Ctrl K hint on the right side.

Using the Search

Implementation: page.tsx:963-1054

The search modal provides:

1. Fuzzy Search: Type to filter files by name (case-insensitive)
2. Keyboard Navigation: Use ↑ and ↓ to navigate results
3. Quick Selection: Press Enter to open the highlighted file
4. Visual Feedback: Selected item highlighted with primary color
5. File Icons: Each file shows a document icon for easy scanning

const filteredFilesModal = useMemo(() => {
  if (!searchQuery) return files;
  return files.filter((f) => 
    f.name.toLowerCase().includes(searchQuery.toLowerCase())
  );
}, [files, searchQuery]);

The search is instant - no need to press Enter to see results. Start typing and the list updates in real-time.

Sidebar File List

All loaded files appear in the sidebar below the upload buttons.

Features:

File Display

• Shows file count: Files (X)
• Displays full file names (with paths if from folders)
• Truncates long names with ellipsis
• Scrollable list for many files

Implementation: page.tsx:832-871

Selection State

The currently selected file is highlighted:

• Background: Primary theme color
• Text: Contrasting color for readability
• Smooth transition animation

background: selectedFile === file.name ? 'var(--primary)' : 'transparent',
color: selectedFile === file.name ? 'var(--background)' : 'var(--foreground)',

Empty State

When no files match the search query, a message appears:

“No matching files”

This helps users understand that their search has no results.

Duplicate Handling

MarkView prevents duplicate files from being loaded based on filename:

Implementation: page.tsx:446-450, 533-536

setFiles(prev => {
  const existingNames = new Set(prev.map(f => f.name));
  const newFiles = markdownFiles.filter(f => !existingNames.has(f.name));
  return [...prev, ...newFiles];
});

Duplicate detection is based on filename only, not file content or path. If you load two files with the same name from different directories, only the first will be kept.

CLI Arguments

When running as a Tauri desktop app, you can pass file or folder paths as command-line arguments.

Implementation: page.tsx:483-500

const loadInitialArgs = async () => {
  try {
    const { invoke } = await import('@tauri-apps/api/core');
    const paths = await invoke<string[]>('get_cli_args');
    for (const path of paths) {
      if (path.endsWith('.md') || path.endsWith('.markdown')) {
        await loadFileFromPath(path);
      } else {
        await loadFolderFromPath(path);
      }
    }
  } catch (err) {
    console.log('Not running in Tauri, skipping initial args');
  }
};

Usage Examples:

# Open a single file
markview README.md

# Open multiple files
markview doc1.md doc2.md doc3.md

# Open a folder
markview ./docs

# Mix files and folders
markview README.md ./docs ./guides

This feature only works in the Tauri desktop version. The web version gracefully skips this step.

File Structure

Each file in MarkView is represented as a MarkdownFile object:

interface MarkdownFile {
  id: string;        // Unique identifier: "${name}-${timestamp}-${random}"
  name: string;      // Display name (may include path for folder uploads)
  content: string;   // Raw markdown content
}

Implementation: page.tsx:101-105

The unique ID ensures React can efficiently track files even if names are reused, while the name is used for display and duplicate detection.

Auto-Selection

When files are loaded, MarkView intelligently selects which file to display:

1. First file loaded: Automatically selected if no file is currently open
2. Additional files: Selection stays on current file
3. CLI/Tauri loads: First file from the loaded set is selected

if (!selectedFile && markdownFiles.length > 0) {
  setSelectedFile(markdownFiles[0].name);
}

This ensures you always see content immediately after loading files.

Supported File Extensions

MarkView accepts files with these extensions:

• .md - Standard markdown extension
• .markdown - Alternative markdown extension

Both extensions are treated identically. MarkView renders them with the same markdown parser and features.