Navigation

MarkView features an intuitive three-panel layout designed for efficient document browsing and navigation.

Three-Panel Layout

The application is divided into three main sections:

Left Sidebar - File Browser

The left sidebar (260px wide) displays your loaded files and provides access to file management tools.Features:

Upload buttons for files and folders
Quick search input (Ctrl+K)
Theme selector
Scrollable file list with selection

// From app/page.tsx:690-697
<aside style={{
  width: '260px',
  background: 'var(--card-bg)',
  borderRight: '1px solid var(--card-border)',
  display: 'flex',
  flexDirection: 'column',
  flexShrink: 0
}}>

Main Content Area

The central panel displays your rendered Markdown content with a maximum width of 800px for optimal readability.Features:

Full GitHub Flavored Markdown rendering
Code syntax highlighting
Mermaid diagram support
Raw HTML rendering
Interactive links with previews

// From app/page.tsx:874-892
<main style={{ flex: 1, overflow: 'auto', padding: '1.5rem 2rem' }}>
  <article className="markdown-content" style={{ maxWidth: '800px', margin: '0 auto' }}>
    <ReactMarkdown
      remarkPlugins={[remarkGfm]}
      rehypePlugins={[rehypeRaw]}
    >
      {selectedContent}
    </ReactMarkdown>
  </article>
</main>

Right Sidebar - Outline Panel

The right sidebar (240px wide) shows the document outline/table of contents, automatically generated from headings.Features:

Auto-generated from H1-H6 headings
Clickable navigation to sections
Visual hierarchy with indentation
Only appears when outline exists

// From app/page.tsx:922-960
{outline.length > 0 && (
  <aside style={{
    width: '240px',
    background: 'var(--card-bg)',
    borderLeft: '1px solid var(--card-border)',
    display: 'flex',
    flexDirection: 'column',
    flexShrink: 0
  }}>

File Search (Ctrl+K)

MarkView includes a powerful command palette-style file search for quickly finding and switching between files.

Keyboard Shortcut

Press Ctrl+K (Windows/Linux) or Cmd+K (Mac)

Click Search Bar

Click the “Search files…” input in the left sidebar

Using the Search

Type to Filter

Start typing to filter files by name. The search is case-insensitive and matches any part of the filename.

// From app/page.tsx:362-365
const filteredFilesModal = useMemo(() => {
  if (!searchQuery) return files;
  return files.filter((f) => f.name.toLowerCase().includes(searchQuery.toLowerCase()));
}, [files, searchQuery]);

Navigate with Arrow Keys

Use ↑ and ↓ arrow keys to navigate through the filtered results. The selected file is highlighted.

// From app/page.tsx:411-424
if (showFileSearchModal) {
  if (e.key === 'ArrowDown') {
    e.preventDefault();
    setFileSearchIndex(prev => (prev + 1) % filteredFilesModal.length);
  }
  if (e.key === 'ArrowUp') {
    e.preventDefault();
    setFileSearchIndex(prev => (prev - 1 + filteredFilesModal.length) % filteredFilesModal.length);
  }
  if (e.key === 'Enter' && filteredFilesModal.length > 0) {
    e.preventDefault();
    setSelectedFile(filteredFilesModal[fileSearchIndex].name);
    setShowFileSearchModal(false);
  }
}

Select a File

Press Enter to open the highlighted file, or click on any file in the list.

Close the Modal

Press Esc to close the search modal without selecting a file, or click outside the modal.

The search modal has a maximum height of 300px and scrolls if you have many files loaded.

// From app/page.tsx:963-1054
<CommandPalette isOpen={showFileSearchModal} onClose={() => setShowFileSearchModal(false)}>
  <div style={{
    background: 'var(--card-bg)',
    border: '1px solid var(--card-border)',
    borderRadius: '0.75rem',
    padding: '0.5rem',
    minWidth: '400px',
    maxWidth: '600px',
    boxShadow: '0 8px 32px rgba(0,0,0,0.24)',
  }}>

The search modal includes:

Fuzzy search icon
Keyboard shortcut hint (Ctrl K)
File type icons for visual clarity
Highlighted selection with theme colors

Outline / Table of Contents

The outline panel automatically generates a navigable table of contents from your document’s headings.

How It Works

Heading Detection

MarkView scans the current document for all heading levels (H1-H6), ignoring headings inside code blocks.

// From app/page.tsx:627-645
const outline = useMemo(() => {
  if (!selectedContent) return [];
  let inCodeBlock = false;
  const headers: { level: number; text: string; slug: string }[] = [];
  selectedContent.split('\n').forEach((line: string) => {
    if (line.trim().startsWith('```')) {
      inCodeBlock = !inCodeBlock;
    }
    if (!inCodeBlock) {
      const match = line.match(/^(#{1,6})\\s+(.+)$/);
      if (match) {
        const text = match[2].trim().replace(/[*_~`]/g, '');
        const slug = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)+/g, '');
        headers.push({ level: match[1].length, text, slug });
      }
    }
  });
  return headers;
}, [selectedContent]);

Slug Generation

Each heading is converted to a URL-safe slug for navigation:

Text is lowercased
Special characters are removed
Spaces become hyphens
Markdown formatting characters are stripped

Visual Hierarchy

Headings are indented based on their level to show document structure:

// From app/page.tsx:937-957
{outline.map((h, i) => (
  <a
    key={i}
    href={`#${h.slug}`}
    style={{
      display: 'block',
      paddingLeft: `${(h.level - 1) * 0.75}rem`,
      fontSize: '0.8125rem',
      color: 'var(--text-secondary)',
      textDecoration: 'none',
    }}
  >
    {h.text}
  </a>
))}

H1: No indentation
H2: 0.75rem indent
H3: 1.5rem indent
And so on…

Smooth Scrolling

Clicking an outline item smoothly scrolls to the corresponding section in the document.

The outline panel only appears when the current document contains headings. It automatically hides for documents without any headings.

MarkView provides intelligent link handling with hover previews for both internal and external links.

Internal Links

Links to other Markdown files in your workspace are automatically detected and handled:

// From app/page.tsx:113-135
if (!isExternal) {
  let targetPath = href.split('#')[0];
  if (targetPath) {
    if (targetPath.startsWith('./')) targetPath = targetPath.slice(2);
    
    const currentDirParts = currentFile.split('/').slice(0, -1);
    const targetParts = targetPath.split('/');
    
    // Resolve ../
    while (targetParts[0] === '..') {
      targetParts.shift();
      currentDirParts.pop();
    }
    
    const resolvedPath = [...currentDirParts, ...targetParts].join('/');
    
    // First try exact match from root, then try the resolved path relative to current dir
    targetFile = files.find(f => f.name === targetPath) || files.find(f => f.name === resolvedPath);
  }
}

Supported Internal Link Formats

./other-file.md - Relative to current file
../parent/file.md - Parent directory navigation
file.md - Direct filename
#heading-slug - Anchor links to headings in current file

Link Preview on Hover

When hovering over links, MarkView shows contextual previews:

Internal File Preview
External URL Preview

Hovering over internal links shows a 400px × 300px preview card with:

File name as header
Rendered Markdown preview
Fade-out gradient at the bottom
Smart positioning to stay within viewport

// From app/page.tsx:223-241
<div style={{
  position: 'fixed',
  left: previewPos.x,
  top: previewPos.y,
  width: '400px',
  maxHeight: '300px',
  overflow: 'hidden',
  background: 'var(--card-bg)',
  border: '1px solid var(--card-border)',
  borderRadius: '0.5rem',
  boxShadow: '0 8px 32px rgba(0,0,0,0.24)',
  padding: '1rem',
  zIndex: 9999,
}}>

Hovering over external links shows the full URL in a compact tooltip:

// From app/page.tsx:219-222
{isExternal ? (
  <div style={{ fontSize: '0.8125rem', color: 'var(--foreground)', wordBreak: 'break-all' }}>
    {href}
  </div>

External Link Behavior

External links (starting with http:// or https://) open in your default browser:

// From app/page.tsx:137-153
const handleClick = async (e: React.MouseEvent) => {
  e.preventDefault();
  if (isExternal) {
    try {
      await openUrl(href);
    } catch (err) {
      console.error("Failed to open URL", err);
    }
  } else if (targetFile) {
    setSelectedFile(targetFile.name);
  } else if (href.startsWith('#')) {
    const element = document.getElementById(href.slice(1));
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  }
};

External URLs are opened using Tauri’s shell plugin, which respects your system’s default browser settings.

The sidebar provides quick access to all loaded files:

Features

File Counter: Shows total number of loaded files
Active Selection: Highlighted file with distinct styling
Scrollable List: Handles large numbers of files
Text Overflow: Long filenames are truncated with ellipsis

// From app/page.tsx:832-871
<ul style={{ listStyle: 'none', margin: 0, padding: '0 0.5rem 0.5rem', overflow: 'auto', flex: 1 }}>
  {filteredFiles.map((file) => (
    <li key={file.id}>
      <button
        onClick={() => setSelectedFile(file.name)}
        style={{
          width: '100%',
          textAlign: 'left',
          padding: '0.5rem 0.625rem',
          border: 'none',
          borderRadius: '0.25rem',
          cursor: 'pointer',
          fontSize: '0.8125rem',
          background: selectedFile === file.name ? 'var(--primary)' : 'transparent',
          color: selectedFile === file.name ? 'var(--background)' : 'var(--foreground)',
          transition: 'background 0.15s',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap'
        }}
      >
        {file.name}
      </button>
    </li>
  ))}
</ul>

Keyboard Shortcuts Summary

File Navigation

Theme Switching

Alt+T - Open theme selector
↑ / ↓ - Navigate themes
Enter - Apply theme
Esc - Close theme selector

Document Navigation

Next Steps

Opening Files

Learn all the ways to load Markdown files

Command Line

Use MarkView from your terminal

Three-Panel Layout

File Search (Ctrl+K)

Keyboard Shortcut

Click Search Bar

Using the Search

Outline / Table of Contents

How It Works

Link Navigation

Internal Links

Link Preview on Hover

External Link Behavior

Sidebar File List

Features

Keyboard Shortcuts Summary

Next Steps

Opening Files

Command Line

Documentation Index

​Three-Panel Layout

​File Search (Ctrl+K)

​Opening the Search Modal

Keyboard Shortcut

Click Search Bar

​Using the Search

​Search Modal Features

​Outline / Table of Contents

​How It Works

​Link Navigation

​Internal Links

​Link Preview on Hover

​External Link Behavior

​Sidebar File List

​Features

​Keyboard Shortcuts Summary

​Next Steps

Opening Files

Command Line

Three-Panel Layout

File Search (Ctrl+K)

Opening the Search Modal

Using the Search

Search Modal Features

Outline / Table of Contents

How It Works

Link Navigation

Internal Links

Link Preview on Hover

External Link Behavior

Sidebar File List

Features

Keyboard Shortcuts Summary

Next Steps