Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/sureshamal/markview/llms.txt

Use this file to discover all available pages before exploring further.

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:
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-726Tauri 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.

​
File Search Modal

The searchable file picker provides quick navigation across all loaded files.
Press Ctrl+K (Windows/Linux) or Cmd+K (Mac) to open the search modal.This is the fastest way to switch between files.
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.
All loaded files appear in the sidebar below the upload buttons. Features:
  • 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
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)',
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.

Build docs developers (and LLMs) love

Get started for freeTalk to us